Question

我需要在滚动上隐藏一个元素 - 但前提是它尚未隐藏。

我写过以下jQuery，但由于某些原因它无法正常工作 - 请提示？

css类open-style-switcher和close-style-switcher确定css滚动动画。我想等到页面滚动到一定高度，然后自动隐藏搜索框，如果它包含开放类。

我哪里错了！？

  $(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {

        $('#search-box').hasClass('open-style-switcher').toggleClass("open-style-switcher", "close-style-switcher", 1000);

    }
});

Answer 1

＆＃34; toggleClass＆＃34;可以收到两个以空格分隔的班级同时创建＆＃34; $ searchBox＆＃34;变量以避免在DOM中进行双重搜索如前所述：hasClass（）返回boolean
这是：

 $(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        var $searchBox = $('#search-box');
        if ($searchBox.hasClass('open-style-switcher'))
        {
             $searchBox.toggleClass("open-style-switcher close-style-switcher", 1000);
        }
    }
});

Answer 2

.hasClass() - Returns: Boolean确定是否为给定的类分配了任何匹配的元素。

在您的方案中，addClass和removeClass更合适。

见下文：

＆＃13;

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  var searchbox = $('#search-box');
  if (scroll >= 500 && searchbox.hasClass('open-style-switcher')) {
    searchbox.removeClass("open-style-switcher");
    searchbox.addClass("close-style-switcher", 1000);
  }
});

＆＃13;

Answer 3

toggleClass()不会像你一样，甚至其他答案都不会这样认为。它只添加和删除类，而不是为其他人交换它们。请参阅toggleClass() documentation here。

if (scroll >= 500) {
    if($('#search-box').hasClass('open-style-switcher'))
    {
       $('#search-box').removeClass("open-style-switcher");
       $('#search-box').addClass("close-style-switcher");
    }
}

我想你也会想要一个与此相反的else块。也许以下是一种更直接的方式来实现您想要实现的目标，因为检查中可能没有任何要点来查看#search-box是否已经拥有open-style-switcher类。

if (scroll >= 500) {
    $('#search-box').removeClass("open-style-switcher").addClass("close-style-switcher");
}
else
{
    $('#search-box').removeClass("close-style-switcher").addClass("open-style-switcher");
}

如果其他类出现在滚动高度，则删除类

3 个答案: