我有一个单页网站。当我向下滚动时,我希望我的(固定的)导航栏链接在到达该特定 div 的位置时将状态更改为事件。
我使用了 jQuery
但它不起作用。这是我的代码:
// SMOOTH SCROLLING PAGES
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 800, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('main-navigation a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('main-navigation ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
};
这是我的 HTML:
<nav id="main-navigation">
<ul>
<li class="active"><a href="#site-main">Home</a></li>
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
<li><a href="#d">D</a></li>
</ul>
</nav>
<div id="a">DIV Alpha</div>
<div id="b">DIV Bravo</div>
<div id="c">DIV Charlie</div>
<div id="d">DIV Delta</div>
平滑滚动效果很好,但是当我从 div #d
向上滚动时,navbar li 事件状态没有改变。
最佳答案
在这里,我为您准备了 fiddle ,希望它是您要找的- http://jsfiddle.net/skyr9999/dpuvcj5w
<div class="content">
<div id="site-main">DIV Home</div>
<div id="a">DIV Alpha</div>
<div id="b">DIV Bravo</div>
<div id="c">DIV Charlie</div>
<div id="d">DIV Delta</div>
</div>
<nav id="main-navigation">
<ul>
<li><a class="menuitem" href="#site-main">Home</a></li>
<li><a class="menuitem" href="#a">A</a></li>
<li><a class="menuitem" href="#b">B</a></li>
<li><a class="menuitem" href="#c">C</a></li>
<li><a class="menuitem" href="#d">D</a></li>
</ul>
</nav>
js
$(document).ready(function () {
$('a[href^="#site-main"]').addClass('active');
//smoothscroll
$('.menuitem').on('click', function (e) {
e.preventDefault();
// $(document).off("scroll");
var athis = this;
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top + 2
}, 800, 'swing', function () {
window.location.hash = target;
$('.menuitem').removeClass('active');
$(athis).addClass('active');
});
});
$(window).scroll(function (event) {
var scrollPos = $(document).scrollTop();
if (scrollPos === 0)
{
$('a[href^="#site-main"]').addClass('active');
return;
}
$('.menuitem').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.menuitem').removeClass("active");
currLink.addClass("active");
} else {
currLink.removeClass("active");
}
});
})
});
因为您没有包含任何 css,所以我即兴创作了一点,但它似乎工作得很好。
CSS
#a,#b,#c,#d,#site-main { height: 400px;}
#main-navigation {
position: fixed;
top: 0px;
right:10px;
}
#main-navigation ul li {
display: inline;
}
.active {
background: #f00;
}
更新 1 我更新代码以匹配 fiddle 现在它会在您滚动到元素时更改菜单项选择
关于javascript - jQuery 页面滚动不会将导航栏 href 更改为事件类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42480569/