admin管理员组

文章数量:1277895

I'm trying to get the my links to highlight if the user is scrolling over the page that is for that link. But for some reason it isn't working properly. I Have mented out my first try in jquery and tried again but link two is highlighting when link one should.

<nav>
  <ul>
    <li><a href="" id="link_1">Link 1</a></li>
    <li><a href="" id="link_2">Link 2</a></li>
    <li><a href="" id="link_3">Link 3</a></li>
  </ul>
   <p></p>
</nav>

<div id="sec_one" class="sections">

</div>

<div id="sec_two" class="sections">

</div>

<div id="sec_three" class="sections">

</div>

<script
  src=".2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

*{
  margin: 0;
  padding: 0;
}
nav{
  width: 100%;
  background-color: black;
  position: fixed;
  top: 0;
}

nav ul{
  width: 50%;
  margin: 0 auto;
  list-style-type: none;
  text-align: center;
}

nav ul li{
  display: inline;
  width: 100%;
}

nav ul li a{
  font-size: 40px;
  color: white;
  text-decoration: none;
}

nav ul li a{

}

.sections{
  width: 100%;
  height: 2000px;
}

#sec_one{
  background-color: blue;
}

#sec_two{
  background-color: red;
}

#sec_three{
  background-color: yellow;
}

.active{
  background-color: #666666;
}

p{
  color: white;
}

$(window).scroll(function(){
  var scrollPos = $(window).scrollTop();
  var page1Top = $("#sec_one").scrollTop();
  var page1Bot = $("#sec_one").outerHeight();

  var page2Top = $("#sec_two").scrollTop();
  var page2Bot = $("#sec_two").outerHeight();

  var page3Top = $("#sec_three").scrollTop();
  var page3Bot = $("#sec_three").outerHeight();

 /*if(scrollPos >= page1Top && scrollPos < page1Bot){
    $("#link_1").addClass("active");
    $("#link_2").removeClass("active");
    $("#link_3").removeClass("active");
  }else if(scrollPos >= page2Top && scrollPos < page2Bot){
    $("#link_1").removeClass("active");
    $("#link_3").removeClass("active");
    $("#link_2").addClass("active");
  }else if(scrollPos >= page3Top && scrollPos < page3Bot){
    $("#link_3").addClass("active");
    $("#link_1").removeClass("active");
    $("#link_2").removeClass("active");
  }*/

  if(scrollPos >= page1Top && scrollPos < page1Bot){
    $("#link_1").addClass("active");
    $("#link_2").removeClass("active");
    $("#link_3").removeClass("active");
    }else {
      $("#link_1").removeClass("active");
    }

  if(scrollPos >= page2Top && scrollPos < page2Bot){
    $("#link_2").addClass("active");
    $("#link_1").removeClass("active");
    $("#link_3").removeClass("active");
    }else {
      $("#link_2").removeClass("active");
    }

});

I'm trying to get the my links to highlight if the user is scrolling over the page that is for that link. But for some reason it isn't working properly. I Have mented out my first try in jquery and tried again but link two is highlighting when link one should.

<nav>
  <ul>
    <li><a href="" id="link_1">Link 1</a></li>
    <li><a href="" id="link_2">Link 2</a></li>
    <li><a href="" id="link_3">Link 3</a></li>
  </ul>
   <p></p>
</nav>

<div id="sec_one" class="sections">

</div>

<div id="sec_two" class="sections">

</div>

<div id="sec_three" class="sections">

</div>

<script
  src="https://code.jquery./jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

*{
  margin: 0;
  padding: 0;
}
nav{
  width: 100%;
  background-color: black;
  position: fixed;
  top: 0;
}

nav ul{
  width: 50%;
  margin: 0 auto;
  list-style-type: none;
  text-align: center;
}

nav ul li{
  display: inline;
  width: 100%;
}

nav ul li a{
  font-size: 40px;
  color: white;
  text-decoration: none;
}

nav ul li a{

}

.sections{
  width: 100%;
  height: 2000px;
}

#sec_one{
  background-color: blue;
}

#sec_two{
  background-color: red;
}

#sec_three{
  background-color: yellow;
}

.active{
  background-color: #666666;
}

p{
  color: white;
}

$(window).scroll(function(){
  var scrollPos = $(window).scrollTop();
  var page1Top = $("#sec_one").scrollTop();
  var page1Bot = $("#sec_one").outerHeight();

  var page2Top = $("#sec_two").scrollTop();
  var page2Bot = $("#sec_two").outerHeight();

  var page3Top = $("#sec_three").scrollTop();
  var page3Bot = $("#sec_three").outerHeight();

 /*if(scrollPos >= page1Top && scrollPos < page1Bot){
    $("#link_1").addClass("active");
    $("#link_2").removeClass("active");
    $("#link_3").removeClass("active");
  }else if(scrollPos >= page2Top && scrollPos < page2Bot){
    $("#link_1").removeClass("active");
    $("#link_3").removeClass("active");
    $("#link_2").addClass("active");
  }else if(scrollPos >= page3Top && scrollPos < page3Bot){
    $("#link_3").addClass("active");
    $("#link_1").removeClass("active");
    $("#link_2").removeClass("active");
  }*/

  if(scrollPos >= page1Top && scrollPos < page1Bot){
    $("#link_1").addClass("active");
    $("#link_2").removeClass("active");
    $("#link_3").removeClass("active");
    }else {
      $("#link_1").removeClass("active");
    }

  if(scrollPos >= page2Top && scrollPos < page2Bot){
    $("#link_2").addClass("active");
    $("#link_1").removeClass("active");
    $("#link_3").removeClass("active");
    }else {
      $("#link_2").removeClass("active");
    }

});
  • javascript
  • jquery
  • html
  • css
Share Improve this question asked Apr 19, 2017 at 15:41 ReeceReece 2,71111 gold badges52 silver badges104 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 4

Your main problem is you're not using .offset() - With your code you're just getting the position relative to itself so the top always bees 0 and bottom bees 2000 - using offset would mean you're getting the position relative to the document so that it takes into account other elements as well.

Also you don't need to check the bottom location. You can just use the top location of the next section.

$(document).ready(function() {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();
    
    var page1Top = $("#sec_one").offset().top;
    var page2Top = $("#sec_two").offset().top;
    var page3Top = $("#sec_three").offset().top;

    if (scrollPos >= page1Top && scrollPos < page2Top) {
      $("#link_1").addClass("active");
      $("#link_2").removeClass("active");
      $("#link_3").removeClass("active");
    } else {
      $("#link_1").removeClass("active");
    }

    if (scrollPos >= page2Top && scrollPos < page3Top) {
      $("#link_2").addClass("active");
      $("#link_1").removeClass("active");
      $("#link_3").removeClass("active");
    } else {
      $("#link_2").removeClass("active");
    }
    
    if (scrollPos >= page3Top) {
      $("#link_3").addClass("active");
      $("#link_1").removeClass("active");
      $("#link_2").removeClass("active");
    } else {
      $("#link_3").removeClass("active");
    }

  });
});
* {
  margin: 0;
  padding: 0;
}

nav {
  width: 100%;
  background-color: black;
  position: fixed;
  top: 0;
}

nav ul {
  width: 50%;
  margin: 0 auto;
  list-style-type: none;
  text-align: center;
}

nav ul li {
  display: inline;
  width: 100%;
}

nav ul li a {
  font-size: 40px;
  color: white;
  text-decoration: none;
}

nav ul li a {}

.sections {
  width: 100%;
  height: 2000px;
}

#sec_one {
  background-color: blue;
}

#sec_two {
  background-color: red;
}

#sec_three {
  background-color: yellow;
}

.active {
  background-color: #666666;
}

p {
  color: white;
}
<nav>
  <ul>
    <li><a href="" id="link_1">Link 1</a></li>
    <li><a href="" id="link_2">Link 2</a></li>
    <li><a href="" id="link_3">Link 3</a></li>
  </ul>
  <p></p>
</nav>

<div id="sec_one" class="sections"></div>
<div id="sec_two" class="sections"></div>
<div id="sec_three" class="sections"></div>

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Avoid the target of individual elements and the use of the rough ID's, you can evaluate the scrollTop and the offset().top of the element and based on the index of the section highlight the item you need:

$(window).scroll(function() {
  var scrollPos = $(window).scrollTop(),
      navH     = $('nav').height();
  $('.sections').each(function(i){
    var offT = $(this).offset().top;
    if((offT-scrollPos-navH) <= 0) {
      $('.active').removeClass('active')
      $('nav a').eq(i).addClass('active')
    }
  })
});
* { margin: 0; padding: 0;} nav { width: 100%; background-color: black; position: fixed; top: 0;} nav ul { width: 50%; margin: 0 auto; list-style-type: none; text-align: center;} nav ul li { display: inline; width: 100%;} nav ul li a { font-size: 40px; color: white; text-decoration: none;} .sections { width: 100%; height: 2000px;} #sec_one { background-color: blue;} #sec_two { background-color: red;} #sec_three { background-color: yellow;} .active { background-color: #666666;} p { color: white;}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="" id="link_1" class="active">Link 1</a></li>
    <li><a href="" id="link_2">Link 2</a></li>
    <li><a href="" id="link_3">Link 3</a></li>
  </ul>
  <p></p>
</nav>
<div id="sec_one" class="sections"></div>
<div id="sec_two" class="sections"></div>
<div id="sec_three" class="sections"></div>

Rewrote this a bit so you aren't calculating each individual element in your JS and you can just find which div you've scrolled into dynamically and modify the class of the matching nav element.

var $sections = $('.sections'),
    $lis = $('nav li');

$(window).on('scroll', function(){
  var scrollPos = $(window).scrollTop(),
      navHeight = $('nav').outerHeight();
  $sections.each(function() {
    var top = $(this).offset().top,
        bottom = top + $(this).outerHeight();
    if (scrollPos > top - navHeight && scrollPos < bottom) {
      var $target = $lis.eq($(this).index() - 1);
      $lis.not($target).removeClass('active');
      $target.addClass('active');
    }
  })
});
*{
  margin: 0;
  padding: 0;
}
nav{
  width: 100%;
  background-color: black;
  position: fixed;
  top: 0;
}

nav ul{
  width: 50%;
  margin: 0 auto;
  list-style-type: none;
  text-align: center;
}

nav ul li{
  display: inline-block;
}

nav ul li a{
  font-size: 40px;
  color: white;
  text-decoration: none;
  display: inline-block;
}

.sections{
  height: 200vh;;
}

#sec_one{
  background-color: blue;
}

#sec_two{
  background-color: red;
}

#sec_three{
  background-color: yellow;
}

.active{
  background-color: #666666;
}

p{
  color: white;
}
<nav>
  <ul>
    <li><a href="" id="link_1">Link 1</a></li>
    <li><a href="" id="link_2">Link 2</a></li>
    <li><a href="" id="link_3">Link 3</a></li>
  </ul>
  <p></p>
</nav>

<div id="sec_one" class="sections">

</div>

<div id="sec_two" class="sections">

</div>

<div id="sec_three" class="sections">

</div>

<script src="https://code.jquery./jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

So, I'm assuming you want the links to link to different divs on the page and not a pletely different page.

You can use ScrollSpy to acplish this really easily. The documentation can be found here.

Here's some sample code for how you would do this on your page:

First, reference the scrollspy.js file. Be sure to use the relative url depending on where you choose to save the file.

<script src="scrollspy.js"></script>

Then, in your page script file, you could have something like this.

$('.sections').on('scrollSpy:enter', function() {
  switch($(this).attr('id')) {
    case "sec_one":
      $("#link_1").addClass("active");
      $("#link_2").removeClass("active");
      $("#link_3").removeClass("active");
      break;
    case "sec_two":
      $("#link_1").removeClass("active");
      $("#link_2").addClass("active");
      $("#link_3").removeClass("active");
      break;
    case "sec_three":
      $("#link_1").removeClass("active");
      $("#link_2").removeClass("active");
      $("#link_3").addClass("active");
      break;
  }
}

$('.sections').scrollSpy();

本文标签： javascriptHighlighting links based on scroll positionStack Overflow

版权声明：本文标题：javascript - Highlighting links based on scroll position - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741267633a2368778.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。