首页 新闻 会员 周边 捐助

滚动到特定位置锁定

0
悬赏园豆：30 [待解决问题]

在腾讯微博中，看到下面这个Bar

发现往下滚动浏览器滚动条，这个Bar在接触到页面横幅位置时就冻结了。

请问这个效果是如何实现的？谢谢！

 

PS:

(1)Bar还未接触横幅

（2）Bar接触到横幅，就冻结在顶部了。

吕津的主页 吕津 | 初学一级 | 园豆：31
提问于：2013-09-05 20:18
< >
分享
所有回答(3)
1

主要是监听滚动条的事件，当滚动的距离大于指定值时，将导航栏定住（position:fixed）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    
    <title></title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <style type="text/css">
        html, body {
            margin:0;
            padding:0;
        }
        .wrapper{
            margin:0 auto;
            width:960px;            
            height:2000px;            
            position:relative;
        }
        .nav
        {
            top:200px;
            padding:0 10px;
            width:940px;            
            background:#F9F9F9;
            border:solid 1px #D0D0D0;
            height:36px;
            display:block;
            font-size:12px;
            line-height:36px;   
            position:absolute;                    
        }     
        /*固定时的样式*/   
        .pin {            
            top:0;
            position: fixed;
            box-shadow: 0 1px 2px #ddd;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="nav">这是导航栏</div>
    </div>
    <script type="text/javascript">
        $(function () {
            $(window).scroll(function () {
                //如果滚动条滚动距离大于200px，则固定住导航栏
                if ($(window).scrollTop() > 200) {
                    $(".nav").addClass("pin");
                }
                else {
                    $(".nav").removeClass("pin");
                }
            });
        });
    </script>
</body>
</html>
libaoheng | 园豆：1433 (小虾三级) | 2013-09-05 22:45
0

楼上正解~

幻天芒 | 园豆：37207 (高人七级) | 2013-09-05 23:16
0

楼上的楼上正解

度一 | 园豆：226 (菜鸟二级) | 2014-01-26 16:00
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。