Question

我正在构建一个单页滚动网站，其中的菜单会在点击时滚动到内容部分，然后在相关区域中淡出。

这很好用。

最重要的是，如果用户只是在没有点击事件的情况下滚动，我会在这些部分中消失。

所有要淡化的部门都将显示设置为“无”＃。

上述两种方法都可以单独使用，但是当事件相互交叉时会出现问题，即：

如果我将fadeIn代码添加到滚动功能，则会发生以下情况：

在开始时，您必须滚动一点才能淡入内容，因为如果不这样做，即使菜单项上的点击也不会触发。

如果我点击菜单项＆＃34;关于我们＆＃34;例如，它滚动到页面的目标部分并淡入内容，这很好，但在此之后，on scroll功能再次触发并再次淡化相同的内容。

总之，如果显示设置为隐藏且滚动位置正确，我试图使内容仅淡入。

当然，当目标部分仍设置为显示“无”时，该部分应从默认位置滚动和淡入。

我尝试过使用visibilty的条件语句：隐藏的和许多其他的东西，但我不能让它工作太多。

 <div id="menu">
<ul>
<li><a class="button" href="#home">Home</a></li>
<li><a class="button"  href="#about">About</a></li>
<li><a  class="button" href="#service">Services</a></li>
<li><a  class="button" href="faqs.html">Galleries</a</li>
<li><a  class="button" href="#contact">Contact</a></li>
</ul>
</div>

$(window).scroll(function() { 
if ($(this).scrollTop()> 100) { 
$('.about').fadeIn(2000); 
} else { 
$('.about').fadeOut(); 
} 
});

$(".button").on("click", function( e ) {
$('.rightcservices').fadeIn(2000);
e.preventDefault();

$("body, html").animate({ 
    scrollTop: $( $(this).attr('href') ).offset().top 
}, 600);
});
});

目标是在滚动或点击时淡化链接，设置为无显示的部分的默认设置。

Answer 1

在所有评论之后，让我发布最终代码并做一些澄清。稍微过了一点（这里有时会发生有趣的功能），最初的想法是无法修复太复杂。但我有点低估了这一点，最后通过添加变量pilot将手动滚动与动画分离，并将其用作onscroll侦听器函数的切换和阻止机制，以便在手动滚动时执行淡入淡出。还将第二个淡入淡出实例放入动画的回调中，同时将开关翻转回来。

http://codepen.io/anon/pen/zvrvNP?editors=001

$(function() {

    var anchors = ['home','about','services','contact'],
    target, zenith, nadir, location, pilot,
    modern = window.requestAnimationFrame;

    storeDimensions();

    $(window).resize(storeDimensions).scroll(function() {

        location = $(this).scrollTop();

        if (!pilot) {
        if (modern) requestAnimationFrame(checkFade);
        else checkFade();
        }
    });

    $('.button').click(function(e) {

        e.preventDefault();

        pilot = true;

        var destination = $(this.hash).offset().top,
        goal = $('.' + this.hash.substr(1));

        if (destination != location) goal.hide();

        $('html, body').animate({scrollTop: destination}, 600, function() {

            goal.fadeIn(2000);
            pilot = false;
        });
    });

function storeDimensions() {

    var placement = []; target = []; zenith = []; nadir = [];

    $.each(anchors, function(n) {

        placement.push($('#' + this).offset().top);
        target.push($('.' + this));
        zenith.push(placement[n]-$(window).height()*0.8);
        nadir.push(placement[n]+target[n].outerHeight(true));
    });
}

function checkFade() {

    $.each(anchors, function(i) {

        if (!target[i].is(':animated')) {
        if (location > zenith[i] && location < nadir[i]) target[i].fadeIn(2000);
        else if (target[i].is(':visible')) target[i].hide();
        }
    });
}
});

我在使用fadeOut()代替hide()时发现了一个怪癖，并会看到是否可以修复。脚本应该运行良好，但在此演示中可以找到任何可能的未来更新：

http://codepen.io/Shikkediel/pen/avdyWx?editors=001

这是一个早期版本和评论，之前我们意识到预先计算和存储所有维度和偏移实际上比获取每个滚动更新的值更有效。我也将文本留在那里，因为它可能使基本思想更清晰：

http://codepen.io/anon/pen/qOOeod?editors=001

数组elements确实包含锚点的名称，我们将在这里滚动开始循环：$.each(elements, function() {。这样就无需单独为它们编写条件语句。

对于循环内的变量object和target，this将成为数组中的每个锚名称。因此，它们最终将成为表示要滚动到的元素的jQuery选择器，例如$('#about')，以及具有应该淡入的匹配类的元素 - $('.about')。

变量zenith和nadir是页面的最高和最低滚动位置，其间将显示每个锚定部分。使用object.offset().top时，元素在顶部时会开始淡入淡出。减去窗口高度，当它到达屏幕的 bottom 时它将开始淡入淡出（看起来像一个更好的细节）。要使用的最低滚动位置（nadir，自评论以来改变了一个）表示锚本身的位置加上包含的渐变内容，填充和边距的高度。因此，如果可见主题通过向上滚动离开屏幕（大约在实例中），它将再次隐藏。

我还添加了滚动功能的优化。特别是在启用了smoothscroll的Firefox上，它可以激活很多，因此只需使用requestAnimationFrame重新绘制屏幕重新计算时，CPU就会更容易重新计算。并且正常情况下降了。功能不可用时的行为。当单击一个按钮并开始滚动动画时，jQuery每秒会触发大约一百次，所以这对任何设备都是好事。

仅在给定的滚动位置上淡入＆amp;＆amp;如果显示为“没有”

1 个答案: