多个元素上的航点 - 更新标题

Question

当用户向下滚动图像列表时，我使用航点来更改标题文本。当图像滚动到50％视口高度（50vh）时，由其data-title属性设置的相关文本用于更新主标题。

向下滚动时效果正常，但向上滚动时标题不同步 - 我希望标题只显示在相关图像上方。

＆＃13;

＆＃13;

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

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以设置两个航点并检查方向。

对于下降你有正确的，并且当我的解决方案的底部点击视口的底部时，我的解决方案会更改标题。不是在击中标题的底部时。

您可以尝试其他一些offset值，我相信您可以完全达到您想要的效果。这是一个方便的documentation

以下是一个工作示例

＆＃13;

＆＃13;

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

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

修改

现在它的工作方式与您想要的完全一致（当屏幕中间位于底部时触发启动）。

＆＃13;

＆＃13;

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

＆＃13;

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
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;