jquery 指定區域內隨頁面滾動懸浮

原理：根據可懸浮區域高度及距頂部距離，設置絕對定位 + 跟隨滾動修改top

    var height=$('#floatLayer').height();//懸浮塊高度 var flyer = $('#baike_detail_main .detail_main .main_right .float_layer');//懸浮塊 var dingweitop = $('#baike_detail_main .detail_main').offset().top - 270;//懸浮區域距頂部高度 var dingweibuttom = dingweitop + $('#baike_detail_main .detail_main').height() - height;//懸浮區域底部距頁面頂部高度
    $(window).scroll(function(){
        console.log(height,dingweitop,dingweibuttom,$(window).scrollTop());// $(window).scrollTop();已滾動高度 if(dingweitop < $(window).scrollTop() && $(window).scrollTop() <dingweibuttom){//區域內滾動則同時改變top值
            flyer.css('position','absolute');
            flyer.css('top',$(window).scrollTop()-dingweitop);
            console.log($(window).scrollTop()-dingweitop);
        }else if(dingweibuttom<$(window).scrollTop()){
            flyer.css('position','absolute');
        }else{
            flyer.css('position','unset');
        }
    })

 

 

下面方法有問題，用fixed很麻煩，還是absolute方便

大致原理，就是判斷制定元素與頂部滾動距離，以下是簡單的判斷，顯示會有點錯位，還需要優化才能更流暢

(function () {
    $(window).scroll(function(){ var height=$('#floatLayer').height(); var flyer = $('#baike_detail_main .detail_main .main_right .float_layer'); var dingweitop = $('#baike_detail_main .detail_main').offset().top - 270; var dingweibuttom = dingweitop + $('#baike_detail_main .detail_main').height() - height - 270; if(dingweitop < $(window).scrollTop() && $(window).scrollTop() <dingweibuttom){ flyer.css('position','fixed'); }else if(dingweibuttom<$(window).scrollTop()){ flyer.css('position','absolute'); }else{ flyer.css('position','unset'); } }) // var height = {
    //     document: $(document).height(),// 窗口大小高度
    //     window: $(window).height(),//瀏覽器可視窗高度
    //     flayer: $('#baike_detail_main .detail_main .main_left').height(), //指定元素高度
    //     windowScrollTop: $(window).scrollTop(),// 滾動條的垂直位置。
    // };

})(jQuery);