データスクロール速度タグを追加したり削除したりすることはできますか？

Question

別のdiv（例のmyDiv2）の下端がブラウザウィンドウの下端より上にスクロールされているときに、タグdata-scroll-speed="3"（myDiv1）をdivに追加できますか？また、myDiv2の下端がブラウザの下端より下にスクロールされると、data-scroll-speed="3"タグを再度削除します。これは可能ですか？

#myDiv1 { 
 
    font-size: 5em; 
 
    margin-top: 70vh; 
 
    display: inline-block; 
 
} 
 

 
#myDiv2 { 
 
    height: 120vh; 
 
    width: 100vw; 
 
    background-color: orange; 
 
    z-index: -1; 
 
    display: inline-block; 
 
} 
 

 
#myDiv3 { 
 
    height: 500px; 
 
    width: 100vw; 
 
    background-color: grey; 
 
}

<div id="myDiv2"> 
 
    <div id="myDiv1"> 
 
    hello, i am myDiv1 
 
    </div> 
 
</div> 
 
<div id="myDiv3"> 
 
</div>

Answer 1

この情報がお役に立てば幸いです。私はこれにJQueryを使用しました。

data-scroll-speedという属性が追加されていることに注意してください。残りはあなた:)素晴らしい

$(window).scroll(function() { 
 
    if ($(window).scrollTop() > $('#myDiv2').height() - $(window).height()) { 
 
    $("#myDiv1").attr("data-scroll-speed", "3"); 
 
    } else { 
 
    $("#myDiv1").removeAttr("data-scroll-speed"); 
 
    } 
 
    console.log($("#myDiv2").html()); 
 
});

#myDiv1 { 
 
    font-size: 5em; 
 
    margin-top: 70vh; 
 
    display: inline-block; 
 
} 
 

 
#myDiv2 { 
 
    height: 120vh; 
 
    width: 100vw; 
 
    background-color: orange; 
 
    z-index: -1; 
 
    display: inline-block; 
 
} 
 

 
#myDiv3 { 
 
    height: 500px; 
 
    width: 100vw; 
 
    background-color: grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="myDiv2"> 
 
    <div id="myDiv1"> 
 
    hello, i am myDiv1 
 
    </div> 
 
</div> 
 
<div id="myDiv3"> 
 
</div>