Auf Scroll-Ereignisse nicht

Question

Brennen Ich habe folgendes auf: Brennen http://www.alessandrosantese.com/aldemair-productions/project.html

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

aber es ist nicht, ich brauche so schnell zu wissen, als Haupt-Wrapper den Kopfball schlägt, so dass ich „secondary-nav“ machen auch behoben.

Diese fast gearbeitet: "(. 'Off-Leinwand-Wrapper'). $ 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'); 
// } 
// }); 

aber leider ändert sich basierend auf, wenn die Fenstergröße verändert wird.

Answer 1

Ich denke, es könnte durch das falsche Element, an dem Sie das Ereignis anwenden. Versuchen Sie folgendes:

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

Answer 2

Das Problem ist, dass Sie das Scroll-Ereignis zu Ihrem .main-content Elemente sind angebracht.

Gemäß der jQuery documentation funktioniert das Bildlaufereignis nur für die Fensterobjekte scrollbare Frames/Elemente.

Das Bildlaufereignis wird an ein Element gesendet, wenn der Benutzer zu einer anderen Stelle im Element scrollt . Es gilt für Fensterobjekte, sondern auch mit dem Überlauf CSS-Eigenschaft Rahmen und Elemente scrollbaren setzen das Scroll-Ereignis an das Fensterobjekt blättern

Versuchen Befestigung und die scrollTop vs der .main-content oberster Stelle aufgeführt.

$(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>