9

私はscrollイベントを聞く必要があるプロジェクトに取り組んでいます..私はより良いアプローチは何であるか疑問に思います..

最初のアプローチ

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

2番目のアプローチ

      function scroll() {
          didScroll = true;
      }

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

ありがとう ：）

4

2 に答える 2

19

ない。JS/jQueryパターンについて読んでいたところです。ウィンドウスクロールイベントの例があります：jQueryウィンドウスクロールパターン

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();
    }
};

もともとここから：Javascriptパターン

于 2013-03-23T19:31:27.997 に答える
0

それは私にとってはうまくいきました 

<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

于 2015-06-23T13:39:52.090 に答える