2017-04-24 9 views
0

data-scroll-speed=を使用して、特定のdivのスクロール速度を制御しています。 データスクロール速度がタグとして入力されます。特定の瞬間からのデータスクロール速度の開始

<div id="myDiv1" data-scroll-speed="3">this is a test</div>. 

私がしたいことはdiv要素は、データ・スクロール速度によって制御さスクロール速度を採用していないということですそれまでは別のdivの(ID =「myDiv2」) bottom egdeはブラウザウィンドウの下端の上にあります。それ以外の場合、myDiv1は通常の速度でスクロールする必要があります。これはどのように達成できますか?

+0

あなたは、ウィンドウのスクロールイベントで何かを試して開始し、ここにあるいくつかの高さを確認することができます – Cr1xus

答えて

0

$(function() { 
 
    var $myDiv1 = $('#myDiv1'); 
 
    var $myDiv2 = $('#myDiv2'); 
 

 
    var bottom = $myDiv2.position().top + $myDiv2.outerHeight(true); 
 
    
 
    $(window).on('scroll', function() { 
 
    if ($(this).scrollTop() >= bottom) { 
 
     console.log('Scroll Speed Set!'); 
 
    } 
 
    }); 
 
});
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 

 
body { 
 
    height: 800px; 
 
    border: 1px solid black; 
 
    padding: 20px; 
 
} 
 

 
div { 
 
    padding: 25px; 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
#myDiv2 { 
 
    margin-top: 50px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="myDiv1" data-scroll-speed="3">this is a test</div> 
 
<div id="myDiv2">myDiv2</div>

関連する問題