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();
                        }
                    }) 
  • 相关阅读:
    ACdream 1069 无耻的出题人
    ACdream 1064 完美数
    ACdream 1028 Path
    ACdream 1020 The Game about KILL
    ACdream 1015 Double Kings
    CodeForces
    Codeforces 390A( 模拟题)
    Codeforces 389B(十字模拟)
    Codeforces 389A (最大公约数)
    Codeforces 417 C
  • 原文地址:https://www.cnblogs.com/kitty-blog/p/11944366.html
Copyright © 2011-2022 走看看