js：滚动页面时自动激活对应菜单中的条目

最新推荐文章于 2024-06-28 09:45:00 发布

weixin_34360651

最新推荐文章于 2024-06-28 09:45:00 发布

阅读量436

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/letiantian/blog/533293

本文介绍了一个使用HTML、CSS和jQuery实现的固定顶部导航菜单，在页面滚动时能够自动更新当前选中项的效果。通过jQuery监听滚动事件，并根据滚动位置激活相应的菜单项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

这个在Change Active Menu Item on Page Scroll?有详细的讨论。对应的代码在http://jsfiddle.net/mekwall/up4nu/。

下面是代码，我做了些小的改动。

<html>
<head>
    <style>
        #top-menu {
            position: fixed;
            z-index: 1;
            background: white;
            left: 0;
            right: 0;
            top: 0;
        }

        #top-menu li {
            float: left;
            list-style: none;
        }

        #top-menu a {
            display: block;
            padding: 5px 25px 7px 25px;
            width: 4em;
            text-align: center;
            -webkit-transition: .5s all ease-out;
            -moz-transition: .5s all ease-out;
            transition: .5s all ease-out;
            border-top: 3px solid white;
            color: #aaa;
            text-decoration: none;
        }

        #top-menu a:hover {
            color: #000;
        }

        #top-menu li.active a {
            border-top: 3px solid #333;
            color: red;
        }

        #foo {
            position: absolute;
            top: 400px;
        }

        #bar {
            position: absolute;
            top: 800px;
        }

        #baz {
            position: absolute;
            top: 1200px;
        }
    </style>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>

    <ul id="top-menu">
      <li class="active">
        <a href="#">Top</a>
      </li>
      <li>
        <a href="#foo">Foo</a>
      </li>
      <li>
        <a href="#bar">Bar</a>
      </li>
      <li>
        <a href="#baz">Baz</a>
      </li>
    </ul>

    <a id="foo">Foo</a>
    <a id="bar">Bar</a>
    <a id="baz">Baz</a>

    <script type="text/javascript">
        // Cache selectors
        var lastId,
            topMenu = $("#top-menu"),
            topMenuHeight = topMenu.outerHeight()+15,
            // All list items
            menuItems = topMenu.find("a"),
            // Anchors corresponding to menu items
            scrollItems = menuItems.map(function(){ // 即<a id="foo">Foo</a>，等
              var item = $($(this).attr("href"));
              console.log($(this).attr("href"));    // debug
              console.log(item);                    // debug
              console.log(item.length);             // debug
              if (item.length) { return item; }
            });

        // Bind click handler to menu items
        // so we can get a fancy scroll animation
        menuItems.click(function(e){
          var href = $(this).attr("href"),
              offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
          $('html, body').stop().animate({ 
              scrollTop: offsetTop
          }, 300);
          e.preventDefault();
        });

        // Bind to scroll
        $(window).scroll(function(){
           // Get container scroll position
           var fromTop = $(this).scrollTop()+topMenuHeight;
           
           // Get id of current scroll item
           var cur = scrollItems.map(function(){
             if ($(this).offset().top < fromTop)
               return this;
           });
           // Get the id of the current element
           cur = cur[cur.length-1];
           var id = cur && cur.length ? cur[0].id : "";
           
           if (lastId !== id) {
               lastId = id;
               // Set/remove active class
               menuItems
                 .parent().removeClass("active")
                 .end().filter("[href=#"+id+"]").parent().addClass("active");
           }                   
        });
    </script>


</body>
</html>

效果如下：

输入图片说明