记忆盒子

把记忆装进灰色的盒子,封装起来,那年那月,重新拾起。

首页搜索目录
search
当前主题: 互联网络

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

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

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

侧栏把底部遮住了

侧栏把底部遮住了

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

侧栏位于底部之上

侧栏位于底部之上

侧栏始终浮动可见

侧栏始终浮动可见

使用JS的实现方法

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

<!-- float div start-->  
<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>
<!-- float div end-->

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

<script type="text/javascript" src="/script/jquery-1.4.2.min.js"></script>
引用jquery.js,注意文件路径

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和点击率

加入本站QQ群(312716741),交流分享网站建设、优化、SEO技术。。。

 

上一篇: 引用googleapis jquery和fonts文件会大大拖慢网页速度
下一篇: webkaka网站速度诊断更新:新增视图分析和支持网页登录等功能
  • 5.爱爱
  • http://qq502.com/
  • 我也用起的,但是每次到了文章多说评论框哪里就走不下去了,不知道是怎么回事,其他页面都还可以!
  • 2015-2-21 13:01:59 回复该留言

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客                   QQ交流群(312716741)

  • 通过Google订阅本站 通过鲜果订阅本站 通过抓虾订阅本站
  • 通过QQ邮箱订阅本站 通过Yahoo订阅本站 通过有道订阅本站

Search

最新评论及回复

最近留言

网站分类

Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

Copyright @2009 All Rights Reserved. 粤ICP备09073737号

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009 All Rights Reserved.