Question

我一直在寻找通过滚动添加/删除课程的方法，并找到了几个接近的例子，但我似乎没有用到我正在处理的网站。

我知道这里有很多线索提出类似的问题，但我找到的解决办法并不像我需要的那样工作。

旁注：我对jQuery很陌生，所以也许我错过了一些小事？

因此，我有一个单页网站，响应式，固定标题，当您点击导航链接时，您将平滑向下（使用CSS）到您点击的锚点。很简单。

现在，有一个CSS动画，当您点击标题中的任何导航链接时会发生这种动画，该动画将应用于h1标记。例如，您点击“＆＃39; intro＆＃39; （我有一个＆＃39; 1＆＃39;只是这样我可以选择它），向下滚动，现在看到一个动画上的单词＆＃39; INTRO＆＃39;在内容中。

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




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

再次，简单。我可以用这种方式完成所有必要标题上的动画，但用户必须点击锚点才能看到动画。

所以，现在我需要在用户滚动时应用此动画。我发现的许多解决方案都是一系列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的新东西很新。

我想我要问的是：有没有办法告诉浏览器＆＃34;嘿，当这个标题到达时，这个很远的地方＆＃34;从顶部开始（如文档顶部和元素顶部之间的一定数量的像素或百分比），应用此类＆＃34;，反对＆＃34;当用户滚动时，应用此类＆＃34;此-多＆＃34;＆＃34;

Answer 1

以下所有内容都在以下小提琴中：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");   
    }

});

Answer 2

我玩了一下，想出了这个小提琴：http://jsfiddle.net/Niffler/2XYPm/

首先检查是否已点击h1，如果已点击，则向下滚动到右侧：

var intro_clicked = false;

$('.intro').click(function(){
    intro_clicked = true;
    $('html, body').animate({
        scrollTop: $("#intro1").offset().top
    }, 2000);
});

这里是滚动部分...首先它检查（滚动时）它当前的位置并将其与目标所在的位置进行比较。如果它位于正确的位置（如果点击了h1），则会启动动画：

$(window).scroll(function() {
    if((($(window).scrollTop() + $(window).height()) > ($('#intro1').offset().top + $('#intro1').height())) && intro_clicked == true) {
        intro_clicked = false;
        setTimeout(function(){
            $('#intro1').addClass('txt_anim');
        },1000);
        setTimeout(function(){
            $('#intro1').removeClass('txt_anim');
        },11000);
    }
});

这是你的想法吗？

顺便说一句，$(window).scrollTop() + $(window).height()等于页面顶部与目前滚动到的位置的下边缘之间有多少像素，$('#intro1').offset().top + $('#intro1').height()等于顶部之间的像素数量该页面位于#intro1下方。因此，只要#intro1在页面的底部边缘（或页面可见部分内的任何位置）完全可见，就应激活动画。

通过滚动将类添加/删除到h1标签

2 个答案: