<script type="text/javascript">// <![CDATA[ 
$.fn.smartFloat = function() { 
 var position = function(element) { 
  var top = element.position().top, pos = element.css("position"); 
  $(window).scroll(function() { 
   var scrolls = $(this).scrollTop(); 
   if (scrolls > top) { 
    if (window.XMLHttpRequest) { 
     element.css({ 
      position: "fixed", 
      top: "10px" 
     }); 
    } else { 
     element.css({ 
      top: scrolls 
     }); 
    } 
   }else { 
    element.css({ 
     position: pos, 
     top: top 
    }); 
   } 
  }); 
 }; 
 return $(this).each(function() { 
  position($(this)); 
 }); 
}; 
 
//綁定 
$("#float").smartFloat(); 
// ]]></script>

方法二：

/*頁面智能層浮動*/ 
jQuery(document).ready(function($){ 
 var $sidebar = $(".float"), 
 $window = $(window), 
 offset = $sidebar.offset(), 
 topPadding = 20; 
 $window.scroll(function() { 
  if ($window.scrollTop() > offset.top) { 
   $sidebar.stop().animate({ 
    marginTop: $window.scrollTop() - offset.top + topPadding 
   }); 
  } else { 
   $sidebar.stop().animate({ 
    marginTop: 0 
   }); 
  } 
 }); 
}); 
<div id="float" class="float"> 
<h3>博主推薦</h3> 
廣告代碼 
</div>

以上就是jQuery網(wǎng)頁右側(cè)廣告跟隨滾動，仿wordpress右側(cè)廣告跟隨滾動，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery實現(xiàn)的代替?zhèn)鹘y(tǒng)checkbox樣式插件
這篇文章主要介紹了jquery實現(xiàn)的代替?zhèn)鹘y(tǒng)checkbox樣式插件,可實現(xiàn)滑動選擇的效果,需要的朋友可以參考下
2015-06-06
jquery+swiper組件實現(xiàn)時間軸滑動年份tab切換效果
這篇文章主要介紹了jquery+swiper組件實現(xiàn)時間軸滑動年份tab切換效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-12-12
element form 校驗數(shù)組每一項實例代碼
這篇文章主要介紹了element form 校驗數(shù)組每一項的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-10-10
解決jQuery ajax動態(tài)新增節(jié)點無法觸發(fā)點擊事件的問題
在寫ajax加載數(shù)據(jù)的時候發(fā)現(xiàn)，后面添加進來的demo節(jié)點元素，失去了之前的點擊事件，如何解決此問題呢？下面小編給大家?guī)砹薺Query ajax動態(tài)新增節(jié)點無法觸發(fā)點擊事件的解決方法，一起看看吧
2017-05-05
jquery easyui的tabs使用時的問題
相信很多人用過jquery easyui，這個東西非常好用，界面也很美觀，你都不需要在界面上花太多的工夫，例子程序也比較完善，基本上看下例子就能很好的使用easyui了，很方便。
2010-03-03
jQuery插件Flexslider實現(xiàn)圖片輪播、圖文結(jié)合滑動切換效果
這篇文章主要介紹了jQuery插件Flexslider實現(xiàn)圖片輪播、圖文結(jié)合滑動切換效果的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-07-07
jQuery選擇器之屬性篩選選擇器用法詳解
下面小編就為大家?guī)硪黄猨Query選擇器之屬性篩選選擇器用法詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
基于jquery的網(wǎng)頁SELECT下拉框美化代碼
基于CSS 和JS的網(wǎng)頁SELECT下拉框美化,JQUERY 插件，最近為公司的網(wǎng)頁制做部，開發(fā)了一個用于美化網(wǎng)頁上select 下拉框的JQUERY插件，拿來與大家分享。
2010-10-10
jqgrid 編輯添加功能詳細解析
本文是對jqgrid 編輯添加功能進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
收集的10個免費的jQuery相冊
或許在網(wǎng)絡(luò)上你已經(jīng)見過數(shù)百種通過jQuery實現(xiàn)的相冊，但是我們發(fā)現(xiàn)的這些相冊，他們有額外的東西，優(yōu)雅和獨特的創(chuàng)意！每個相冊都是可在線預(yù)覽和免費下載的。你可以為你的Web項目添加色彩。
2011-02-02