文档章节

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

樂天
 樂天
发布于 2015/11/20 15:18
字数 429
阅读 107
收藏 0

这个在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>

效果如下:

输入图片说明

firebug控制台输出如下:

输入图片说明

jquery stop函数:http://www.w3school.com.cn/jquery/jquery_stop.asp

jquery outerHeight()函数:http://www.w3schools.com/jquery/html_outerheight.asp

jquery scrollTop()函数:http://www.w3school.com.cn/jquery/css_scrolltop.asp

jquery animate()函数:http://www.w3school.com.cn/jquery/jquery_animate.asp

jquery animate+scrollTop:http://stackoverflow.com/questions/4034659/is-it-possible-to-animate-scrolltop-with-jquery

jquery offset函数:http://www.w3school.com.cn/jquery/css_offset.asp

© 著作权归作者所有

樂天
粉丝 138
博文 680
码字总数 153018
作品 3
深圳
程序员
私信 提问
解决浏览器返回页面不刷新的问题

现象 由于 IOS 系统的页面缓存机制,经常会遇到在移动端返回到上一个页面不刷新的情况。 比如今天在开发微信 H5 页面的时候,在IOS微信内置浏览器中返回上一页时,上一个页面不会被刷新。 而...

Sakura同志
04/15
0
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
63
0
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
2018/06/26
0
0
构建一个简单的 Google Dialogflow 聊天机器人【下】

使用实体提取数据 此页面描述了如何从用户的查询中提取参数值(实体数据)。 添加参数到您的意图 参数是用户查询中提取的重要且相关的单词或短语,因此您的聊天机器人可以提供适当的响应。 ...

磐创AI_聊天机器人
07/02
0
0
Google Chrome调试js代码

你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容。嗯~,用这两种土办法确实解决了很多...

君子之耀
2013/11/18
477
2

没有更多内容

加载失败,请刷新页面

加载更多

Kylin构建Cube过程详解

1 前言 在使用Kylin的时候,最重要的一步就是创建cube的模型定义,即指定度量和维度以及一些附加信息,然后对cube进行build,当然我们也可以根据原始表中的某一个string字段(这个字段的格式...

大数据技术进阶
6分钟前
3
0
Git保存密码

保存密码 $ git config --global credential.helper store 参数 --global 设置全局,如果用 --local 则只设置当前库 要注意保存时是用明文保存的,所以不要在公用电脑使用...

编程老陆
8分钟前
3
0
ofcms 说明文档

一、模板说明 项目概述 java 版CMS系统、基于java技术研发的内容管理系统、功能:栏目模板自定义、内容模型自定义、多个站点管理、在线模板页面编辑等功能、代码完全开源、MIT授权协议。 技术...

kuchawyz
14分钟前
3
0
理解CSS相对定位和固定定位

本文转载于:专业的前端网站➦理解CSS相对定位和固定定位 前面的话   一般地,说起定位元素是指position不为static的元素,包括relative、absolute和fixed。前面已经详细介绍过absolute绝对...

前端老手
25分钟前
3
0
iOS Xcode升级包地址(感谢大神)

下载地址:DeviceSupport

_____1____
39分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部