向下滚动一下后,我怎么能坚持div

use*_*181 20 html javascript css

当我们向下滚动页面并且第二个div遇到顶部边界时,我想坚持第二个div.当它被修复时,它应该与其他页面一起滚动.我怎样才能做到这一点?

#settings{
    width:100%;
    background:#383838;
    height:60px;
}
#menu{
    width:100%;
    position:relative;
    height:100px;
    background:#aaa;
}
#body-content{
    height:900px;
    position:relative;
}
Run Code Online (Sandbox Code Playgroud)

和HTML

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

</body>
Run Code Online (Sandbox Code Playgroud)

在这个例子http://jsfiddle.net/WBur3/中,当我们滚动页面时,应该修复第二个div.当我们向上滚动时,应该变成先前的状态本身.请帮我.

Sow*_*mya 54

你可以用这个效果 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');
                }
        });
  });
Run Code Online (Sandbox Code Playgroud)

在这里演示

注意:不要忘记在页面中包含jquery库链接(假设您是初学者)

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Run Code Online (Sandbox Code Playgroud)

  • @ user1012181这只是一个例子.你可以添加你想要的任何东西.检查这个http://jsfiddle.net/uFq2k/1/ (3认同)
  • 我不知道你是否注意到了它.当它被"修复"时,内容会跳转到它创建的空白区域.你能解决这个问题吗?请 (2认同)