数据滚动和数据锚 - 活动类关闭 [英] Data-scroll and data-anchor — active class is off

问题描述

我正在开发两个网站， Fredrix Design 和 Bosted System ，我使用完全相同的单页 - 我从< section data-anchor =example> 他/她通过< a data-scroll =example> 。然而，它在Bosted System网站上的工作方式不同。滑动机制应该可以正常工作，但是活动的类关闭了20个像素左右。当我到达不同的< section> 时，它不会发生变化 - 当我输入它时，它会发生变化。

查看演示

在上述其他问题中由 @roasted 提供/制作。

  $（ window）.scroll（function（）{
 var windscroll = $（window）.scrollTop（）; 
 if（windscroll> = 100）{
 $（'section'）。each （函数（i）{
 if（$（this）.position（）。top< = windscroll + 84）{// <<<这里'+ 84'而不是' -  20'
 $（'nav a.active'）。removeClass（'active'）; 
 $（'nav a'）。eq（i）.addClass（'active'）; 
} $ b $ （'active'）; 
 $（'nav a：first'）。 addClass（'active'）; 
} 
 
}）。scroll（）; 
  

I'm developing two sites, Fredrix Design and Bosted System, where I use the exact same "one page"-system files and code that I got from another question on Stack Overflow.

On Fredrix Design it works perfectly — the navigation menu slides the user to whatever <section data-anchor="example"> he/she clicks on via <a data-scroll="example">. However it doesn't work the same way on the Bosted System website. The sliding mechanism works smoothly as it should, but the active class is off by 20 pixels or so. It doesn't change exactly when I arrive at a different <section> — it changes when I've entered it.

SEE DEMO

supplied/made by @roasted in the other question mentioned above.

解决方案

On Bosted site, setting window scroll handler like this seems to fix your problem. You should investigate in this way to find what's going on but i think its due to some padding/margin property somewhere:

$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
        $('section').each(function(i) {
            if ($(this).position().top <= windscroll + 84) { // << here '+ 84' instead of '- 20'
                $('nav a.active').removeClass('active');
                $('nav a').eq(i).addClass('active');
            }
        });

    } else {
        $('nav a.active').removeClass('active');
        $('nav a:first').addClass('active');
    }

}).scroll();

这篇关于数据滚动和数据锚 - 活动类关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！