divが表示されているかどうか確認します。表示されている場合は、ウィンドウの上部に移動します。

Question

私は、ユーザーが最後のスライドに当たったときに内容を自動的にスクロールします。次に、ユーザは、バックアップswiperの内容と一部からスクロールした場合、私はそれは、ウィンドウの最上部までスクロールしたいビューにある

heroSwiper.on('onReachEnd', function(){ 

    setTimeout(function(){ 
     $('html,body').animate({ 
     scrollTop: $(".section").offset().top 
     }); 
     heroSwiper.lockSwipes(); 
     heroSwiper.disableMousewheelControl(); 
    }, 100); 

}); 

heroMediaSwiper.on('onReachEnd', function(){ 

    setTimeout(function(){ 
     $('html,body').animate({ 
     scrollTop: $(".section").offset().top 
     });  
     heroMediaSwiper.lockSwipes(); 
     heroMediaSwiper.disableMousewheelControl(); 
    }, 100); 

}); 

：この部分はことを行います。 理論的には、フルスクリーンのスワイパーまたはメインコンテンツのいずれかが表示されます。

$(window).scroll(function(){ 
    setTimeout(function(){ 
    if ($('#hero').isOnScreen(0.3, 0.3) == true) { 

     $('html,body').animate({ 
      scrollTop: $("#hero").offset().top 
      heroSwiper.slideTo(0);  
      heroSwiper.enableMousewheelControl(); 
      heroSwiper.unlockSwipes(); 
      heroMediaSwiper.slideTo(0); 
      heroMediaSwiper.enableMousewheelControl(); 
      heroMediaSwiper.unlockSwipes(); 
     });   
    }; 
    }, 100);  
}); 

瞬間、それはまっすぐにバックアップするメインコンテンツにスクロールダウン：ヒーローバナーの一部が表示されている場合

このは、ウィンドウの上部にユーザーを取得することになっていますページの上部に移動します。

$.fn.isOnScreen = function(){ 

    var win = $(window); 

    var viewport = { 
     top : win.scrollTop(), 
     left : win.scrollLeft() 
    }; 
    viewport.right = viewport.left + win.width(); 
    viewport.bottom = viewport.top + win.height(); 

    var bounds = this.offset(); 
    bounds.right = bounds.left + this.outerWidth(); 
    bounds.bottom = bounds.top + this.outerHeight(); 

    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom)); 

}; 

それともこれを行うためのより良い方法があるならば、私に知らせてください!!：

これは、何かが表示されているかどうかを確認するためのスクリプトです

Answer 1

あなたは、ウィンドウのスクロールハンドラの呼び出しを絞ることができます。また、animate関数がスクロール自体を引き起こしているときに、スクロールハンドラを完全にバイパスしたいとします。

スクロールハンドラを使用する場合は、underscoreを使用している場合にアクセスできる_.throttle（またはデバウンス）をお勧めします。 underscore annotated sourceから_.throttle（それに依存する_.nowと一緒に）のソース定義をコピーすることもできます。

$(function() { 
    var THROTTLE_TIME = 10; // throttle the window scroll handler 
    var timer = null; // clearTimeout(timer) if you want to cancel it 
    var waiting = false; 

    $(window).scroll(_.throttle(function(){ 
    // the animation takes time, so wait for it to complete 
    if(waiting) return; 

    if ($('#hero').isOnScreen(0.3, 0.3) == true) { 
     waiting = true; // we're going to do the animation 
     // could do clearTimeout(timer) here, but waiting takes care of that 
     timer = setTimeout(function(){ 
     var done = false; 
     $('html,body').animate({ 
      scrollTop: $("#hero").offset().top 
      }, 
      function() { 
      // executed twice (once for html and once for body) 
      waiting = false; // animation is complete 
      if(!done) { 
       done = true; // only want to run this stuff once: 
       heroSwiper.slideTo(0);  
       heroSwiper.enableMousewheelControl(); 
       heroSwiper.unlockSwipes(); 
       heroMediaSwiper.slideTo(0); 
       heroMediaSwiper.enableMousewheelControl(); 
       heroMediaSwiper.unlockSwipes(); 
      } 
      } 
     ); 
     }, 100); 
    } 
    }, THROTTLE_TIME)); 
}); 

Answer 2

現在、これらの条件が満たされるたびにタイムアウトが発生します。しかし、以前のタイムアウトをキャンセルしているわけではありません。だから、すべてのタイムアウトが最終的に引き起こされ、それはおそらくあなたが望むものではありません。ここでは抜粋です：あなたはこのような何かを呼び出す各タイムアウトの

//Declare a timeout variable outside those functions that is visible to all of them 
var myTimeout; 

：

clearTimeout(myTimeout); 
myTimeout = setTimeout(function(){ 
    /* your code goes here */ 
},/* your timer goes here */);