我如何获得一个固定的侧边栏,例如包含此网站上的社交按钮的侧边栏:
http://www.tripwiremagazine.com/2012/11/social-media-buttons-and-icon-sets.html http://www.tripwiremagazine.com/2012/11/social-media-buttons-and-icon-sets.html
我希望当我向下滚动时我的侧边栏固定在屏幕顶部,但在页面顶部必须有一个绝对位置,以便它在我滚动时停止跟随浏览器。
目前我只是使用:
#sidebar { position:fixed; }
但这并没有给它一个到达页面顶部时的绝对位置。
谢谢
html
<div class="wrapper"><div class="abs" id="sidebar"></div></div>
CSS
.abs { position: absolute; }
.fixed {
position: fixed;
top: 30px !important;}
#sidebar {
top: 150px;
left: 0;
height: 100px;
width: 20px;
background-color: #ccc;}
.wrapper {
height: 1500px;
padding: 20px;}
jQuery
$(document).scroll(function() {
var scrollPosition = $(document).scrollTop();
var scrollReference = 10;
if (scrollPosition >= scrollReference) {
$("#sidebar").addClass('fixed');
} else {
$("#sidebar").removeClass('fixed');
$("#sidebar").addClass('abs');
};
});
该代码的演示:
http://jsfiddle.net/B3jZ5/6/ http://jsfiddle.net/B3jZ5/6/
<div class="wrapper">
是内容的例子。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)