Question

我希望有一个div，当你滚动一定数量的像素而不使用jquery，只使用javascript时会消失。

Answer 1

要从顶部获取滚动位置，可以使用document.pageYOffset属性。要淡入某些内容，你必须使用setInterval，你可以在这里看到它：

How to do fade-in and fade-out with JavaScript and CSS

Answer 2

Jquery 是 Javascript，所以除非你在JS中循环一个监听器（用于滚动）来改变文档对象模型中的某些内容，否则你将发现自己必须使用HTML5 （css3和一些jquery），像这样（来自Codepen）

<强> HTML

<div class="top"><div class="title">Fade Away</div></div>

<强> CSS

body {
  margin: 0;
  height: 1000px;
}

.top {
  margin: 0;
  position: relative;
  width: 100%;
  background-color: #aaa;
  height: 300px;
  opacity: 1;
  text-align: center;
  font-family: 'helvetica';
  font-size: 80px;
  font-weight: 100;
  color: #fff;
}

.title {
  position: absolute;
  top: 60%;
  left: 100px;
}

<强> JS

$(window).scroll(function(){
    $(".top").css("opacity", 1 - $(window).scrollTop() / 250);
  });

您可以使用几个预先编写的视差脚本，例如一个名为skrollr的脚本，它可以让您只添加对JS文件的引用，然后将CSS添加到您的页面代码中：https://prinzhorn.github.io/skrollr/

我希望这有助于您开始使用！

滚动一定量时淡入

2 个答案: