divの下部がブラウザウィンドウの下にスクロールしたときに属性を追加する

Question

他のdiv（id="one"）がブラウザウィンドウの下にスクロールすると、特定のdiv（id="text1"）に属性を追加したいとします。 「1」の下端がブラウザウィンドウの下端より下にスクロールすると、再び属性を削除する必要があります。

この私が希望の属性が追加されたり削除されます。

data-scroll-speed="2" 

See example here

Answer 1

第一：あなたはjqueryの

第二を含める必要があります：あなたは、ウィンドウを使用する必要がありますscrollイベント

第三： を[HERE]（HTTPS：// stackoverflowのデモ

$(document).ready(function(){ 
 
    $(window).on('scroll' , function(){ 
 
    var WindowScrollTop = $(this).scrollTop(), 
 
     Div_one_top = $('#one').offset().top, 
 
     Div_one_height = $('#one').outerHeight(true), 
 
     Window_height = $(this).outerHeight(true); 
 
    if(WindowScrollTop >= (Div_one_top + Div_one_height) - WindowScrollTop){ 
 
     $('#one').css('background' , 'red'); 
 
     $('#text1').removeAttr('data-scroll-speed'); 
 
    }else{ 
 
     $('#one').css('background' , 'black'); 
 
     $('#text1').attr('data-scroll-speed', '2'); 
 
    } 
 
    }).scroll(); 
 
});

#one { 
 
    height: 120vw; 
 
    width: 100%; 
 
    top: 0px; 
 
    background-color: pink; 
 
} 
 

 
#text1 { 
 
    width: 100%; 
 
    font-size: 9em; 
 
    margin-top: 100vw; 
 
    position: absolute; 
 
\t color:white; 
 
} 
 

 
#two { 
 
    height: 50vw; 
 
    width: 100%; 
 
    top: 0px; 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="one"> 
 
    <div id="text1"> 
 
     this is my text 
 
    </div> 
 
</div> 
 
<div id="two"> 
 

 
</div>