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();
                        }
                    }) 
  • 相关阅读:
    对 Service中sqlsession对象的优化
    mybatis 接口绑定 和 动态SQL
    添加指定的日志信息
    数据库优化
    MyBatis 实现新增
    MyBatis中log4j 和 参数 和 分页和别名 功能
    OpenGL_混合
    android应用开发揭秘第13章01示例,移动图像,opengl绘制星星问题解决!
    《关于个人承接项目的注意事项》读后感
    Android OpenGL ES教程 第二部分 构建多边形
  • 原文地址:https://www.cnblogs.com/kitty-blog/p/11944366.html
Copyright © 2011-2022 走看看