在滾動中添加/刪除類（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）

回答

相關問題