Scrollspy以顯示我不在頁面上使用jQuery代碼的位置

Question

我目前正在嘗試使用以下代碼將滾動間諜添加到我的WordPress一頁布局中，但是當我向下滾動頁面時沒有任何反應。

代碼唯一要做的就是刪除活動類。

(function( $ ){
    $("nav ul li a").addClass("marker");    
    var navLinks = $('nav ul li a'),
        navH = $('nav').height(),
        section = $('section'),
        documentEl = $(document);        
        documentEl.on('scroll', function() {            
            var currentScrollPos = documentEl.scrollTop();            
            section.each(function() {
               var self = $(this);
               if (self.offset().top < (currentScrollPos + navH ) && (currentScrollPos + navH) < (self.offset().top + self.outerHeight())) {
                   var targetClass = '.' +self.attr('class') + 'marker';
                   navLinks.removeClass('active');
                   $(targetClass).addClass('active');
               }                
            });            
        });
})(jQuery);

我只是在活動班級中添加了深色背景，以便在向下滾動每個部分時看到菜單項的顏色發生變化。

.active{
    background-color:#000;
}

如何正確應用滾動間諜？

Answer 1

嘗試將您的js包裝在dom ready語句中

jQuery(function(){
    $("nav ul li a").addClass("marker");    
    var navLinks = $('nav ul li a'),
        navH = $('nav').height(),
        section = $('section'),
        documentEl = $(document);        
        documentEl.on('scroll', function() {            
            var currentScrollPos = documentEl.scrollTop();            
            section.each(function() {
               var self = $(this);
               if (self.offset().top < (currentScrollPos + navH ) && (currentScrollPos + navH) < (self.offset().top + self.outerHeight())) {
                   var targetClass = '.' +self.attr('class') + 'marker';
                   navLinks.removeClass('active');
                   $(targetClass).addClass('active');
               }                
            });            
        });
});