ページでドットを使用して、ユーザーが特定のセクションに移動できるようにしています。クリックすると、色が変わり、そのセクションに移動します。ページをスクロールすると色が変わるようにしたい。
以下のコード スニペットは正常に動作しますが、私のページでは、ページをスクロールしたときではなく、クリックした場合にのみドットの色が変わります。これは、ページに追加した方法にエラーがあることを意味すると思いますが、これが何であるかはわかりません。
$(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>