javascript - 更改固定页面导航的事件状态

Question

我有一个固定的页面导航，我无法在滚动时做出响应。下面是我的代码的示例。如您所见，我正在尝试让我的页面导航 (.service-nav) 响应到达相应的文章 ID。任何帮助将不胜感激。

这是一个片段:

$('.service-con').scroll(function() {
  $('article').each(function() {
    if ($(this).offset().top < 60) {
      $('.service-nav li').removeClass('active');
      $('.service-nav li.' + $(this).attr('id')).addClass('active');
    }
  });
});

a {
  text-decoration: none;
}
.service-nav {
  background-color: #333;
  color: #fff;
  padding: 15px 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%
}
.service-nav li {
  float: left;
  list-style: none;
  margin: 0 5px;
}
.service-nav li a {
  border-bottom: 3px solid transparent;
  color: #fff;
  padding-bottom: 3px;
}
.service-nav li.active a {
  border-color: #ccc;
}
.container {
  padding: 60px 20px 20px;

<div id="parallax-page" class="service-con content-panel">
  <div class="service-nav" data-spy="affix" data-offset-bottom="380" data-offset-top="380">
    <ul>
      <li class="article1 active">
        <a href="#article1">
          <span class="tooltip">Article 1</span>
        </a>
      </li>
      <li class="article2">
        <a href="#article2">
          <span class="tooltip">Article 2</span>
        </a>
      </li>
    </ul>
  </div>

  <div class="container">
    <article id="article1">
      <h2>An Article</h2>
      <p>Nam faucibus tristique efficitur. Maecenas vitae justo at ante pulvinar rhoncus. Suspendisse tincidunt, justo eget ornare rutrum, tellus turpis pharetra dui, a lobortis ligula felis tempus nulla. Duis justo orci, convallis quis sem a, dapibus congue
        erat. Morbi ut tortor nisl. Duis porttitor euismod purus at sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit ex ut tristique placerat. Proin congue fringilla leo, sit amet placerat est iaculis quis. Aliquam eu augue sed mi hendrerit dignissim. Sed nibh arcu, rutrum vel tempus vel,
        commodo a dolor. Fusce sed commodo nulla, et aliquet sem. Morbi posuere tincidunt dictum. Cras et commodo lectus, porta ornare enim.</p>
      <p>Curabitur vitae elementum mi, eu tempus neque. Quisque vulputate, lorem at mattis finibus, ante leo lacinia ex, vel tincidunt mi metus vitae enim. Mauris aliquam suscipit ipsum, tincidunt accumsan est eleifend a. Nunc ac libero nec nulla luctus
        pretium. Integer varius magna magna, in feugiat massa feugiat vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vitae euismod mi. Suspendisse efficitur nisi augue, efficitur tempor nunc malesuada in. Fusce a nulla
        ut magna viverra porttitor. Morbi et enim quam. Quisque ornare, enim quis malesuada laoreet, sapien tellus aliquet metus, sed gravida ex lacus at leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla
        non leo at tortor hendrerit laoreet.</p>
    </article>

    <article id="article2">
      <h2>Another Article</h2>
      <p>Fusce rhoncus hendrerit lectus, nec aliquam lorem feugiat ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lacinia condimentum lacus quis tempor. In eget sem turpis. Maecenas nec accumsan leo.
        Cras tincidunt orci sed ligula suscipit egestas. Phasellus et semper quam. Sed metus erat, consectetur at ex et, auctor iaculis nibh. Sed hendrerit dolor in nunc tincidunt, quis vulputate diam pharetra. Aliquam ac ligula diam. Nulla aliquam, mi
        ut tristique ultricies, lacus leo dictum erat, nec fringilla metus augue quis lacus. Vestibulum semper euismod placerat. Nulla mattis lacus eget lacinia aliquet. Praesent massa ipsum, auctor eget nisl quis, accumsan eleifend elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit ex ut tristique placerat. Proin congue fringilla leo, sit amet placerat est iaculis quis. Aliquam eu augue sed mi hendrerit dignissim. Sed nibh arcu, rutrum vel tempus vel,
        commodo a dolor. Fusce sed commodo nulla, et aliquet sem. Morbi posuere tincidunt dictum. Cras et commodo lectus, porta ornare enim.</p>
      <p>Curabitur vitae elementum mi, eu tempus neque. Quisque vulputate, lorem at mattis finibus, ante leo lacinia ex, vel tincidunt mi metus vitae enim. Mauris aliquam suscipit ipsum, tincidunt accumsan est eleifend a. Nunc ac libero nec nulla luctus
        pretium. Integer varius magna magna, in feugiat massa feugiat vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vitae euismod mi. Suspendisse efficitur nisi augue, efficitur tempor nunc malesuada in. Fusce a nulla
        ut magna viverra porttitor. Morbi et enim quam. Quisque ornare, enim quis malesuada laoreet, sapien tellus aliquet metus, sed gravida ex lacus at leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla
        non leo at tortor hendrerit laoreet.</p>
    </article>
  </div>
</div>

Answer 1

你可以尝试这样的事情:

$(window).scroll(function(){
	$('article').each(function(){
		if($(window).scrollTop() > $(this).offset().top-$(this).find('h2').height()-$('.service-nav').height()){
			$('.service-nav li').removeClass('active');
			$('.service-nav li.' + $(this).attr('id')).addClass('active');
		}
	});
});

a {
  text-decoration: none;
}
.service-nav {
  background-color: #333;
  color: #fff;
  padding: 15px 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%
}
.service-nav li {
  float: left;
  list-style: none;
  margin: 0 5px;
}
.service-nav li a {
  border-bottom: 3px solid transparent;
  color: #fff;
  padding-bottom: 3px;
}
  .service-nav li.active a {
    border-color: #ccc;
  }

.container {
  padding: 60px 20px 20px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parallax-page" class="service-con content-panel">
	<div class="service-nav" data-spy="affix" data-offset-bottom="380" data-offset-top="380">
		<ul>
			<li class="article1 active">
				<a href="#article1">
					<span class="tooltip">Article 1</span>
				</a>
			</li>
			<li class="article2">
				<a href="#article2">
					<span class="tooltip">Article 2</span>
				</a>
			</li>
		</ul>
	</div>

	<div class="container">
		<article id="article1">
			<h2>An Article</h2>
			<p>Nam faucibus tristique efficitur. Maecenas vitae justo at ante pulvinar rhoncus. Suspendisse tincidunt, justo eget ornare rutrum, tellus turpis pharetra dui, a lobortis ligula felis tempus nulla. Duis justo orci, convallis quis sem a, dapibus congue erat. Morbi ut tortor nisl. Duis porttitor euismod purus at sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit ex ut tristique placerat. Proin congue fringilla leo, sit amet placerat est iaculis quis. Aliquam eu augue sed mi hendrerit dignissim. Sed nibh arcu, rutrum vel tempus vel, commodo a dolor. Fusce sed commodo nulla, et aliquet sem. Morbi posuere tincidunt dictum. Cras et commodo lectus, porta ornare enim.</p>
            <p>Curabitur vitae elementum mi, eu tempus neque. Quisque vulputate, lorem at mattis finibus, ante leo lacinia ex, vel tincidunt mi metus vitae enim. Mauris aliquam suscipit ipsum, tincidunt accumsan est eleifend a. Nunc ac libero nec nulla luctus pretium. Integer varius magna magna, in feugiat massa feugiat vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vitae euismod mi. Suspendisse efficitur nisi augue, efficitur tempor nunc malesuada in. Fusce a nulla ut magna viverra porttitor. Morbi et enim quam. Quisque ornare, enim quis malesuada laoreet, sapien tellus aliquet metus, sed gravida ex lacus at leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla non leo at tortor hendrerit laoreet.</p>
		</article>

		<article id="article2">
			<h2>Another Article</h2>
			<p>Fusce rhoncus hendrerit lectus, nec aliquam lorem feugiat ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lacinia condimentum lacus quis tempor. In eget sem turpis. Maecenas nec accumsan leo. Cras tincidunt orci sed ligula suscipit egestas. Phasellus et semper quam. Sed metus erat, consectetur at ex et, auctor iaculis nibh. Sed hendrerit dolor in nunc tincidunt, quis vulputate diam pharetra. Aliquam ac ligula diam. Nulla aliquam, mi ut tristique ultricies, lacus leo dictum erat, nec fringilla metus augue quis lacus. Vestibulum semper euismod placerat. Nulla mattis lacus eget lacinia aliquet. Praesent massa ipsum, auctor eget nisl quis, accumsan eleifend elit.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent hendrerit ex ut tristique placerat. Proin congue fringilla leo, sit amet placerat est iaculis quis. Aliquam eu augue sed mi hendrerit dignissim. Sed nibh arcu, rutrum vel tempus vel, commodo a dolor. Fusce sed commodo nulla, et aliquet sem. Morbi posuere tincidunt dictum. Cras et commodo lectus, porta ornare enim.</p>
            <p>Curabitur vitae elementum mi, eu tempus neque. Quisque vulputate, lorem at mattis finibus, ante leo lacinia ex, vel tincidunt mi metus vitae enim. Mauris aliquam suscipit ipsum, tincidunt accumsan est eleifend a. Nunc ac libero nec nulla luctus pretium. Integer varius magna magna, in feugiat massa feugiat vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse vitae euismod mi. Suspendisse efficitur nisi augue, efficitur tempor nunc malesuada in. Fusce a nulla ut magna viverra porttitor. Morbi et enim quam. Quisque ornare, enim quis malesuada laoreet, sapien tellus aliquet metus, sed gravida ex lacus at leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla non leo at tortor hendrerit laoreet.</p>
		</article>
	</div>
</div>