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