Graent.Hu 的博客

新浪微薄腾讯微薄

最新碎语:最近感觉有些迷茫,怎么办~

您的位置:Graent.Hu 的博客 >其他> 滚动条滚动到一定位置元素固定到指定位置

滚动条滚动到一定位置元素固定到指定位置

<!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").css('position','fixed'); 
                        } catch (e) { 
                            $("#scrollSearchDiv").css('position',''); 
                        }                       
                    } 
                } 
                else { 
                    if ($("#scrollSearchDiv").is(":visible")) { 
                        try { 
                            $("#scrollSearchDiv").slideUp(); 
                        } catch (e) { 
                            $("#scrollSearchDiv").hide(); 
                        }                        
                    } 
                }  
            }); 
        }) 
</script>
</body>
</html>

我的微信:graent_hu

欢迎扫码加我和微信好友,有什么问题我们可以一起探讨,有什么需要也随时欢迎发消息给我~

转载请注明出处:

本文标题:滚动条滚动到一定位置元素固定到指定位置

本文链接:https://www.wlyc.cn/post-134.html

发表评论

路人甲 表情
看不清楚?点图切换