使用jquery檢查元素是否具有不斷的類

我正在使用stickyJS創建一個粘性標題與我的WordPress網站。我已經正確地使腳本正確排隊，並且粘性運行正常。使用jquery檢查元素是否具有不斷的類

我想要實現的是不斷檢查我爲sticky設置的nav元素是否有一個名爲「is-sticky」的類，如果有的話更改一些CSS。

這裏是我已經代碼：

function stickyInit($) 
{ 
$("#site-navigation").sticky({topSpacing:0}); 

window.setInterval(check_sticky,500); 

function check_sticky(){ 
    if($("#site-navigation-sticky-wrapper").hasClass("is-sticky")){ 
     console.log ("Do Something"); 
    } 
} 
} 

jQuery(document).ready(function ($) { 
stickyInit($); 
});

這是我已經排隊到設定NAV爲粘稠的文件中的所有代碼。

正如你所看到的，我已經使用setInterval嘗試創建一個循環來不斷測試「＃site-navigation-sticky-wrapper」元素來查看它是否具有上面提到的類。

此代碼的工作原理和我在螢火蟲控制檯中得到的消息，但我只得到它一次而不是重複。

所以我的問題是，我如何不斷測試這個元素，看看它是否有類是「粘」，所以我可以交替導航CSS時，它呢？

此外，當類「is-sticky」沒有設置在元素上（在我滾動回頂端之後），我該如何將導航設置回原始位置？或者它會這樣做嗎？

來源

2014-04-23 Tom Burman

爲什麼使用setInterval而不是滾動事件來做到這一點？最重要的是...你的問題如何與WordPress連接？ –

以前沒有聽說過滾動事件，不好意思看。因爲即時通訊試圖在wordpress網站上播放，就像我說過的那樣，我認爲我應該在這裏發佈，因爲它是在wordpress網站上，並且可能會有一些衝突或缺少關於wordpress的缺失 –

這裏是鏈接滾動事件api文檔：http://api.jquery.com/scroll/我很確定它是js的問題 - WP沒有這樣做:) –

檢查this fiddle - 當「粘滯」類處於活動狀態時，它會重複觸發&當您滾動到停止位置時，導航位置會自動恢復到之前的狀態。

// Your code 
function stickyInit($){ 

    $("#site-navigation").sticky({topSpacing:0}); 

     function check_sticky(){ 
      if ($("#site-navigation-sticky-wrapper").hasClass("is-sticky")) { 
       console.log ("Do Something"); 
      } 
     } 

    window.setInterval(check_sticky,500); 
} 

jQuery(document).ready(function ($) { 

    stickyInit($); 

});

來源

2014-04-23 21:41:18 PHearst

嗨，感謝您的回覆，據我所知，您所做的是將setInterval的位置從之前移到被它調用的函數之後。這與我之前的效果相同，在控制檯中，我應該每半秒拿出一個字符串「Do Something」，但是相反，我得到它一次，那就是它。還有什麼建議？再次感謝 –

@TomBurman它多次發射，控制檯只是崩潰重複的console.log消息。退房http://jsfiddle.net/GW679/1/ – Brett

我應該補充一點，最好的做法是讓它一次又一次觸發，當它實際上在頂端，但如果它是你想要的......代碼工作精細。 – PHearst

使用jquery檢查元素是否具有不斷的類

回答

相關問題