jQuery如果大于则执行操作，但只执行一次

jQuery do action if bigger than but do it just one time

本文关键字：执行 一次 大于 如果 操作 jQuery      更新时间：2024-03-19

对不起，也许我的标题并不能很好地解释我的问题，但我想这是一件很简单的事情，有一些示例代码。：）

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

现在，我检查了滚动位置，在"x"位置，样式需要更改。Al这是有效的，但我的问题是，由于我使用的if/else语句，它将继续改变样式，这一语句有点正常和合乎逻辑，但我想知道我如何只触发一次，而不是每个大于..的滚动高度。。

    $(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,
    });
   }
});

提前感谢！

Nick

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

(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

相关文章：