waypoints 多个元素 - 更新 header

Question

我正在使用 waypoints 在用户向下滚动图像列表时更改 headers 文本。当图像滚动到 50% 视口高度 (50vh) 时，由其 data-title 属性设置的相关文本用于更新主 header。

向下滚动时它工作正常，但是当您向上滚动时 header 不同步 - 我希望 header 仅在其位于相关图像上方时显示。

var headerPoint = $(".project").waypoint(
  function(direction) {
    var title = this.element.getAttribute("data-title");
    $("#header").text(title);
  },
  {
    offset: "50%"
  }
);

h1 {
  position:fixed;
left: 50%;
top:50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
  text-align:center;
}

#projects {
  margin:0 auto;
  width:400px;
  padding-top:400px;;
}
.project {
  background:pink;
  width:400px;
  height:600px;
  margin-bottom:100px;
}



* {
  margin:0;
  padding:0;
  box-sizing: border-box
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>

<h1 id="header">Header one</h1>

<div id="projects">
  <div data-title="Header one" class="project">1</div>
  <div data-title="Header two" class="project">2</div> 
  <div data-title="Header three" class="project">3</div> 
  <div data-title="Header four" class="project">4</div>  
</div>

Answer 1

可以设置两个waypoints并检查方向

对于向下你是正确的，对于向上我的解决方案更改 header 当 div 的底部到达视口底部时。不是在触及 header.

底部时

您可以尝试其他一些 offset 值，我相信您会得到您想要的。这是一个方便的 documentation

这是一个工作示例

var headerPoint = $(".project");

headerPoint.waypoint({
  handler: function(direction) {
    if (direction === 'down') {
      var title = this.element.getAttribute("data-title");
      $("#header").text(title);
    }
  },
  offset: '50%'
});

headerPoint.waypoint({
  handler: function(direction) {
    if (direction === 'up') {
      var title = this.element.getAttribute("data-title");
      $("#header").text(title);

      //console.log($(window).height());
      //console.log(this.element.clientHeight);
    }
  },
  offset: 'bottom-in-view'
});

h1 {
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%) -webkit-transform: translateY(-50%);
  transform: translateY(-50%) text-align:center;
}

#projects {
  margin: 0 auto;
  width: 400px;
  padding-top: 400px;
  ;
}

.project {
  background: pink;
  width: 400px;
  height: 600px;
  margin-bottom: 100px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>

<h1 id="header">Header one</h1>

<div id="projects">
  <div data-title="Header one" class="project">1</div>
  <div data-title="Header two" class="project">2</div>
  <div data-title="Header three" class="project">3</div>
  <div data-title="Header four" class="project">4</div>
</div>

编辑

现在它完全按照您想要的方式工作（当底部位于屏幕中间时向上触发）。

var headerPoint = $(".project");

headerPoint.waypoint({
  handler: function(direction) {
    if (direction === 'down') {
      var title = this.element.getAttribute("data-title");
      $("#header").text(title);
    }
  },
  offset: '50%'
});

headerPoint.waypoint({
  handler: function(direction) {
    if (direction === 'up') {
      var title = this.element.getAttribute("data-title");
      $("#header").text(title);

      //console.log($(window).height());
      //console.log(this.element.clientHeight);
    }
  },
  offset: function() {
    return -this.element.clientHeight + ($(window).height()/2);
  }
});

h1 {
  position: fixed;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%) -webkit-transform: translateY(-50%);
  transform: translateY(-50%) text-align:center;
}

#projects {
  margin: 0 auto;
  width: 400px;
  padding-top: 400px;
  ;
}

.project {
  background: pink;
  width: 400px;
  height: 600px;
  margin-bottom: 100px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>

<h1 id="header">Header one</h1>

<div id="projects">
  <div data-title="Header one" class="project">1</div>
  <div data-title="Header two" class="project">2</div>
  <div data-title="Header three" class="project">3</div>
  <div data-title="Header four" class="project">4</div>
</div>

waypoints 多个元素 - 更新 header

waypoints on multiple elements - updating header

javascript

jquery

scroll

jquery-waypoints