当页面滚动到距顶部一定高度时某DIV自动隐藏和显示

Posted 2020-08-28 前端HL

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了当页面滚动到距顶部一定高度时某DIV自动隐藏和显示相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
	<style type="text/css">
		*{ margin: 0; padding: 0; }
        body{ max-width: 640px; margin: 0 auto }
        .div1{ background: #D5D4D4;height: 500px; margin-bottom: 10px; overflow: hidden; font-size: 50px;}
        .div2{ background: #D5D4D4; height: 500px; margin-bottom: 10px; overflow: hidden;font-size: 50px;}
        .div3{ background: #D5D4D4; height: 500px; margin-bottom: 10px; overflow: hidden;font-size: 50px;}
        #scrollSearchDiv{ width: 100%; height: 40px; line-height: 40px; background-color: #EA5A5A; display: none; position: fixed; left: 0; bottom:0; text-align: center; font-size: 20px; color: #fff; }
	</style>
</head>
<body>
<div class="div1 J_payBottomShow J_payPopupShow">1</div>   
 <div class="div2  J_payPopupShow">2</div>   
 <div class="div3  J_payPopupShow">3</div>   
 <div id="scrollSearchDiv">按钮显示隐藏</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
 

<script type="text/javascript">
	$(function () {              
            //绑定滚动条事件  
              //绑定滚动条事件  
            $(window).bind("scroll", function () {  
                var sTop = $(window).scrollTop();  
                var sTop = parseInt(sTop);  
                if (sTop >= 130) {  
                    if (!$("#scrollSearchDiv").is(":visible")) {  
                        try {  
                            $("#scrollSearchDiv").slideDown();  
                        } catch (e) {  
                            $("#scrollSearchDiv").show();  
                        }                        
                    }  
                }  
                else {  
                    if ($("#scrollSearchDiv").is(":visible")) {  
                        try {  
                            $("#scrollSearchDiv").slideUp();  
                        } catch (e) {  
                            $("#scrollSearchDiv").hide();  
                        }                         
                    }  
                }   
            });  
        })  
</script>	
</body>
</html>

　　效果如图：

如果文章中有不对之处，随时欢迎您的纠正~~

以上是关于当页面滚动到距顶部一定高度时某DIV自动隐藏和显示的主要内容，如果未能解决你的问题，请参考以下文章

js控制当滚动条到最底部时隐藏某个div

使用js或jq控制一个div，当滚动到页面顶部的时候固定在顶部，离开可继续滚动吗？

求助:如果使用js\jq 控制一个div 当滚动到页面顶部的时候固定在顶部，离开可继续滚动

div中镶嵌一个iframe,怎么让iframe的滚动条不起作用,而div的滚动条起作用

为页面增加滚动事件侦听，当页面滚动高度大于200，在页面右下方出现返回顶部按钮