Question

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

jQuery文档描述了.position（）函数，如下所示，

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

.offset（）方法描述如下

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

我在这里收集的是.position()应该是相对于父级的，而offset()始终是相对于文档的。{/ p>

我试图让我的菜单按钮相对于固定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，所以当您“点击”时无需再次添加。这可能就是为什么你会变得不稳定的行为。

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

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

1 个答案: