zoukankan      html  css  js  c++  java
  • 根据滚动条 来判断元素显示

    $(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();
                        }
                    }) 
  • 相关阅读:
    [译]JavaScript源码转换:非破坏式与再生式
    [译]ES6中的代理对象
    tensorflow 如何获取graph中的所有tensor name
    python3中的str和bytes
    git submodule 添加 更新 删除 教程
    《重构:改善既有代码的设计》摘抄
    thrift入门教程/thrift资料集合
    将python2代码升级为python3代码最佳实践
    python标准库:subprocess——子进程管理
    安装“python-snappy”遇到“error: command 'x86_64-linux-gnu-gcc' failed with exit status 1”
  • 原文地址:https://www.cnblogs.com/kitty-blog/p/11944366.html
Copyright © 2011-2022 走看看