【发布时间】:2016-09-17 20:33:16
【问题描述】:
我正在使用模板网页。页面头部有一个导航栏。
我的标题:
<li class="scroll active"><a href="#home">Home</a></li> // first when page load
<li class="scroll"><a href="#services">Service</a></li> // second when page is scrolling to down.
<li class="scroll"><a href="#about-us">About Us</a></li> //..
<li class="scroll"><a href="#portfolio">Portfolio</a></li>
<li class="scroll"><a href="#team">Team</a></li>
<li class="scroll"><a href="#blog">Blog</a></li>
<li class="scroll"><a href="#contact">Contact</a></li>
function Scroll() {
var contentTop = [];
var contentBottom = [];
var winTop = $(window).scrollTop();
var rangeTop = 200;
var rangeBottom = 500;
$('.navbar-collapse').find('.scroll a').each(function(){
contentTop.push( $( $(this).attr('href') ).offset().top);
contentBottom.push( $( $(this).attr('href') ).offset().top + $( $(this).attr('href') ).height() );
})
$.each( contentTop, function(i){
if ( winTop > contentTop[i] - rangeTop ){
$('.navbar-collapse li.scroll')
.removeClass('active')
.eq(i).addClass('active');
}
})
};
现在我想反转标题:
<li class="scroll"><a href="#contact">Contact</a></li>
<li class="scroll"><a href="#blog">Blog</a></li>
<li class="scroll"><a href="#team">Team</a></li>
<li class="scroll"><a href="#portfolio">Portfolio</a></li>
<li class="scroll"><a href="#about-us">About Us</a></li>
<li class="scroll"><a href="#services">Service</a></li>
<li class="scroll active"><a href="#home">Home</a></li>
但是当我向下滚动页面时活动类没有改变。
我认为我的这部分代码应该会改变:
$('.navbar-collapse li.scroll')
.removeClass('active')
.eq(i).addClass('active');
但我不知道怎么做!!!
【问题讨论】:
-
不理解这部分
but active class not changed when I scroll page down.当你颠倒项目的顺序时会发生什么(假设颠倒是通过编程完成的)?
标签: javascript jquery