• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

我的博客我做主

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

根据滚动条 来判断元素显示

$(window).scroll(function(){
                    let qrcode_H =$("#qrcode_product_fixed").outerHeight();//二维码高度
                    let banner_h = $("#product-content-banner").outerHeight();//banner 高度
                    let main_h = $("#product-content-main").outerHeight();//主图高度
                    let footer_h = $(".footer-v5-copyright").outerHeight();//footer 高度
                    
                    let window_h = window.innerHeight;//可视区域高度
                    let scroll_top = $(window).scrollTop();//滚动有滚动距离
                    let clientHeight=$('body')[0].clientHeight;//文档内容高度

                    let isTop = scroll_top + window_h > banner_h + main_h +qrcode_H;//在滚动条滚动到顶部二维码底边的时候显示 fixed 二维码
                    let isbottom = scroll_top + window_h >=  clientHeight - footer_h;//在滚动条滚动到footer顶部的时候显示 fixed 二维码

                    if(isTop && !isbottom){
                        $("#qrcode_product_fixed").show();//fixed 二维码
                        $("#qrcode_product_top").hide();//顶部二维码
                        $("#qrcode_product_bottom").hide();//底部二维码
                    }else if(isbottom){
                        $("#qrcode_product_bottom").show();
                        $("#qrcode_product_fixed").hide();
                        $("#qrcode_product_top").hide();
                    }else{
                        $("#qrcode_product_top").show();
                        $("#qrcode_product_fixed").hide();
                        $("#qrcode_product_bottom").hide();
                    }
                }) 
作者:胡倩倩0903
出处:https://www.cnblogs.com/kitty-blog/
本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。

posted on 2020-01-10 16:35  kitty20180903suzhou  阅读(224)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3