导航栏吸顶实现原理 JS

吸顶灯是各站点常用的一个功能,它有两个特性引用块内容

  1. 向下滚动到div位置时,该div一直固定在页面的顶部
  2. 向上滚动到div原有位置时,div又恢复到文档中的原位置

div可能是一个“分类菜单”,也可能是一个“文章导航”。如

这里写图片描述

这里写图片描述

实现思路如下

  1. div初始居普通文档流中
  2. 给window添加scroll事件(可事件节流),获取div的offset的top值(div容器距离网页最顶端的距离值),滚动时scrollTop值和top比较,当到达top时给div添加一个fixed的class使其固定
  3. 向上滚动时当到达div初始top时则删除fixed的class,此时div又回到普通文档流中
  4. fixed样式非IE6浏览器使用position:fixed,IE6使用position:absolute和IE expression
<!DOCTYPE html>
<html>
<head>
    <title>无限翻页测试+导航栏吸顶测试</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- 可选的Bootstrap主题文件(一般不用引入) -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <style type="text/css">
        #spinner{
            position: fixed;
            top: 20px;
            left: 40%;
            display: block;
            color: red;
            font-weight: 900;
            background-color: rgba(80, 80, 90, 0.22);
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 100px;
            padding-right: 100px;
            border-radius: 15px;
        }
        .topmenu{
            border:1px solid black;
            position:absolute;
            top:100px;
            left: 100px;
            width:100px;
            height: 100px;
        }
        .fixed {
            position: fixed;
            top: 0;
            left: 100px;
            z-index: 100;
        }
    </style>
</head>
<body>
<div style="position: relative">
    <div class="topmenu" style=""></div>
</div>

<div id="sample">
</div>
<div id="spinner">
    正在加载
</div>
<script type="text/javascript">
    var index = 0;
    function lowEnough(){
        var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
        var viewportHeight = window.innerHeight ||
                document.documentElement.clientHeight ||
                document.body.clientHeight || 0;
        var scrollHeight = window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop || 0;
        // console.log(pageHeight);
        // console.log(viewportHeight);
        // console.log(scrollHeight);
        return pageHeight - viewportHeight - scrollHeight < 20;
    }

    function doSomething(){
        var htmlStr = "";
        for(var i=0;i<10;i++){
            htmlStr += "这是第"+index+"次加载<br>";
        }
        $('#sample').append(htmlStr);
        index++;
        pollScroll();//继续循环
        $('#spinner').hide();
    }

    function checkScroll(){
        if(!lowEnough()) return pollScroll();

        $('#spinner').show();
        setTimeout(doSomething,900);

    }
    function pollScroll(){
        setTimeout(checkScroll,1000);
    }

    function reset_topmenu_top(topmenu, topmenu_top) {
        var document_scroll_top = jQuery(document).scrollTop();
        if (document_scroll_top > topmenu_top) {
            topmenu.addClass("fixed");
        }
        if (document_scroll_top <= topmenu_top) {

            topmenu.removeClass("fixed");
        }
    }
    jQuery(document).ready(function() {
        var topmenu = jQuery(".topmenu");
        var topmenu_top = topmenu.offset().top;
        reset_topmenu_top(topmenu, topmenu_top);
        jQuery(window).scroll(function() {
            reset_topmenu_top(topmenu, topmenu_top);
        });
        checkScroll();
    });

</script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值