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)
| 归档时间: |
|
| 查看次数: |
47937 次 |
| 最近记录: |