Question

我有一个网站页面，其中包含100%宽度和高度的四个部分，我正在使用scrollify，因此浏览器窗口始终会捕捉到某个部分。

我有一个固定的标题，我只想在中间的两个部分（#b和#c）中查看时显示。
我想让这个标题淡入淡出。它应该在时间段#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

您可以使用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/

Answer 2

你可以通过jquery解决它。你必须捕获部分加载事件并检查部分id。如果它是#a或#d你必须使用：

if(id == "a" or id == "b")
{
   $("#header").hide();
}
else{
   $("#header").show();
}

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

2 个答案: