Question

我创建了一个滚动效果，当我滚动到第二页时，只有这样下载按钮才会淡入，滚动到第三页时，按钮会淡入。我有一台屏幕分辨率为1366的笔记本电脑x 768，但是当我的朋友打开网站时，除非他放大，否则他看不到过渡。他的屏幕分辨率为1920 x 1080。现在，我如何确保一旦用户向下滚动到隐藏下载/贡献按钮的位置，那么只有按钮淡入可见性。（这就是说，一种方法可以知道元素何时出现在视图中窗口。） PS。请不要jQuery。想要纯JS解决方案。如果可以解释为什么在不同分辨率的屏幕上发生这个问题，那将会很棒。

var download = document.getElementById("download");
var contribute = document.getElementById("contribute");
document.addEventListener("scroll", checkVisible);

function checkVisible() {
  var scr = window.pageYOffset;
  if (scr >= 400) {
    download.style.opacity = "1";
    download.style.left = "80%";
  }
  if (scr >= 900) {
    contribute.style.opacity = "1";
    contribute.style.left = "5%";
  }
}

* {
  margin: 0;
  padding: 0;
}
body {
  width: 100%;
}
#page1 {
  width: 100%;
  height: 700px;
  position: relative;
  z-index: -2;
  border-bottom: 2px solid black;
}
#title {
  position: relative;
  top: 200px;
  width: 500px;
  height: 90px;
  font-size: 40px;
  margin: 0 auto;
  text-align: center;
  color: white;
  text-shadow: 1px 0 2px black, 0 1px 2px black, -1px 0 2px black, 0 -1px 2px black;
}
#fadetitle {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  border-radius: 10px;
}
#title h1 {
  position: relative;
  z-index: 0;
  top: -5px;
}
#aboutsite {
  position: absolute;
  width: 90%;
  z-index: 0;
  color: white;
  top: 450px;
  text-align: center;
  margin-left: 5%;
  font-size: 25px;
}
#page2 {
  width: 100%;
  height: 500px;
  background-size: cover;
  position: relative;
  border-bottom: 2px solid black;
}
#downloadtext {
  font-size: 25px;
  width: 500px;
  text-align: center;
  color: white;
  position: relative;
  top: 160px;
  left: 35%;
  font-weight: bold;
  text-shadow: 0 0 5px black;
}
.choice {
  display: block;
  width: 180px;
  height: 50px;
  background-color: #4d94ff;
  text-align: center;
  border: 1px solid black;
  border-radius: 15px;
  box-sizing: border-box;
  text-decoration: none;
  position: relative;
}
.choice p {
  margin-top: 15px;
  font-weight: bold;
  color: black;
}
.choice:hover {
  cursor: pointer;
  background-color: #0052cc;
}
#download {
  top: 225px;
  left: 85%;
  opacity: 0;
  transition: background-color 0.2s, left 0.5s ease-out, opacity 0.2s;
}
#page3 {
  width: 100%;
  height: 500px;
  background-attachment: fixed;
  background-size: cover;
  position: relative;
}
#contribute {
  top: 225px;
  left: 1%;
  opacity: 0;
  transition: background-color 0.2s, left 0.5s ease-out, opacity 0.2s;
}
#contributetext {
  font-size: 25px;
  width: 500px;
  text-align: center;
  color: white;
  position: relative;
  top: 160px;
  left: 25%;
  font-weight: bold;
  text-shadow: 0 0 5px black;
}

<html>

<head>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="page1">
    <div id="fade"></div>
    <div id="title">
      <div id="fadetitle"></div>
      <h1</h1>
    </div>
    <p id="aboutsite"></p>
  </div>
  <div id="page2">
    <a id="download" class="choice" href="#">
      <p>DOWNLOAD</p>
    </a>
    <p id="downloadtext"></p>
  </div>
  <div id="page3">
    <a id="contribute" class="choice" href="contribute.html" target="_blank">
      <p>CONTRIBUTE</p>
    </a>
    <p id="contributetext"></p>
  </div>
  <script src="script.js"></script>
</body>

</html>

DOM Transitions不能在不同的分辨率屏幕上工作？

0 个答案: