向下滚动一点后如何贴上div

小编典典

向下滚动一点后如何贴上div

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>

在此示例中，滚动页面时应固定第二个div。当我们向上滚动时，应该变成先前的状态。请帮我。

阅读 310

2020-05-16

共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');
                }
        });
  });

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

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

2020-05-16