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);