我想在这里创建一个滚动效果 http://www.strikingly.com/s/pages/default-ion?demo=ion#1
我现在需要的是在窗口滚动时更改导航 li 类活动,只需使用<a href='#about'>
哈希目标更改它
5 回答
Serlite的代码非常好,但有一些错误。
- 如果向下滚动到最后,最后两个
a
元素都有active
类,因此两者都会突出显示。
解决方案
添加$('#menu-center ul li a').removeClass("active");
以在以下代码中添加新类之前删除所有以前的活动类。
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu-center ul li a').removeClass("active"); //added to remove active class from all a elements
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
- 如果您单击第二个或更大的菜单链接,它会使您滚动到该位置,但将活动类更改为上一个链接。
解决方案
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
好吧...不确定您是否仍在寻找问题的答案,但我可以提出建议...
如前所述,您可以使用该scrollTop()
方法来确定当前在视口中的部分。这是我拼凑起来确定的一个快速函数,它可能没有经过优化(我不是 jQuery 专家,抱歉),但它似乎工作,并且至少应该让你走上解决方案的正确道路:
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
该函数基本上采用href
每个菜单锚元素的 ,并使用它<div>
在文档中查找具有匹配 id 的(或任何其他元素,如果您愿意)。之后,它会检查它的顶部<div>
是在当前滚动位置之上还是在当前滚动位置,并且它的底部仍然在当前滚动位置之下。(这两个条件为真意味着这<div>
是视口中当前最高的一个,因此应被视为活动部分。).active
然后相应地删除/添加该类。当然,如果您想在某个部分被视为“活动”时进行偏移,您可以只添加/减去值。
也许仅仅展示它的作用更容易,所以这里有一个更新的 JSFiddle实现了这个功能。它最初是使用绑定的$(document).on("scroll")
- 但是,请注意,$(document).off("scroll")
在平滑滚动发生时,我还使用滚动事件将其从滚动事件中解绑,以便该部分在您到达目标部分之前不会更改(如果您单击其中一个菜单链接)。平滑滚动发生后,我再次将该函数绑定到滚动事件。
无论如何,我希望这就是你要找的!如果不是,请告诉我,我很乐意提供进一步帮助。(或者我会尝试,至少——因为正如我所提到的,jQuery 并不是我真正的专长......)祝你好运!
在您的事件侦听器上使用$(this).scrollTop();
以检查视口中的部分。
在 IE9 中打嗝,所以我更正了
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').click(function(){
var target = $(this).attr('href');
$('html, body').animate({scrollTop: $(target).offset().top-48}, 500);
return false;
$("#menu a").click(function () {
$("#menu a").removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $(target).offset().top-50}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
j$('#menu a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top-70 <= scrollPos && refElement.position().top-50 + refElement.height() > scrollPos) {
$('#menu ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
我知道我迟到了,但我的回答可能会对这个帖子的新观众有所帮助。Tushar Gupta 的回答是正确的。但是,如果菜单中有一个链接重定向到任何其他页面。Tushar Gupta's Answer 将引发错误。例如
<div class="m1 menu">
<div id="menu-center">
<ul>
<li><a href="#home">Home</a>
</li>
<li><a href="#portfolio">Portfolio</a>
</li>
<li><a href="#about">About</a>
</li>
<li><a href="http://mywebsite.com/blog">Blog</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>
这将在控制台中引发这样的错误。滚动对联系人不起作用。我更新了 Tushar 的代码来解决这个问题。
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#menu-center a[href*=#]:not([href=#])').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu-center ul li a').removeClass("active"); //added to remove active class from all a elements
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}