当前位置: 首页 > 面试题库 >

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

钦枫
2023-03-14
问题内容

向下滚动页面时,活动菜单项将更改。怎么做?


问题答案:

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

快速示例:

// Cache selectors
var 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");
});​


 类似资料:
  • 问题内容: 我正在尝试更改用户在我的网站上选择的活动或当前页面导航链接的颜色。我究竟做错了什么?谢谢。 到目前为止,CSS如下所示: 我的HTML使用include PHP函数调用导航菜单的页面模板: 问题答案: 我认为您对CSS选择器的功能感到困惑。这仅会在您单击链接时更改链接的颜色(并且仅在单击期间,即鼠标按钮保持按下的时间)。您需要做的是在CSS中引入一个新类,例如,当您选择一个链接时,使用

  • 我想将我的导航从透明背景更改为白色背景。导航应该缩小,徽标应该消失。 它应该与此页面上的完全相同:https://www.praxis-loeber.de 我已经为它编写了jQuery代码,但不幸的是,它仍然不起作用。 如果有人能告诉我错误在我的代码中,我会非常高兴。 这是我的代码:

  • 模仿Foodspotting的滚动菜单,可以实现滚动选择,可以放置多个菜单项目。 [Code4App.com]

  • 我用html、css和JavaScript创建了一个响应式导航栏。当页面宽度小于768px时,将显示条形图标,单击该图标时,将显示导航菜单。问题是当导航菜单出现时,页面仍在后台滚动。导航菜单下的滚动应该停止。 null null

  • 如何在默认情况下设置无背景色的导航栏并在滚动时获得背景色? 当向下滚动带有类的div时,应该会获得新的bg颜色。 对于顶部的固定位置,我使用来自Bootstrap3的。 我几乎尝试了我遇到的每一个教程,但我没有成功。 我甚至尝试从WordPress词缀插件,但没有运气。 这是我的密码

  • 我正在创建一个wordpress模板,目前我正在制作菜单,我已经制作了以下内容: http://jsfidle.net/skunheal/umkyr/ 有两个小问题,我不知道如何解决。Wordpress为当前活动的菜单项提供class.current_page_item。我该怎么做呢? 我想的是: 普通菜单项: 活动菜单项: 但似乎不起作用。有人知道为什么吗? 谢谢你,梅里恩