jQuery position（）。頂部行爲與offset（）相同頂部在固定父級

Question

我試圖使位置感知滾動條使用固定div的頂部值而不是窗口。

jQuery的文檔描述了.POSITION（）函數，如下所示，

的.POSITION（）方法允許我們以檢索的元件（特別是其餘量盒）相對的當前位置到偏移父

的.offset（）方法是描述如下

獲取所述第一元件的當前座標，或者設置的每一個的座標元素，在匹配元素集合中，相對於文檔。

我在這裏收集的是.position()應該是相對於父親，而offset()總是相對於文檔。

我想讓我的菜單按鈕相對於當前滾動的位置在固定的div，而不是窗口。然而，我從.position().top似乎從來沒有與固定div的匹配.scrollTop()

這裏是我的問題在它的小提琴。如果我切換相對於窗口的工作，一切都很好。

第二我試圖使它相對於父div，然後它只是無用。

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

對於adversed小提琴，這裏是代碼！

任何見識都被讚賞！

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

它看起來像你的最大的問題是，你的。對獲得頭的偏移量與（ 'scroll'）以及容器scrollTop（）。這意味着他們每次滾動時都會「刷新」。您需要在文檔加載時存儲初始偏移，然後運行滾動。

此外，因爲您已經基於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'); 
    } 
    }); 
});