当页面滚动到距顶部一定高度时某DIV自动隐藏和显示，深圳市一二八软件有限公司

网站建设

域名注册

虚拟主机

企业邮局

成品网站

网站优化排名SEO

技术知识

CSSDIV

AJAX

PHP知识

行业资讯

400电话常见问题

可信网站常见问题

Ftp常见问题

CSSDIV

位置:首页 > 网站知识 > CSSDIV

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

关键字：网站建设 网站制作 网站设计 购物商城 网站样板 定做网站 来源: 浏览: 4072 人次

<!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>

[ 关闭 ]