在滚动中添加/删除类（Wordpress）

我试图让一个小部件添加一个类，当用户向下滚动页面50px时删除一个类，并在用户再次滚动时反转该过程。在滚动中添加/删除类（Wordpress）

网站：

平台： WordPress的

主题： Customizr孩子

我的小工具，我想影响具有适用于它的header-widget类。 This forum thread促使我创建：

$(function() { 
    //caches a jQuery object containing the header element 
    var header = $(".header-widget"); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 

     if (scroll >= 50) { 
      $(".header-widget").removeClass("header-widget-tallheader"); 
      $(".header-widget").addClass("header-widget-shortheader"); 

     } else { 
      $(".header-widget").removeClass("header-widget-shortheader"); 
      $(".header-widget").addClass("header-widget-tallheader"); 
     } 
    }); 
});

如WordPress的使用脚本标记，禁止为标准[1]，我选择安装“脚本ñ风格”的插件，这显然会覆盖限制。然后插入上面的代码，使其出现在head标记中。

不幸的是，没有任何事情发生。这是脚本标签还没有处理？我的编码错了吗？或者我应该使用AJAX [2]？如果是后者，我通读W3Schools AJAX教程[3]，但不知道如何在这种情况下应用它。

如果有人能够提供帮助，请事先致谢。我花了几个小时来看这个，但仍然看起来像一个初学者，所以如果任何答案可能尽可能描述性的，请，我会很感激。

脚注：

由于论坛名誉的限制，我会链接到包括但不能：

[1] https://www.godaddy.com/garage/webpro/wordpress/3-ways-to-insert-javascript-into-wordpress-pages-or-posts/

[2] https://stackoverflow.com/questions/28356137/change-css-when-scroll-down-using-php

[ 3] http://www.w3schools.com/ajax/default.asp

来源

2016-08-18 FishOnABicycle

你的代码是正确的，ju在此之前st增加$ = jQuery;。

更正后的代码

$ = jQuery; 
$(function() { 
    //caches a jQuery object containing the header element 
    var header = $(".header-widget"); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 

     if (scroll >= 50) { 
      $(".header-widget").removeClass("header-widget-tallheader"); 
      $(".header-widget").addClass("header-widget-shortheader"); 

     } else { 
      $(".header-widget").removeClass("header-widget-shortheader"); 
      $(".header-widget").addClass("header-widget-tallheader"); 
     } 
    }); 
});

来源

2016-08-18 13:40:33

最好的，这工作 - 谢谢。有时候，最恼人的问题的答案可能是简单的问题！ – FishOnABicycle

哈哈。别客气：）。不要忘了一件事，如果你认为你的javascript代码是正确的并且不起作用，请检查'console log'以查看javascript的错误。你可以用这些错误搜索谷歌。 :) –

试着改变你的脚本：

jQuery(function() { 
    //caches a jQuery object containing the header element 
    var header = jQuery(".header-widget"); 
    jQuery(window).scroll(function() { 
     var scroll = jQuery(window).scrollTop(); 

     if (scroll >= 50) { 
      jQuery(".header-widget").removeClass("header-widget-tallheader"); 
      jQuery(".header-widget").addClass("header-widget-shortheader"); 

     } else { 
      jQuery(".header-widget").removeClass("header-widget-shortheader"); 
      jQuery(".header-widget").addClass("header-widget-tallheader"); 
     } 
    }); 
});

的jQuery的版本附带的WordPress doesn't认识$

来源

2016-08-18 13:40:57

在滚动中添加/删除类（Wordpress）

回答

相关问题