我想创建页面http://kiskolabs.com/
上显示的导航我已经创建了粘性菜单,但问题始于在菜单中标记活动元素。
问题是:
如何检测页面是否滚动到特定ID?
假设我有一些标题,如。
<h1 id="whatisit">What is it</h1>
<h1 id="desc">Description</h1>
<h1 id="faq">FAQ</h1>
和菜单
<nav>
<a href="#whatisit">What is it</a>
<a href="#desc">Description</a>
<a href="#faq">FAQ</a>
</nav>
当页面滚动到此元素时,我想要高亮菜单(添加类或其他)。
我已经找到了如何将元素滚动到此thread中的特定ID,但我不知道如何检测现在的id。页面大小是动态的,可能会在内容中发生变化。所以我想到的绝对解决方案很糟糕。
到目前为止我滚动的内容:
$("nav a").click(function (){
$("html, body").animate({ scrollTop: $($(this).attr('href')).offset().top }, 1000);
});
我也发现了this solution,但也许有更好的方法来实现它?
修改
此问题与主持人提出的问题不重复。而且,这个问题没有得到公认的答案。我的问题有点先进。
答案 0 :(得分:0)
您可以使用动画回调功能:
$("nav a").click(function () {
$("html, body").animate({
scrollTop: $(this.href).offset().top
}, 1000, function () {
$(this).addclass('scrolled').siblings('h1').removeClass('scrolled');
});
});
答案 1 :(得分:0)
在互联网上尝试和寻找解决方案时,我已经解决了我的问题。
我使用了 waypoints插件,它看起来非常好用。该插件可以下载here。
菜单的html代码:
<nav>
<a href="#whatisit" class="scrollable">....</a>
<a href="#howworks" class="scrollable">....</a>
<a href="#whydata" class="scrollable" >....</a>
<a href="#spec" class="scrollable">...</a>
</nav>
和要滚动页面的标题的html代码:
<h2 class="scrollable" id="whatisit">...</h2>
<h2 class="scrollable" id="spec">...</h2>
Jquery代码,使用#id与a href
属性相同的特定元素进行页面滚动。
$("nav a.scrollable").click(function (){
var elementClickedHref = $(this).attr('href');
$('html, body').animate({
scrollTop: $(elementClickedHref).offset().top-100
}, 2000);
return false;
});
要更改滚动后当前处于活动状态的元素的颜色,我使用了 waypoint 插件。下面的代码找到可以滚动的h2
并获取它的id。然后查找哪些可滚动的链接也href
与a
元素的id相同,并将活动类添加到此ID并从非活动元素中删除活动类。
$('h2.scrollable').waypoint(function() {
var idToCheck = '#' + $(this).attr('id');
$('a.scrollable').removeClass('active');
$('a.scrollable[href="'+idToCheck+'"]').addClass('active');
}, {
offset: '100%'
});
它完全符合我的要求。我希望这个解决方案可以帮助那些将面临这样问题的人。