javascript - CSS JS 表示 なし 変更 div

Question

私はワンページャーを持っています。そして、その1ページャーには、display:none（divの固定サイドナビゲーション）として設定されたアイテムがあります。

特定の div にスクロールするときに表示することはできますか?

コードで開始されますが表示されず、ユーザーがスクロールする#aboutとサイド ナビゲーションが表示されますか?

Answer 1

基本的に、ユーザーが about の div id まで、またはそれを超えてスクロールしたかどうかを確認する必要があります。最初に、div の現在の Y 値を確立する必要があります。

//cache about div
var about = $('#about');
//this caches the about div position on window load
var aboutPosition = about.position();

次に、ユーザーがスクロールした距離を特定する必要があります。これを達成するために私が決定した最善の方法は、タイマーを使用することです。scoll イベントを使用することもできますが、ユーザーのブラウザーに負担がかかりすぎて、タイマーはほとんどの場合区別できません。

//generic timer set to repeat every 10 mili(very fast) 
//with a callback to execute the logic
var checkScrollPos = window.setInterval("scrollTopLogic()",10);

function scrollTopLogic(){
    //if about y position is greater than or equal to the 
    //current window scroll position do something
    if(aboutPosition.y >= $(window).scrollTop()){
        $('nav').show();
        //remove timer since it is no longer needed
        window.clearInterval(checkScrollPos);
    }
}

Answer 2

divのスクロールイベントをキャッチして、このような要素を表示できます

$("#div").scroll(function() {
   $("#item").show();
});