Question

对不起，也许我的标题并不能很好地解释我的问题是什么，但我猜这是一个非常简单的例子代码。：）

我为设计创建了一些样式（具有高标题的设计，当用户向下滚动页面时需要进行压缩）。为了从高标题中获取一个小标题，我通过jQuery切换它的样式。

到现在为止，我检查了滚动位置，在'x'位置需要更改样式。 Al这个有效但我的问题是，它会继续改变样式，因为我使用的if / else语句，Kinda normal和逻辑与此语句，但我想知道我是如何只触发这一次而不是每个滚动高度大于..

    $(window).scroll(function () {   
   position = $(window).scrollTop();
   if ( position > 267) {

    $('#heading').addClass('header-shadow');
    $("#heading-top").animate({
        'opacity': 0
    });
    $("#heading").animate({
        'height': 75,
    });
    $("#site-header").animate({
        'height': 155,
    });
    $("#container").animate({
        'top': 497,
    });

   } else {
    $('#heading').removeClass('header-shadow');

    $("#heading-top").animate({
        'opacity': 100
    });
    $("#heading").animate({
        'height': 248,
    });
    $("#site-header").animate({
        'height': 328,
    });
    $("#container").animate({
        'top': 595,
    });

   }

});

提前致谢！

尼克

Answer 1

您可以查看基于标志的简单解决方案。一个标志，可以告诉前一个滚动执行是否已经处理了条件

(function () {
    var flag = $(window).scrollTop() > 267;
    $(window).scroll(function () {
        var position = $(window).scrollTop();
        if (!flag && position > 267) {
            flag = true;
            console.log('true')
        } else if (flag && position <= 267) {
            console.log('else')
            flag = false;
        }
    });
})();

演示：Fiddle

jQuery如果大于但只做一次就行动

1 个答案: