栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

更改页面滚动上的活动菜单项?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

更改页面滚动上的活动菜单项?

通过绑定到容器的滚动事件(通常是窗口)来完成。

快速示例:

// Cache selectorsvar topMenu = $("#top-menu"),    topMenuHeight = topMenu.outerHeight()+15,    // All list items    menuItems = topMenu.find("a"),    // Anchors corresponding to menu items    scrollItems = menuItems.map(function(){      var item = $($(this).attr("href"));      if (item.length) { return item; }    });// 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 : "";   // Set/remove active class   menuItems     .parent().removeClass("active")     .end().filter("[href='#"+id+"']").parent().addClass("active");});​


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/670532.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号