0

我在页面上使用点来允许用户导航到某些部分。单击它们时，它们会更改颜色并导航到该部分。我想要它，以便它们在您滚动页面时改变颜色。

下面的代码片段工作正常，但在我的页面上，点仅在您单击它们时才会改变颜色，而不是在您滚动页面时。我想这意味着我将其添加到页面的方式存在错误，但我不确定这是什么。

$(document).on("click","a[href^='#']",function(e){
  var href=$(this).attr("href"),target=$(href).parents(".mCustomScrollbar"); 
  if(target.length){
    e.preventDefault();
    target.mCustomScrollbar("scrollTo",href);
  }
});

$(document).ready(function () {

    $(document).on('scroll', function() {
      var currentPosition = $(this).scrollTop();
      $('.section').each(function() {
        var sectionPosition = $(this).offset().top;
        if(sectionPosition < currentPosition) {
          $('a').removeClass('active');
          $('a[href="#'+$(this).attr('id')+'"]').addClass('active');
        }
      });
    });
    $('a').on('click', function() {
      $('a').removeClass('active');
      $(this).addClass('active');
    });
});
.navbar-nav{
    width: 100%;
    position: fixed;
    top: 0;
}
.navbar-nav li {
  float: left; 
  margin-left: 10px; 
  list-style: none;
  border-radius: 50%;
  height: 30px;
}
.section {
	    height: 200px;
    text-align: center;
    padding: 200px;
}
.nav a.active {
    background-color: red;
}
.navbar-nav li a{
 background-color: transparent;
  border: 1px solid #3D4E58;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  font-size: 0;
  height: 8px;
  line-height: 0;
  outline: medium none;
  padding: 5px;
  position: relative;
  text-indent: -9999px;
  width: 8px;
  margin-bottom: 25px;
}
#home {clear: both;}

.newClass{
    background : red;
    color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
   <li><a href="#section1" class="active">name</a></li>
   <li><a href="#section2">name</a></li>
   <li><a href="#section3">name</a></li>
   <li><a href="#section4">name</a></li>
   <li><a href="#section5">name</a></li>
   <li><a href="#section6">name</a></li>
   <li><a href="#section7">name</a></li>
   <li><a href="#section8">name</a></li>
   <li><a href="#section9">name</a></li>
   <li><a href="#section10">name</a></li>
   <li><a href="#section11">name</a></li>
</ul>

<div id="section1" class="section">
<p>Our three year strategic plan ends in 2017 so we are busy writing our new one. Kent Union's plan outlines the priorities for our organisation and what we will be working on. It's really important that we get your input into our plan for 2017 - 2020. We are your students' union and improving your student experience here at the University of Kent is what we are here to do.</p>
</div>

<div id="section2" class="section">
<p>There are lots of different ways you can get involved in developing our new plan.</p>
<p>Take our survey to tell us how you feel about life at Kent and what you want us to work on</p>
<p>Send us your feedback, on anything you think we need to know</p>
<p>Sign up to take part in a focus group or interview</p>
</div>

<div id="section3" class="section">
<p>How we're developing our new plan. We'll keep this section updated, so you can see our progress and what we've found out.</p>
</div>

<div id="section4" class="section">
<p>Stage 1: Desk based research to understand all the issues that might affect you. You can read our full report here, or for those of you without an hour to spare we've done a one page version.
</p>
</div>

<div id="section5" class="section">
<p>Stage 2: Interviews with senior university staff</p>
</div>

<div id="section6" class="section">
<p>Stage 3: Large scale survey with all our members</p>
</div>

<div id="section7" class="section">
<p>Stage 4: Focus groups and interviews with some of you</p>
</div>

<div id="section8" class="section">
<p>Stage 5: Focus groups with secondary school and FE students, to understand their perspectives of studying at University 
</p>
</div>

<div id="section9" class="section">
<p>Stage 6: Presenting our draft plan at AGM in November for your feedback</p>
</div>

<div id="section10" class="section">
<p>Stage 7: Presenting our plan to the University of Kent's management team in December
</p>
</div>

<div id="section11" class="section">
<p>Stage 8: Signing off our plan at our Board of Trustees in March</p>
<p>If you have any questions about how we use our plan or to find out more about us, please contact your full time officer team.</p>
</div>

4

0 回答 0