zoukankan      html  css  js  c++  java
  • 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);
  • 相关阅读:
    c++,为什么要引入虚拟继承
    Linux分页机制之分页机制的演变--Linux内存管理(七)
    调度器增强
    Linux分页机制之概述--Linux内存管理(六)
    Linux内存描述之高端内存--Linux内存管理(五)
    Linux内存描述之内存页面page--Linux内存管理(四)
    Linux内存描述之内存区域zone--Linux内存管理(三)
    Linux内存描述之内存节点node--Linux内存管理(二)
    linux内核调试技巧之一 dump_stack【转】
    Linux内存描述之概述--Linux内存管理(一)
  • 原文地址:https://www.cnblogs.com/mengwangchuan/p/11270460.html
Copyright © 2011-2022 走看看