javascript - 使用 jquery/javascript 和 scrollify 在查看某些部分时显示 div

Question

我有一个包含四个部分的网站页面，宽度和高度分别为 100%，并且我正在使用 scrollify，以便浏览器窗口始终捕捉到一个部分。

1. 我有一个固定标题，我只想在中间两个部分(#b 和 #c)处于 View 中时显示它。

2. 我希望此页眉淡入淡出。它应该在#a 或#d 被捕捉到的时间部分消失。

我是编写 Javascript 的新手，因此非常感谢能与我的代码片段一起使用的功能齐全的解决方案。

$(function() {
  $.scrollify({
    section: "section",
    easing: "swing",
    scrollSpeed: 500,
    offset: 0,
    scrollbars: true,
    before: function() {},
    after: function() {},
    afterResize: function() {}
  });
});

body {
  width: 100%;
  margin: 0;
}
#header {
  background: rgba(0, 0, 0, 0.8);
  z-index: 1;
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
}
section {
  width: 100%;
  height: 100vh;
}
#a {
  background: #aaa;
}
#b {
  background: #bbb;
}
#c {
  background: #ccc;
}
#d {
  background: #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/0.1.11/jquery.scrollify.min.js">
</script>
<div id="header">
</div>
<section id="a">
</section>
<section id="b">
</section>
<section id="c">
</section>
<section id="d">
</section>

Answer 1

您可以使用 scrollify 的 before 事件。在这种情况下，您应该使用 $.scrollify.current(); 方法获取当前幻灯片。您可以找到所有可用的方法 here !根据您的幻灯片，您可以隐藏或显示标题。只需使用 if (){} else {} 构造。示例:

if (currentSlide != 1 || currentSlide != 3) {
 header.show();
} else {
 header.hide();
}

或者只是在标题中添加一些类

if (currentSlide != 1 || currentSlide != 3) {
 header.addClass('is-shown');
} else {
 header.removeClass('is-shown');
}

https://jsfiddle.net/2Lo92L6s/