javascript - 向下滚动一点后如何粘贴 div

标签 javascript html 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;
}

和 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 应该是固定的。当我们向上滚动时,本身应该变成之前的状态。请帮助我。

最佳答案

你可以用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>

关于javascript - 向下滚动一点后如何粘贴 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14496240/

相关文章:

Javascript RegEx 非捕获前缀

javascript - 使 gridster.js 瓦片粘在特定的网格位置(捕捉到网格)

javascript 检查对象原型(prototype)

css - 使用 bootstrap 防止空白

Jquery悬停动画只有一次

javascript - Browserify:覆盖包并使用不同的主文件

javascript - jQuery 读取多个 XML 文件并在插入到 HTML 中进行显示时删除重复项

html - 在相对元素内水平居中绝对元素

html - 漏洞 : Bootstrap Modal Box

javascript - 在非事件窗口后 catch CSS 动画