jquery - 通过滚动向 h1 标签添加/删除类

Question

我一直在寻找通过滚动添加/删除类的方法，并找到了几个接近的示例，但我似乎无法将其用于我正在处理的网站。

我知道这里有很多线程提出了类似的问题，但我找到的解决方案并没有按照我需要的方式工作。

旁注:我是 jQuery 的新手，所以也许我遗漏了一些小东西？

所以我有一个单页网站，响应式，固定标题，当你点击一个导航链接时，你会平滑地向下滚动(使用 CSS)到你点击的 anchor 。很简单。

现在，有一个 CSS 动画，当您单击 header 中的任何导航链接时会发生，它会应用于 h1 标记。例如，您单击“介绍”(我有一个类“1”，所以我可以选择它)，向下滚动，现在看到内容中“介绍”一词的动画。

$('.intro').click(function(){
        setTimeout(function(){
        $('.1').addClass('txt_anim');
            },1000);
        setTimeout(function(){
        $('.1').removeClass('txt_anim');
            },11000);
    });




<h1 class="1">intro</h1>

同样，简单。我可以通过这种方式在所有必要的标题上完成动画，但用户必须单击 anchor 才能看到动画。

所以，现在我需要在用户滚动时应用此动画。我找到的许多解决方案都是一系列 if/else 语句，这些语句取决于用户向下滚动的距离，使用 scrollTop()

这个例子使用了一个他们定义的变量scroll。

if (scroll <= 500) {
        $("#m1").addClass("active");
    }

此解决方案的问题:由于此网站是响应式的，因此根据您的浏览器的宽度或某人设备的宽度，网站的内容被压缩并下推，从而使网站变长。因此，很有可能将动画应用于标题，而用户甚至在屏幕上都看不到它。

我问同事是否有解决方案，他做了一些挖掘并找到了这个 jsfiddle并说我应该尝试类似于他们使用的代码:

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");
        currLink.addClass("active");
    }
    else{
        currLink.removeClass("active");
    }
});
}

我已经研究了很长时间了，但我得不到任何结果……再说一次，jQuery 的东西还是很新。

我想我想问的是:有没有办法告诉浏览器“嘿，当这个标题离顶部“这么远”时(比如顶部之间的一定数量的像素或百分比)文档的顶部和元素的顶部)，应用此类”，而不是“当用户滚动“这么多”时应用此类。”

Answer 1

下面的所有内容都在下面的 fiddle 中:http://jsfiddle.net/NuVAv/

首先，我会考虑更动态地设置导航，使用 data 属性或 href 将导航链接关联到内容部分，如下所示:

HTML

<ul id="nav">
    <li><a href="#intro">Intro</a></li>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
</ul>

<div id="intro">...</div>
<div id="section1">...</div>
<div id="section2">...</div>

JS

$("#nav a").click(function(e){
    var $link = $(this),
        sectionID = $link.attr("href"),
        $section = $(sectionID),
        scrollTo = $section.offset().top;

    $("html,body").animate({scrollTop: scrollTo}, 300);

    e.preventDefault();
});

其次，这是我可能如何编写我的滚动处理程序，内嵌注释:

JS

var $allScrollSections = $("div"), // cache references to static items
    $w = $(window);

$w.scroll(function(){
    var scrolled = $w.scrollTop(),
        scrolledPast = [],
        $currentSection = null;

    $allScrollSections.each(function(i,section){
        var $section = $(section),
            sectionTop = $section.offset().top;

        // add all sections that you have scrolled beyond to an array
        if(scrolled >= sectionTop) scrolledPast.push($section);
    });

    // the last section you have scrolled past will be your "current"
    $currentSection = scrolledPast.length ? scrolledPast[scrolledPast.length-1] : null;

    // add/remove the "animate" class to/from the "current section"
    if($currentSection && !$currentSection.hasClass("animate")){
        $allScrollSections.removeClass("animate");
        $currentSection.addClass("animate");
    } else if (!$currentSection){
        $allScrollSections.removeClass("animate");   
    }

});