注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

浮游生物的博客

以扯蛋的态度面对操蛋的人生

 
 
 

日志

 
 

自适应侧边栏随窗口滚动(jQuery)  

2014-09-19 11:22:00|  分类: js+jQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
//前提是你的主题必须已加载了jQuery
<SCRIPT src="/images/css/jquery.js"></SCRIPT>
把下面代码加到头部即可:
<script type="text/javascript">   
$(function() {
    var $sidebar   = $("#sidebar"),   
        $window    = $(window),   
        offset     = $sidebar.offset(),   
        topPadding = 45;   
  
    $window.scroll(function() {   
        if ($window.scrollTop() > offset.top) {   
            $sidebar.stop().animate({   
                marginTop: $window.scrollTop() - offset.top + topPadding   
            });   
        } else {   
            $sidebar.stop().animate({   
                marginTop: 0   
            });   
        }   
    });   
  
});   
</script>  
可根据不同的主题模版,自行修改一下其中的DIV标签#sidebar名称。此方法兼容所有浏览器,如:
<div class="Column_nva" id="sidebar">
    <ul class="Column_nva Wide">
        <li>
            <a href="/gywz/index.html" target="_blank" id="c1"  class="about_dh"  >
                <span>五洲简介</span><div id="v1"></div>
                </a>
            </li>       
         
             <li>
            <a href="/jczt/index.html" target="_blank" id="c11"> 
                <span>精彩专题</span><div id="v11"></div>
                </a>
            </li>
             
        </ul>
    </div>

  评论这张
 
阅读(306)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018