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();
                        }
                    }) 
  • 相关阅读:
    2018-2019-2 20189203 移动平台应用开发实践第六周学习总结
    安全类会议级别
    信息安全工程实践WEEK5,开发WEEK2
    信息安全工程实践WEEK5,开发WEEK1
    如何在Word中排出漂亮的代码
    2018-2019-1 20189204《Linux内核原理与分析》第九周作业
    2018-2019-1 20189204《Linux内核原理与分析》第八周作业
    2018-2019-1 20189204《Linux内核原理与分析》第七周作业
    2018-2019-1 20189204《Linux内核原理与分析》第六周作业
    2018-2019-1 20189204《Linux内核原理与分析》第五周作业
  • 原文地址:https://www.cnblogs.com/kitty-blog/p/11944366.html
Copyright © 2011-2022 走看看