个人中心
gpt4 book ai didi

javascript - 当用户向上滚动时隐藏动画箭头

转载 作者：行者123 更新时间：2023-12-04 08:13:03 24 4
gpt4 key购买 nike

我正在做一个小元素，我的网站在底部加载，用户“向上”滚动以查看更多内容。为了表明您必须向上滚动，我为一些向上的箭头设置了动画。
我的问题是一旦用户滚动到下一部分，我似乎无法隐藏箭头。
我已经尝试了 z-index 和这里提供的其他一些 Javascript 解决方案，但我无法使其中的任何一个工作。许多其他解决方案是在向下滚动时隐藏菜单然后在向上滚动时重新出现的复杂方法，但是，我正在寻找一种简单的方法来隐藏元素。

document.location.hash = 'landing';

document.onscroll = function() {
  if (window.innerHeight + window.scrollY > document.body.clientHeight) {
    document.getElementById('hide-arrow').style.display = 'none';
  }
}
/* !... GLOBAL ...! */

* {
  margin: 0;
  padding: 0;
}


/* !... BODY ...! */

body {
  font-family: Nonoto, Arial, sans-serif;
  background: #333;
  color: #fff;
  line-height: 1.6;
  height: 100vh;
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}


/* !... NAVIGATION ...! */

.space-nav {
  position: fixed;
  top: 0;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 60px;
  background: rgba(0, 0, 0, 0.7);
}

.space-nav ul {
  display: flex;
  list-style: none;
  width: 100%;
  justify-content: center;
}

.space-nav ul li {
  margin: 0 1rem;
  padding: 0 1rem;
}

.space-nav ul li a {
  text-decoration: none;
}

.space-nav ul li a:hover {
  /* TBD */
}


/* ...ARROWS... */

.arrow {
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translate(-200%, -200%);
}

.arrow span {
  display: block;
  width: 30px;
  height: 30px;
  border-top: 5px solid #ba6081;
  border-left: 5px solid #ba6081;
  transform: rotate(45deg);
  margin: -10px;
  animation: scroll 2s infinite;
}

.arrow span:nth-child(2) {
  animation-delay: -.2s;
}

.arrow span:nth-child(3) {
  animation-delay: -.4s;
}

@keyframes scroll {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/* ..SECTION STYLING ...*/

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
}

section#ready {
  background: url('https://source.unsplash.com/bZZp1PmHI0E/1600x900') no-repeat center center/cover;
  ;
}

section#lift-off {
  background: url('https://source.unsplash.com/VRxo0yY-gyM/1600x900') no-repeat center center/cover;
  ;
}

section#deep-space {
  background: url('https://source.unsplash.com/K2tdx2mFDHc/1600x900') no-repeat center center/cover;
  ;
}

section#landing {
  background: url('test.png') no-repeat center center/cover;
  ;
  overflow: auto;
}


/* !... FONT STYLING ...! */

p {
  font-size: 12px;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 18px;
}
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, inital-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title> A title </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
    <nav class="space-nav">
      <ul>
        <li><a href="#ready">Ready to Launch</a></li>
        <li><a href="#lift-off">Lift Off</a></li>
        <li><a href="#deep-space">Deep-Space</a></li>
        <li><a href="#landing">Landing</a></li>
      </ul>
    </nav>

    <section id="ready">
      <h1>Welcome to my Journey</h1>
      <h2>Prepare for liftoff</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



      </p>
    </section>

    <section id="lift-off">
      <h1>Welcome to my Journey</h1>
      <h2>Prepare for liftoff</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </section>

    <section id="deep-space">
      <h2>Prepare for liftoff</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </section>

    <section id="landing">

      <div class="arrow" id="hide-arrow">
        <span></span>
        <span></span>
        <span></span>
      </div>


      <h2>Prepare for liftoff</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </section>

  </div>



  <script src="main.js"></script>
</body>


</html>

最佳答案

我认为您在为箭头应用 CSS 时犯了一个错误。
您需要在 id="landing"的部分中使用该箭头。所以你只需添加 CSS

#landing{
position : relative;
}
使用此 CSS，您的箭头不会出现在所有部分。

关于javascript - 当用户向上滚动时隐藏动画箭头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65856015/

24 4 0
文章推荐： deployment - Bitrise 构建失败 "Failed to commit edit, error: googleapi: got HTTP response code 502 with body: <!DOCTYPE html>"
文章推荐： python - 如何根据列中的模式填充 Pandas 数据框中的缺失值？
文章推荐： c# - 如何将 XML 数据加载到数据结构中？
文章推荐： html - CSS 网格布局行高 0px 空时
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com