jquery setInterval lub przewinąć

Question

Pracuję nad projektem, gdzie muszę słuchać przypadku scroll .. Zastanawiam się, co jest lepszym rozwiązaniem ..

1-ta Podejście

function scroll() { 
    if ($(window).scrollTop() > 200) { 
     top.fadeIn(); 
    } else { 
     top.fadeOut(); 
    } 
    if (menuVisible) { 
     quickHideMenu(); 
    } 
} 

2-ta Podejście

 function scroll() { 
      didScroll = true; 
     } 

     setInterval(function() { 
      if (didScroll) { 
       didScroll = false; 
       if ($(window).scrollTop() > 200) { 
        top.fadeIn(); 
       } else { 
        top.fadeOut(); 
       } 
       if (menuVisible) { 
       quickHideMenu(); 
       } 
      } 
     }, 250); 

Dzięki :)

Answer 1

Ani. Właśnie czytałem o wzorach JS/jQuery. Jest to przykład dla zdarzenia Okno Scroll: jQuery Window Scroll Pattern

var scrollTimeout; // global for any pending scrollTimeout 

$(window).scroll(function() { 
    if (scrollTimeout) { 
     // clear the timeout, if one is pending 
     clearTimeout(scrollTimeout); 
     scrollTimeout = null; 
    } 
    scrollTimeout = setTimeout(scrollHandler, 250); 
}); 

scrollHandler = function() { 
    // Check your page position 
    if ($(window).scrollTop() > 200) { 
     top.fadeIn(); 
    } else { 
     top.fadeOut(); 
    } 
    if (menuVisible) { 
     quickHideMenu(); 
    } 
}; 

Pierwotnie stąd: Javascript Patterns

Answer 2

To działało w porządku dla mnie

<style type="text/css"> 
    .scrollToTop { 
     width:100px; 
     height:130px; 
     padding:10px; 
     text-align:center; 
     background: whiteSmoke; 
     font-weight: bold; 
     color: #444; 
     text-decoration: none; 
     position:fixed; 
     top:75px; 
     right:40px; 
     display:none; 
     background: url('arrow_up.png') no-repeat 0px 20px; 
    } 

.scrollToTop:hover{ 
    text-decoration:none; 
} 

</style> 

<script> 
$(document).ready(function(){ 

    //Check to see if the window is top if not then display button 
    $(window).scroll(function(){ 
     if ($(this).scrollTop() > 100) { 
      $('.scrollToTop').fadeIn(); 
     } else { 
      $('.scrollToTop').fadeOut(); 
     } 
    }); 

    //Click event to scroll to top 
    $('.scrollToTop').click(function(){ 
     $('html, body').animate({scrollTop : 0},800); 
     return false; 
    }); 
}); 
</script> 

<a href="#" class="scrollToTop">Scroll To Top</a> 

http://www.paulund.co.uk/how-to-create-an-animated-scroll-to-top-with-jquery