当我们向下滚动页面并且当第二个 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');
}
});
});
注意:不要忘记在页面中包含 jquery 库链接(假设您是初学者)
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
关于javascript - 向下滚动一点后如何粘贴 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14496240/