页面滚动时固定菜单或侧边栏是常用的手段,通常依靠javascript扑捉滚屏事件,再配合元素的CSS属性来实现。CSS中position:fixed
也能实现一定的需求,但功能比较局限。
1. CSS 固定导航菜单
导航菜单一般置于页面顶端或左侧,现以顶部为例,屏幕滚动时希望它一直固定在顶部,只需使用fixed属性就行:
nav{
position:fixed;
width:100%;
top:0;
right:0;
}
2. javascript 固定侧边栏
如果需要固定整个侧边栏,按上面的方法即可,但大部分时候需要在页面滚动时固定侧边栏的某些元素,用来显示小广告之类的东西,本博用来显示页内目录。假设侧边栏结构如下:
<div id="sidebar">
<div class="s1" >
</div>
<div class="s2" >
</div>
<div class="s3" id="needfixed" >
</div>
</div>
其中#needfixed
是需要在滚动到此处后固定的元素,#sidebar
是其父元素。滚屏到其顶部时为其添加position:fixed
属性:
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var elementPosition = $('#needfixed').offset().top;
$(window).scroll(function(){
if($(window).scrollTop() > elementPosition){
$('#needfixed').css('position','fixed').css('top','0');
} else {
$('#needfixed').css('position','static');
}
});
</script>
3. 可能存在的问题:固定后宽度不对了
由于当下自适应页面用的比较多,很可能是#needfixed
未设置绝对宽度,而是百分比,可以通过获取其原父元素#sidebar
的宽度来解决:
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var elementPosition = $('#needfixed').offset().top;
var objWidth = $('#sidebar').width();
$(window).scroll(function(){
if($(window).scrollTop() > elementPosition){
$('#needfixed').css('position','fixed').css('top','0').css('width',objWidth);
} else {
$('#needfixed').css('position','static');
}
});
</script>
另外,padding
和border
问题可以通过box-sizing: border-box;
属性搞定。
333332017 年 05 月 19 日下午 4:15
第一种办法不行
snowtraces*2017 年 05 月 20 日下午 1:15
其父元素需要指定position:relative ,或其他属性