Question

当窗口达到某个高度时，我想将.eventsHovered添加到.events。这有效：

jQuery(window).bind('scroll', function() {
                 if ($(window).scrollTop() > 201) {
                     $('.events').addClass('eventsHovered');
                         if ($(window).scrollTop() > 300 {
                             $('.events').removeClass('eventsHovered');
                           }
                   }
                 else {
                     $('.events').removeClass('eventsHovered');
                 }
                });

但是我不想按照上面的说法将它设置为300，因为高度可能会增加。我试过这个：

jQuery(window).bind('scroll', function() {
             var $height = .height();
             if ($(window).scrollTop() > 201) {
                 $('.events').addClass('eventsHovered');
                     if ($(window).scrollTop() > $height {
                         $('.events').removeClass('eventsHovered');
                       }
               }
             else {
                 $('.events').removeClass('eventsHovered');
             }
            });

但它不起作用。请有人帮忙吗？

Answer 1

.height()在选择器上运行，但您没有选择一个。您可以使用$(this)引用window对象，因为您在其滚动事件处理程序中调用它，或$(window)本身。

此外，我们已弃用.bind()，您应该使用.on()。您的if-else逻辑也可以根据您发布的代码进行改进，当窗口滚动超过200但小于其高度时，您基本上想要切换eventsHovered类：

jQuery(window).on('scroll', function() {
    var $w = $(window),
        fromTop = $w.scrollTop(),
        wHeight = $w.height();  // or $(this).height()

    if (fromTop > 201 & fromTop < wHeight) {
        $('.events').addClass('eventsHovered');
    } else {
        $('.events').removeClass('eventsHovered');
    }
});

更好：您可能还希望在加载页面时检查相对于文档正文的视口位置。有时页面没有加载到顶部，并且eventsHovered类不会被切换，因为if / else条件仅在触发滚动事件时被评估。

为了防止这种情况，您可以定义一个函数，您将在运行时和滚动事件期间触发该函数：

var eventsToggle = function() {
    var $w = $(window),
        fromTop = $w.scrollTop(),
        wHeight = $w.height();

    if (fromTop > 201 & fromTop < wHeight) {
        $('.events').addClass('eventsHovered');
    } else {
        $('.events').removeClass('eventsHovered');
    }
}

// Execute at runtime
eventsToggle();

// Listen to scroll event
jQuery(window).on('scroll', eventsToggle);

使用.height（）添加变量

1 个答案: