Javascript jQuery position（）.top的行为与offset（）相同。top在固定父对象中

我试图制作一个位置感知滚动条，它使用固定div的顶部值而不是窗口

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

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

.offset（）方法描述如下

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

我在这里收集的是

.position（）

应该是相对于父对象的，而

offset（）

始终是相对于文档的

我试图使我的菜单按钮相对于固定div中当前滚动位置而不是窗口的高亮度。然而，我从

.position（）.top

中得到的信息似乎与固定div的

.scrollTop（）

这是我的问题所在。如果我切换到相对于窗口的工作状态，一切都会很好

第二次我尝试使它相对于父div，然后它就失控了

这是给受苦受难的人的密码

任何洞察都将不胜感激

HTML

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

---

看起来最大的问题是，您正在获得.on（'scroll'）中标题的偏移量以及容器scrollTop（）。这意味着每次滚动时，它们都会“刷新”。您需要在文档加载时存储初始偏移量，然后运行滚动

另外，因为您已经基于scrollTop设置了addClass/removeClass，所以在“单击”时不需要再次添加它。这可能就是您行为不稳定的原因

---

问题是

container.scrollTop（）

和

$（this）.offset（）.top

在滚动时不断变化，因此您需要以某种方式存储每个标题的原始

offset（）.top

，以便针对

container.scrollTop

对其进行测试

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

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

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