Question

我正在使用单页网站，并且在达到相应内容时突出显示导航项目时遇到问题。现在，我将简化我的代码。

HTML：

<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#blog">Blog</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

<div id="home">Lorem ipsum</div>
<div id="about">Lorem ipsum</div>
<div id="blog">Lorem ipsum</div>
<div id="contact">Lorem ipsum</div>

脚本：

$(document).ready(function() {
    // function that scrolls automatically to the content of a certain menu item. Just 
    // like scroll-to.js

    // .scroll event that automatically sets the "current" class to the list item when
    // when it reached its corresponding div.
});

当我只是向上和向下滚动页面时，这非常有效。问题是当我单击列表项时。例如，当前突出显示的项目是“Home”，然后我想通过单击它来“联系”。由于突出显示是在.scroll事件中操作的，“Home”和“Contact”之间的两个按钮也会突出显示，因为我的点击将从“Home”传递到“Contact”。

有什么方法可以忽略它们之间的项目吗？感谢。

Answer 1

当您从单击事件触发滚动事件时，使用具有不同命名空间的处理程序

$('li').on('click', function(){
  $(window).trigger('scroll.autoscroll');
});

$(window).on('scroll.autoscroll', function(){
  //whatever you want to happen on a scroll event triggered by a click event
});

或者您可以使用.trigger方法将数据传递给事件处理程序，如： $(window).trigger('scroll', pass_some_data); 然后让你的事件处理程序根据传递的数据决定做什么。

希望有所帮助。我不能再具体了，因为你基本上只发布了一个带有注释行的空函数。

忽略另一个事件使用的事件

1 个答案: