快捷導(dǎo)航

jQuery判斷div隨滾動(dòng)條滾動(dòng)到一定位置后停止

更新時(shí)間：2014年04月02日 10:42:09 作者：

這篇文章主要介紹了jQuery判斷div隨滾動(dòng)條滾動(dòng)到一定位置后停止的方法,需要的朋友可以參考下

實(shí)現(xiàn)代碼:

<script type="text/javascript">
var rollSet = $('#widget');
    var offset = rollSet.offset();
    var fwidth = $("#footer").height();
    $(window).scroll(function() {
        var scrollTop = $(window).scrollTop();
        var scrollBtm = $(document).height() - $(window).scrollTop() - $("#widget").height();
        if (offset.top < scrollTop) {
            if (scrollBtm > fwidth) {
                rollSet.removeClass('absolute').addClass('fixed')
            } else {
                rollSet.removeClass('fixed').addClass('absolute')
            }
        } else {
            rollSet.removeClass('fixed')
        }
    })
</script>

方法說明：
由頁面總高度減去已滾動(dòng)的高度再減去ID為widget的層的高度即等于該層底部距離底部的高度；
當(dāng)距離底部的高度小于或等于特定位置距離底部的高度時(shí)，去掉樣式fixed，然后給該層添加絕對(duì)定位！
CSS中要給父父層添加position:relative;

您可能感興趣的文章:

相關(guān)文章

jquery 插件開發(fā) extjs中的extend用法小結(jié)
在jquery中，extend其實(shí)在做插件時(shí)還是用的比較多的，今天同時(shí)小結(jié)jquery和ext js中的extend用法,有需要的朋友可以參考下
2013-01-01
JQuery的AJAX實(shí)現(xiàn)文件下載的小例子
JQuery的ajax函數(shù)的返回類型只有xml、text、json、html等類型，沒有“流”類型，所以我們要實(shí)現(xiàn)ajax下載，不能夠使用相應(yīng)的ajax函數(shù)進(jìn)行文件下載。但可以用js生成一個(gè)form，用這個(gè)form提交參數(shù)，并返回“流”類型的數(shù)據(jù)。在實(shí)現(xiàn)過程中，頁面也沒有進(jìn)行刷新
2013-05-05
jquery帶動(dòng)畫效果幻燈片特效代碼
這篇文章主要介紹了jquery帶動(dòng)畫效果幻燈片特效，推薦給大家，有需要的小伙伴可以參考下。
2015-08-08
JavaScript 學(xué)習(xí)筆記之一jQuery寫法圖片等比縮放以及預(yù)加載
以前對(duì)于JavaScript總是在用到的時(shí)候在頁面上寫幾個(gè)函數(shù)，基本沒考慮到函數(shù)的封裝與重用，最近有個(gè)項(xiàng)目可能對(duì)于這方面要求有點(diǎn)高，所以就研究了下類似jQuery的封裝
2012-06-06
當(dāng)jQuery1.7遇上focus方法的問題
如果一定要用最高版本的jQuery，最省事的辦法莫過于在寫xxx.focus()時(shí)，加一個(gè)try/catch，變成try{xxx.focus();}catch(e){}
2014-01-01
jquery判斷復(fù)選框選中狀態(tài)以及區(qū)分attr和prop
這篇文章主要介紹了jquery判斷復(fù)選框選中狀態(tài)以及區(qū)分attr和prop，感興趣的小伙伴們可以參考一下
2015-12-12
使用jQuery+EasyUI實(shí)現(xiàn)CheckBoxTree的級(jí)聯(lián)選中特效
這篇文章主要介紹了使用jQuery+EasyUI實(shí)現(xiàn)CheckBoxTree的級(jí)聯(lián)選中特效的相關(guān)資料,需要的朋友可以參考下
2015-12-12
jquery實(shí)現(xiàn)動(dòng)態(tài)添加附件功能
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)添加附件功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
jquery.lazyload 實(shí)現(xiàn)圖片延遲加載jquery插件
看到了淘寶產(chǎn)品介紹中,圖片是在下拉滾動(dòng)條時(shí)加載,這是一個(gè)很不錯(cuò)的用戶體驗(yàn)。減少了頁面加載的時(shí)間了，也減輕了服務(wù)器的壓力，就查了下用JQuery..
2010-02-02
jquery中trigger()無法觸發(fā)hover事件的解決方法
jquery中trigger() 方法觸發(fā)被選元素的指定事件類型了，但有使用過程中會(huì)碰到一些問題了，下面我們一起來看看jQuery中trigger()觸發(fā)hover事件疑問,希望對(duì)各位有幫助。
2015-05-05