向下滚动一点后如何粘贴 div答案

【问题标题】：how can I stick the div after scrolling down a little向下滚动一点后如何粘贴 div
【发布时间】：2013-01-24 07:45:34
【问题描述】：

当我们向下滚动页面并且第二个 div 遇到顶部边界时，我想粘贴第二个 div。修复后，它应该与其他页面一起滚动。我怎样才能做到这一点？

#settings{
    width:100%;
    background:#383838;
    height:60px;
}
#menu{
    width:100%;
    position:relative;
    height:100px;
    background:#aaa;
}
#body-content{
    height:900px;
    position:relative;
}

和 HTML

<body>
<div id="top">
    <div id="settings">
    </div>
    <div id="menu">
    </div>
</div>
<div id="body-content">
</div>

</body>

在这个例子中 http://jsfiddle.net/WBur3/ ，当我们滚动页面时，第二个 div 应该是固定的。当我们向上滚动时，应该会变成之前的状态本身。请帮帮我。

【问题讨论】：

所以，如果我是正确的，您希望修复 menu。但它必须在您向下滚动时立即移动到页面顶部？
是的...当我们向下滚动时，只有“菜单”必须固定在顶部。当我们向上滚动到最大值时，必须显示“设置”和“菜单”。

标签： javascript html css

【解决方案1】：

你可以通过jquery获得这个效果

$(function(){
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');
                }
        });
  });

DEMO HERE

注意：不要忘记在您的页面中包含 jquery 库链接（假设您是初学者）

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

【讨论】：

但是我不想在
里面使用 table 有没有替代方法？
@user1012181 这只是一个例子。你可以添加任何你想要的。检查这个jsfiddle.net/uFq2k/1
有没有办法让这个 jquery 脚本也能在智能手机上运行？在智能手机上测试时菜单不粘？
不知道你有没有注意到。当它是fixed 时，内容会跳转到它创建的空白空间。你能给出一个解决方案吗？请

【解决方案2】：

我会在这里添加评论，但我没有足够的声誉来做这件事。我在一个项目中需要类似的东西，我想我会分享我对@Sowmya 答案的更改。我稍微清理了代码并使滚动效果更加平滑。 JSfiddle

$(function () {
    // Check the initial Poistion of the Sticky Header
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() > stickyHeaderTop) {
            $('#stickyheader').css({
                position: 'fixed',
                top: '0px'
            });
            $('#othercontent').css('margin-top', $('#stickyheader').outerHeight(true) + parseInt($('#unstickyheader').css('marginBottom')));
        } else {
            $('#stickyheader').css({
                position: 'static',
                top: '0px'
            });
            $('#othercontent').css('margin-top', '0px');
        }
    });
});

body {
    font: 13px sans-serif;
}
#stickyheader {
    width: 100%;
    height: 40px;
    background:black;
    color:white;
    margin-bottom: 10px;
}
#unstickyheader {
    margin-bottom: 15px;
}

【讨论】：

【解决方案3】：

为菜单 div 分配一个 id：

 <div id ="menuContainer">

在项目和页面中包含 jquery：

<script src="Scripts/jquery-1.11.3.min.js" type="text/javascript"></script>

下面是实现预期效果的代码：

<script type="text/javascript">

    $("document").ready(function ($) {

        // On document load get the position of the div u want to stick on certain position
        var offsets = document.getElementById('menuContainer').getBoundingClientRect();

        // Get position from top of browser
                var topoffsets = offsets.top;

                // Binding fuction to windows scroll event
                $(window).bind('scroll', function () {

                    if ($(window).scrollTop() > topoffsets) {

                               $("#menuContainer").css({ top: 0, position: 'fixed' });

                            } else {
                               $("#menuContainer").css({ top: '', position: '' });
                            }
                });
    });

【讨论】：

【解决方案4】：

没有`

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
    /* Note: Try to remove the following lines to see the effect of CSS positioning */
    .affix {
      top: 0;
      width: 100%;
    }
    .affix + .container-fluid {
      padding-top: 70px;
    }
    </style>
    </head>
    <body>
    <div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
    <h1>Bootstrap Affix Example</h1>
    <h3>Fixed (sticky) navbar on scroll</h3>
    <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
    <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
    </div>

    <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">Basic Topnav</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    </ul>
    </nav>
    <div class="container-fluid" style="height:1000px">
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    </div>
    </body>
    </html>

`，我们可以使用上面的代码来做到这一点。

【讨论】：