1

我有一个网站页面，有四个部分，100%宽度和高度，我正在使用滚动，所以浏览器窗口总是捕捉到一个部分。

  1. 我有一个固定的标题，我只想在中间两个部分（#b和#c）中的任何一个都在视图中时显示。

  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>

4

2 回答 2

1

您可以使用before滚动事件。在这种情况下，您应该使用该方法获得当前幻灯片您可以在此处$.scrollify.current();找到所有可用的方法！根据您的幻灯片，您可以隐藏或显示标题。只需使用构造。例子：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/

于 2015-11-16T09:24:46.350 回答
0

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

if(id == "a" or id == "b")
{
   $("#header").hide();
}
else{
   $("#header").show();
}
于 2015-11-16T09:22:28.343 回答