隨窗體滑動的小插件sticky源碼
$.fn.stickyfloat = function(options, lockBottom) {
var $obj = this;
var parentPaddingTop = parseInt($obj.parent().css('padding-top'));
var startOffset = $obj.parent().offset().top;
var opts = $.extend({ startOffset: startOffset, offsetY: parentPaddingTop, duration: 200, lockBottom:true }, options);
$obj.css({ position: 'absolute' });
if(opts.lockBottom){
var bottomPos = $obj.parent().height() - $obj.height() + parentPaddingTop;
if( bottomPos < 0 )
bottomPos = 0;
}
$(window).scroll(function () {
$obj.stop();
var pastStartOffset = $(document).scrollTop() > opts.startOffset;
var objFartherThanTopPos = $obj.offset().top > startOffset;
var objBiggerThanWindow = $obj.outerHeight() < $(window).height();
if( (pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow ){
var newpos = ($(document).scrollTop() -startOffset + opts.offsetY );
if ( newpos > bottomPos )
newpos = bottomPos;
if ( $(document).scrollTop() < opts.startOffset )
newpos = parentPaddingTop;
$obj.animate({ top: newpos }, opts.duration );
}
});
};
使用方法很簡單：只要在頁面中引入該插件，然后用選擇器調用：
$('#menu15').stickyfloat({ duration: 500 });
$('#menu14').stickyfloat({ duration: 500 });
$('#menu13').stickyfloat({ duration: 500 });
$('#menu12').stickyfloat({ duration: 500 });
后面的duration參數(shù)表示滑動的速度，越大越慢。
相關文章
這篇文章主要介紹了JS檢測頁面中哪個HTML標簽觸發(fā)點擊事件的方法,涉及javascript頁面元素事件響應機制,需要的朋友可以參考下2016-06-06
這篇文章主要介紹了微信小程序實現(xiàn)撥打電話功能的示例代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
在ECMAScript中,變量可以存在兩種類型的值,即原始值和引用,這篇這篇文章主要給大家介紹了關于ECMAScript中的原始值和引用值的相關資料,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了微信小程序頂部導航欄可滑動并選中放大,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)盒子拖拽動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
Javascript showModalDialog兩個窗體之間傳值
前一篇文章Javascript怎么在兩個窗體之間傳值中講到了如何利用window.open()方法打開新窗體，并在兩個窗體之間傳值的方法。2009-09-09
用servlet賦值給html頁面文本框值后,用alert來彈出這個值.結果顯示"undefined".下面為大家介紹下具體的判斷方法，大家可以參考下2014-03-03
有些代碼,需要的時候能寫的出來,但是也需要時間,如果有的東西長時間不接觸,再次看的時候也會感覺很陌生,這篇文章主要給大家介紹了一些不常見卻很實用的JS技巧,既可以作為一個知識的積累,又可以作為閑暇時打發(fā)時間寫寫代碼的記錄,需要的朋友可以參考下2021-11-11
這篇文章主要介紹了微信小程序仿今日頭條導航欄滾動解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
javascript中使用css需要注意的地方小結，注意保留字問題。2010-09-09