JQuery侧边栏滚动(附具体流程)

林继 WordPress 3,820 共写了405个字 (2010-08-26 14:03:05) 没有评论 打印 扫描二维码 百度已收录

第一步:给“博友推荐”那个栏目的ID 命名为

  1. <li id="tuijian">

第二步(非必须):在header.php加载 jquery库….

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

此为Google的jq库….你也可以下载到自己的主机进行调用….

如果你已经调用过……你可以跳过此步

第三步:加入代码:

此代码有两种加入方式…
方法一:直接在header.php里面添加如下代码

  1.     <script type="text/javascript" >
  2.  
  3.     jQuery(document).ready(function($) {
  4.  
  5.     $(function() {
  6.  
  7.     var $sidebar = $("#tuijian"),
  8.  
  9.     $window = $(window),
  10.  
  11.     offset = $sidebar.offset(),
  12.  
  13.     topPadding = 15;
  14.  
  15.     $window.scroll(function() {
  16.  
  17.     if ($window.scrollTop() > offset.top) {
  18.  
  19.     $sidebar.stop().animate({
  20.  
  21.     marginTop: $window.scrollTop() - offset.top + topPadding});
  22.  
  23.     } else {
  24.  
  25.     $sidebar.stop().animate({
  26.  
  27.     marginTop: 0
  28.  
  29.     });}});});
  30.  
  31.     });
  32.  
  33.     </script>

方法二:把下面的代码存为.js文件:

  1.  
  2. /* JQuery侧边栏滚动 */
  3.  
  4.     jQuery(document).ready(function($) {
  5.  
  6.     $(function() {
  7.  
  8.     var $sidebar = $("#tuijian"),
  9.  
  10.     $window = $(window),
  11.  
  12.     offset = $sidebar.offset(),
  13.  
  14.     topPadding = 15;
  15.  
  16.     $window.scroll(function() {
  17.  
  18.     if ($window.scrollTop() > offset.top) {
  19.  
  20.     $sidebar.stop().animate({
  21.  
  22.     marginTop: $window.scrollTop() - offset.top + topPadding});
  23.  
  24.     } else {
  25.  
  26.     $sidebar.stop().animate({
  27.  
  28.     marginTop: 0
  29.  
  30.     });}});});
  31.  
  32.     });

然后再在header.php的head标签中添加:

  1. <script src="http://你的域名/文件名.js" type="text/javascript"></script>

本文来自:http://www.yangluodi.com/index.php/admin/522.html

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

< >