javascript - ScrollTop 偏移多个 anchor 的 Sticky Bar

Question

我正在尝试构建一个粘性栏，在您通过英雄后固定在顶部，然后在您通过页面上的每个部分后，粘性栏中的 anchor 添加/删除一个类以显示事件状态他们在页面上的位置。

基本上，当您向下滚动页面时，粘性栏应该根据它们在页面上经过的部分在粘性导航中向左或向右移动/动画。

如果我删除模块的其他 JS，我会将固定在顶部的粘性条正常工作，但是一旦我尝试让所有东西一起工作，我似乎无法弄清楚。我对这个级别的 javascript 不是很熟悉，所以任何帮助都会很棒!

这是我的 jsfiddle:jsfiddle here

// hero
var p = $( ".hero" );
var offset = p.offset();
offset = offset.top;

$(window).scroll(function () {  
    if ($(window).scrollTop()   >  offset ) {
 $('.sticky-nav').addClass('fixed');
  $('li a.nav-1').addClass('active');
    }
  else { $('.sticky-nav').removeClass('fixed'); }
    $('li a.nav-1').removeClass('active');
});

// module 1
var p = $( ".module-1" );
var offset = p.offset();
offset = offset.top;

$(window).scroll(function () {  
    if ($(window).scrollTop()   >  offset ) {
 $('li a.nav-2').addClass('active');
    }
  else { $('li a.nav-2').removeClass('active'); }
});

// module 2
var p = $( ".module-2" );
var offset = p.offset();
offset = offset.top;

$(window).scroll(function () {  
    if ($(window).scrollTop()   >  offset ) {
 $('li a.nav-3').addClass('active');
    }
  else { $('li a.nav-3').removeClass('active'); }
});
// module 2
var p = $( ".module-3" );
var offset = p.offset();
offset = offset.top;

$(window).scroll(function () {  
    if ($(window).scrollTop()   >  offset ) {
 $('li a.nav-4').addClass('active');
    }
  else { $('li a.nav-4').removeClass('active'); }
});

.wrapper {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.hero {
  height: 200px;
  width: 1440px;
}
.sticky-nav {
  height: 70px;
  background: #ccc;
  width: 100%;
}
.module-1 {
  height: 500px;
  width: 100%
}
.module-2 {
  height: 200px;
  width: 100%;
}
.module-3 {
  height: 400px;
  width: 100%;
}
.fixed {
  position: fixed;
  top: 0;
}
ul {
  display: flex;
  list-style-type: none;
}
li {
  width: 20%;
}
li a {
  color: #fff;
}
.active {
  border-bottom: 3px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="hero">I'm the hero</div>
<div class="sticky-nav">
  <ul>
    <li><a href="#module-1" class="nav-1">nav a</a></li>
    <li><a href="#module-2" class="nav-2">nav b</a></li>
    <li><a href="#module-3" class="nav-3">nav c</a></li>
    <li><a href="#module-4" class="nav-4">nav d</a></li>
  </ul>
</div>
<a name="module-1"><section class="module-1">section 1</section></a>
<a name="module-2"><section class="module-2">section 2</section></a>
<a name="module-3"><section class="module-3">section 3</section></a>
<a name="module-4"><section class="module-4">section 4</section></a>
</div>

再次感谢

Answer 1

你的脚本有太多的 $(window).scroll(function () 。你可以像下面的代码片段一样以更简单的方式尝试它。

	$(document).ready(function () {
		$(document).on("scroll", onScroll);
 
		$('a[href^="#"]').on('click', function (e) {
			e.preventDefault();
			$(document).off("scroll");
 
			$('a').each(function () {
				$(this).removeClass('active');
			})
			$(this).addClass('active');
 
			var target = this.hash;
			$target = $(target);
			$('html, body').stop().animate({
				'scrollTop': $target.offset().top+2
			}, 500, 'swing', function () {
				window.location.hash = target;
				$(document).on("scroll", onScroll);
			});
		});
	});
 
	function onScroll(event){
		var scrollPosition = $(document).scrollTop();
		var hero=$('.hero').innerHeight();
		(scrollPosition > hero)?$('header').addClass('sticky'):$('header').removeClass('sticky');
		$('nav a').each(function () {
			var currentLink = $(this);
			var refElement = $(currentLink.attr("href"));
			if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
				$('nav ul li a').removeClass("active");
				currentLink.addClass("active");
			}
			else{
				currentLink.removeClass("active");
			}
		 });
	};

html, body { margin: 0; padding: 0; width: 100%; height: 100%;}
header.sticky {
	position: fixed;
	top: 0;
	width: 100%;
	height: 80px;
	background: #fff;
}
nav {
	width: 960px;
	height: 80px;
	margin: 0 auto;
}
nav ul {
	margin: 20px 0 0;
}
nav ul li {
	display: inline-block;
	margin: 0 30px 0 0;
}

a { color: #4D4D4D;  font-family: sans-serif; text-transform: uppercase; text-decoration: none; line-height: 42px; }
.active { color: #2dbccb; }

.content { width: 100%; height: 100%; }
.content > section { width: 100%; height: 100%; }

#home { background: #2dbccb; }
#about { background: #f6c362; }
#services { background-color: #eb7e7f; }
#contact { background-color: #415c71; }
.hero {
	padding: 150px 0;
	text-align: center;
	font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hero">
	hero
</div>
<header>
    <nav>
        <ul>
            <li><a class="active" href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>
<div class="content">
    <section id="home"></section>
    <section id="about"></section>
    <section id="services"></section>
    <section id="contact"></section>
</div>