jQuery position（）。top offset（）と同じように動作します。固定親の中にあります。

Question

ウィンドウの代わりに固定divのトップ値を使用した位置認識スクロールバーを作成しようとしていました。

次のようにjQueryのドキュメントは.position（）関数を記述し、

.position（）メソッドは、私たちはオフセット親に対して元素（特にそのマージンボックス）の現在位置を取得することができ

.offset（）メソッドは

最初の要素の現在の座標を取得し、又はすべての座標を設定し、次のように記述しています要素と一致する要素のセット内の、ドキュメントに対する相対的な要素。私はここに集まっています何

offset()は常にドキュメントに相対的である一方で、.position()が親に相対的でなければならないということです。

私は、固定されたdivの現在のスクロール位置に対して、メニューボタンをハイライトにしようとしていますが、ウィンドウは表示しません。しかし、私が戻って.position().topから取得しています。ここ一定のdivの.scrollTop()

と一致すると思われることはありませんすることはそれで私の問題とフィドルです。私がウィンドウに相対して作業するように切り替えると、すべてがうまくいきます。

私は親のdivに相対的にしようとすると、それはただひそかに行く。 adversedフィドルのために

https://jsfiddle.net/cs83083/0kb5tm41/6/

、ここにコードがあります！

洞察力がありがとう！

HTML

<div class="wrapper"> 
    <div class="menu-left"> 
    <div class="menu-item" data-target="sec1"> 
     Section 1 
    </div> 
    <div class="menu-item" data-target="sec2"> 
     Section 2 
    </div> 
    <div class="menu-item" data-target="sec3"> 
     Section 3 
    </div> 
    <div class="menu-item" data-target="sec4"> 
     Section 4 
    </div> 
    </div> 

    <div class="page-content"> 
    <h2 class="header" id="sec1">Section 1</h2> 
    <div class="text-block"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
     enim ad minim veniam, quis nostrud exercitation ullamco laboris 
     nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 

    </div> 

    <h2 class="header" id="sec2">Section 2</h2> 
    <div class="text-block"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
     enim ad minim veniam, quis nostrud exercitation ullamco laboris 
     nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 

    </div> 

    <h2 class="header" id="sec3">Section 3</h2> 
    <div class="text-block"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
     enim ad minim veniam, quis nostrud exercitation ullamco laboris 
     nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 

    </div> 

    <h2 class="header" id="sec4">Section 4</h2> 
    <div class="text-block"> 

     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
     eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
     enim ad minim veniam, quis nostrud exercitation ullamco laboris 
     nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
    </div> 
    </div> 
</div> 

CSS

html, 
body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

.wrapper { 
    padding-left: 240px; 
    display: block; 
} 

.menu-left { 
    background-color: #CCC !important; 
    height: 100%; 
    display: block; 
    width: 240px; 
    margin-left: -240px; 
    position: fixed; 
    z-index: 1000; 
} 

.page-content { 
    background-color: #666; 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    padding: 10px; 
    overflow: scroll; 
} 

.menu-item { 
    border-bottom: 1px solid #000; 
    padding: 10px; 
} 

.menu-item:first-child { 
    border-top: 1px solid #000; 
} 

.text-block { 
    border: 1px solid #000; 
    width: 600px; 
    display: block; 
    padding: 10px; 
} 

.menu-item:hover, 
.active { 
    background: #666; 
    color: #fff; 
} 

JavaScriptを

それはあなたの最大の問題のように見えます

container = $(".page-content"); 

$(".menu-item").click(function(e) { 
    data_target = $(e.target).attr("data-target"); 
    container.animate({ 
    scrollTop: $("#" + data_target).offset().top - container.offset().top + container.scrollTop() 
    }, 2000); 
}); 

$('.menu-item').on('click', function(event) { 
    $('.menu-item').removeClass('active'); 
    $(this).addClass('active'); 
}); 

container.on('scroll', function() { 
//$(window).on('scroll', function() { 
    $('.header').each(function() { 

    if(container.scrollTop() >= $(this).offset().top) { 
    //if(container.scrollTop() >= $(this).position().top) { 
    //if ($(window).scrollTop() >= $(this).offset().top) { 
     var id = $(this).attr('id'); 
     $('.menu-item').removeClass('active'); 
     $('div[data-target=' + id + ']').addClass('active'); 
    } 
    }); 
}); 

Answer 1

は、あなたが（.on中で、ヘッダーのオフセットを取得しているということです'scroll'）をスクロールします。これは、あなたがスクロールするたびに両方とも「リフレッシュ」することを意味します。ドキュメントの読み込み時に初期オフセットを保存してから、スクロールを実行する必要があります。

また、既にscrollTopに基づいてaddClass/removeClassを設定しているため、クリックすると再度追加する必要はありません。それはたぶんあなたが不安定な行動を取っている理由です。

Here is the pen I drafted up

var headerIds = []; 
var headerOffset = []; 

$('.header').each(function(){ 
    headerIds.push(this.id) 
    headerOffset.push($(this).offset().top) 
}) 

$(".menu-item").click(function(e) { 
    data_target = $(e.target).attr("data-target"); 
    container.animate({ 
    scrollTop: $("#" + data_target).offset().top - container.offset().top + container.scrollTop() 
    }, 2000); 
}); 

$(container).on("scroll", function(e) { 
    headerIds.forEach(function(el, i){ 
    if ($(container).scrollTop() > (headerOffset[i]-20)) { 
     $('.menu-item').removeClass('active'); 
     $('.menu-item:nth-of-type(' + (i + 1) + ')').addClass('active'); 
     var id = $(this).attr('id'); 
    } 
    }); 
});