网页侧栏浮动固定但不遮住底部的js实现方法

作者:Kaka 时间:2015-1-22 15:21:38 浏览: 评论:5

网页侧栏固定的用途非常广泛，可以是固定导航，可以是固定部分文章，可以是固定对话窗口，更为常见的是固定广告层。现在很多站长都把侧栏部分内容给固定了，然而当被固定内容层太高时，网页滚到后面时可能会把底部的内容遮住了，这十分影响用户体验的。如下图所示：

侧栏把底部遮住了

为了获得更好的用户体验，需要解决这个问题，使侧栏始终位于底部之上，但又始终浮动可见。效果图如下：

侧栏位于底部之上

侧栏始终浮动可见

使用JS的实现方法

1、在<head></head>里添加如下代码

<script type="text/javascript" src="/script/jquery-1.4.2.min.js"></script>
<style type ="text/css" >
    .fixed {
        position:fixed;
        top:0px;
        width:300px;
    }
    .fixed2 {
        position:fixed;
        top:-40px;
        width:300px;
    }
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
    var a = $("#floatbox").offset();
    $(window).scroll(function() {
        var b = $(window).scrollTop();
        if (b > a.top) {
           if((b + 600 + 200) < document.body.parentNode.scrollHeight)
              $("#floatdiv").addClass("fixed");
           else
              $("#floatdiv").addClass("fixed2");
        } else {
            $("#floatdiv").removeClass("fixed");
            $("#floatdiv").removeClass("fixed2");
        }
    });
});
</script>

上述代码里的数字需要根据自己的网页进行调整，解释如下：

top:0px; 这个是漂浮层距离网页顶部的位置
width:300px; 这个是漂浮层的宽度
top:-40px; 这个是漂浮层距离网页顶部的位置

if((b + 600 + 200) < document.body.parentNode.scrollHeight)
600是漂浮层的高度，200是网页底部的高度，如下图所示：

漂浮层和底部高度

2、固定层的代码如下：

<div id="floatbox" >
          <div id="floatdiv">
          <ul>
            <li><a href="#" target="_blank">这里是需要固定的内容</a></li>
            <li><a href="#" target="_blank">这里是需要固定的内容</a></li>
            <li><a href="#" target="_blank">这里是需要固定的内容</a></li>
            <li><a href="#" target="_blank">这里是需要固定的内容</a></li>
          </ul>
          </div>
</div>

通过上述方法的设置，固定侧栏但又不遮住底部的功能就实现了。

您可能对如下文章也感兴趣

4种方法固定侧栏内容和广告位提高网站PV和点击率