在不觸發

Question

滾動事件我已在在以下幾點：http://www.alessandrosantese.com/aldemair-productions/project.html

$('.main-wrapper').on('scroll', function(){ 
    console.log('ffsdfsd'); 
}); 

但它不燒，我需要作爲主包裝擊中頭部，這樣我可以做「次級導航」儘快知道也是固定的。

這幾乎工作： 「（ '脫帆布包裝'）。$ scrollTop的（）」

// $('.off-canvas-wrapper').on('scroll', function(){ 
// console.log($('.off-canvas-wrapper').scrollTop()); 
// if($('.off-canvas-wrapper').scrollTop() == 418 || $('.off-canvas-wrapper').scrollTop() > 417) { 
//  $('.secondary-nav').addClass('fixed-nav'); 
// } 
// else { 
//  $('.secondary-nav').removeClass('fixed-nav'); 
// } 
// }); 

但遺憾的是基於當窗口大小上的變化。

Answer 1

我認爲這可能是由你應用該事件的錯誤元素引起的。試試這個：

$(window).on('scroll', function(){ 
    console.log('ffsdfsd'); 
}); 

Answer 2

問題是你將滾動事件附加到你的.main-content元素。

根據jQuery documentation，滾動事件僅適用於窗口對象，可滾動框架/元素。

當用戶滾動到元素中的不同位置時，將滾動事件發送到元素。它適用於窗口對象，但也 以滾動框架和元素與溢出CSS屬性設置 滾動

嘗試連接scroll事件到窗口對象和檢查scrollTop VS的.main-content頂部。

$(function() { 
 

 
    var $main = $(".main-wrapper"), 
 
    top = $main.offset().top; 
 

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

 
    if (top < scrollTop) { 
 
     // apply css to fix navigation 
 
     alert('affix navigation'); 
 
     $('.secondary-nav').addClass('fixed-nav'); 
 
    } else { 
 
     $('.secondary-nav').removeClass('fixed-nav'); 
 
    } 
 
    } 
 

 
    $(window).scroll(affix); 
 

 
});

.top-content { 
 
    height: 500px; 
 
} 
 
.main-wrapper{ 
 
    height: 800px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="top-content"> 
 
    <p>scroll down</p> 
 
</div> 
 
<div class="main-wrapper"> 
 
    <p>content here</p> 
 
</div>