Question

在我的网站上，我设置了一个＆＃34;点击滚动＆＃34;菜单的逻辑：

1. when menu link is clicked, scroll to corresponding anchor and add active class to $(this)

2. onscroll, toggle active class according to the current anchor's location

这一切都很好，但有一个小错误，当你点击链接时，页面会略微闪烁，活动菜单链接也会闪烁。您可以在http://jcwd98.appspot.com/上查看并测试它（警告它处于早期开发阶段，没有移动设备，现在可能看起来很糟糕。）

我不确定导致页面闪烁的原因，但我知道菜单链接闪烁的原因是因为我的代码告诉它在滚动相应部分时向其添加活动类。由于文档必须首先滚动一个部分才能到达所需的部分，因此它会在到达之前将活动类添加到其他链接。

我不想要其中任何一种情况。

jsFiddle

代码：

＆＃13;

var section_padding = 45;

$("#menu ul li a").on("click", function(event) {
	event.preventDefault;

	$("#menu ul li a.active").removeClass("active");
	$(this).addClass("active");

	var target = this.hash;
	var menu = target;
	var cache_target = $(target);
	var buffer = (cache_target.offset().top - section_padding);

	$("html, body").stop().animate({
		"scrollTop": buffer
	}, 400, "swing");

});

function scroll(event) {
	var scroll_pos = $(document).scrollTop();
	$("#menu ul li a").each(function() {
		var cur_link = $(this);
		var ref_el = $(cur_link.attr("href"));

		if( ref_el.position().top <= scroll_pos && ref_el.position().top + ref_el.height() + (section_padding * 2) > scroll_pos ) {
			$("#menu ul li a").removeClass("active");
			cur_link.addClass("active");
		} else {
			cur_link.removeClass("active");
		}

	});
}

$(document).on("scroll", scroll);

＆＃13;

* {
    margin: 0;
    padding: 0;
}

#menu {
    display: block;
    height: 50px;
    width: 100%;
    position: fixed;
    z-index: 100;
    background: rgba(255, 255, 255, .8);
}

#menu ul {
    display: block;
    width: 100%;
    height: 100%;
    list-style: none;
}

#menu ul li {
    display: block;
    box-sizing: border-box;
    height: 100%;
    width: calc(100% / 5);
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    float: left;
    text-align: center;
    line-height: 50px;
}

#menu ul li a {
    display: block;
    text-decoration: none;
    font-family: arial;
}

#menu ul li a:hover,
#menu ul li a.active {
    background: #f0f0f0;
}

#sections {
    display: block;
    position: relative;
    top: 50px;
}

section {
    display: block;
    height: 500px;
    width: 100%;
    background: #67D182;
    padding: 45px 50px;
    box-sizing: border-box;
}

#sections section:nth-child(even) {
    background: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav id="menu">
  <ul>
    <li><a href="#top">Top</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#blog">Blog</a></li>
  </ul>
</nav>

<div id="sections">
    <section id="top">
      <h2>#top</h2>  
    </section>
    
    <section id="about">
      <h2>#about</h2>  
    </section>
    
    <section id="portfolio">
      <h2>#portfolio</h2>  
    </section>
    
    <section id="contact">
      <h2>#contact</h2>  
    </section>
    
    <section id="blog">
      <h2>#blog</h2>  
    </section>
</div>

＆＃13;

非常感谢任何帮助。：）

Answer 1

这是因为preventDefault是一个函数，那么你只需要改变：

event.preventDefault;

要：

event.preventDefault();

这很好用。 FIDDLE：https://jsfiddle.net/lmgonzalves/ve5qr3bL/2/

修改

您需要unbind滚动事件，然后在完成动画时再次bind。

$("#menu ul li a").on("click", function(event) { event.preventDefault(); $(document).off("scroll"); // here unbind // code $("html, body").stop().animate({ "scrollTop": buffer }, 400, "swing", function() { $(document).on("scroll", scroll); // here bind again }); });

FIDDLE：https://jsfiddle.net/lmgonzalves/ve5qr3bL/3/

jQuery中点击滚动菜单的小错误

1 个答案: