jQuery position（）。top与固定父级内部的offset（）。top相同

Question

我试图制作一个位置固定的滚动条，该滚动条使用固定div的最大值而不是窗口。

jQuery文档对.position（）函数的描述如下，

.position（）方法允许我们检索元素相对于偏移父级的当前位置（特别是其边距框）

.offset（）方法描述如下

获取第一个元素的当前坐标，或设置匹配元素集中相对于文档的每个元素的坐标。

我在这里收集的是.position()应该相对于父对象，而offset()总是相对于文档。

我试图使菜单按钮相对于固定div中当前滚动位置而不是窗口突出显示。 但是我从.position().top似乎从未与固定div的.scrollTop()相匹配

这是我的问题的小提琴。 如果我将其切换为相对于窗口工作，则一切正常。

第二个我尝试使其相对于父div，然后它只是一团糟。

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（）。 这意味着它们每次滚动时都会“刷新”。 您需要在文档加载时存储初始偏移量，然后运行滚动。

另外，由于您已经基于scrollTop设置了addClass / removeClass，因此您无需在单击时再次添加它。 这可能就是为什么您行为不稳定的原因。

这是我起草的笔

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');
    }
  });
});