CODEWITHSUNDEEP
jqueryperformanceoptimization
Lucky Soni
Lucky Soni

Reputation: 6888

jquery setInterval or scroll

I am working on a project where i need to listen to the scroll event.. i wonder what is a better approach..

1st Approach

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

2nd Approach

      function scroll() {
          didScroll = true;
      }

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

Thanks :)

Upvotes: 10

Views: 11891

Answers (2)

Mauricio Ferraz
Mauricio Ferraz

Reputation: 191

It worked fine for me 

<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

Upvotes: 0

davebobak
davebobak

Reputation: 253

Neither. I was just reading about JS/jQuery patterns. There is an example for the Window Scroll event: 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();
    }
};

Originally from here: Javascript Patterns

Upvotes: 19

Related Questions