导航器链接不会更改滚动条的颜色

时间:2018-06-27 10:33:17

标签: javascript jquery navbar

导航栏中的链接在滚动时不会更改颜色。它仅应更改链接的颜色,而不能这样做。我不知道类名等有什么问题

var sections = $('section')
  , nav = $('nav')
  , nav_height = nav.outerHeight();

$(window).on('scroll', function () {
  var cur_pos = $(this).scrollTop();
  
  sections.each(function() {
    var top = $(this).offset().top - nav_height,
        bottom = top + $(this).outerHeight();
    
    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('.plink').removeClass('active');
      sections.removeClass('active');
      
      $(this).addClass('active');
      nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
    }
  });
});

nav.find('.plink').on('click', function () {
  var $el = $(this)
    , id = $el.attr('href');
  
  $('html, body').animate({
    scrollTop: $(id).offset().top - nav_height
  }, 500);
  
  return false;
});
.plink.active {
    color:red;
}

.plink {
     display:block;
     padding-left: 35%;
	font-family: "Raleway";
	white-space: nowrap;
	color: #fff!important;
  font-size: 1.1rem;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-light bg-light navbar-fixed-top">
  <a class="navbar-brand" id="brand" href="#home">Arkkitehtuuritoimisto</a>
    <ul class="navbar-nav" id="klop">
      <li>
        <a class="nav-link plink"  href="#about">Yritys</a>
      </li>
	   <li><a class="nav-link plink"  href="#gallery">Referenssit</a></li>
      <li><a class="nav-link plink"  href="#footer">Yhteystiedot</a></li>
      
    </ul>
    
  </div>
</nav>

因此,在使用此代码之前,我不知道出了什么问题,并且可以正常工作。你能帮我吗?

0 个答案:

没有答案