javascript - ScrollTop 具有多个 anchor 的偏移粘性栏

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>