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);
  • 相关阅读:
    3DMAX贴图无法显示
    3DMAX2016安装教程【图文】
    OSG学习:转动的小汽车示例
    JAVA Eclipse 快捷键
    解决JQUERY在IE8,7,6下将字符串转成XML对象时产生的BUG
    毕设二:python 爬取京东的商品评论
    redis 注册为服务
    python 爬取bilibili 视频弹幕
    python 爬取36kr 7x24h快讯
    jQuery实现表格冻结行和列
  • 原文地址:https://www.cnblogs.com/mengwangchuan/p/11270460.html
Copyright © 2011-2022 走看看