如何在元素到达屏幕顶部之前隐藏元素？ window.onscroll = function()

问题描述

< script >
  document.getElementById("bottommenu").style.bottom = "-10vh";
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos < currentScrollPos) {
      document.getElementById("bottommenu").style.bottom = "-10vh";
    } else {
      document.getElementById("bottommenu").style.bottom = "0";
    }
    if (currentScrollPos == 0) {
      document.getElementById("bottommenu").style.bottom = "-10vh";
    }
    prevScrollpos = currentScrollPos;
  }

  <
  /script>

<style>body,html {
  height: 100%;
  margin: 0;
  font-family: 'Karla';
  font-size: 22px;
}

* {
  Box-sizing: border-Box;
}

.container1 {
  height: 10vh;
  background-color: white;
  z-index: 100;
  position: absolute;
  top: 0;
}

.header {
  margin-left: 190px;
  margin-top: 40px;
  text-align: left;
  opacity: 0.4;
  z-index: 100;
}

.backgroundimage {
  background-image: url("M0000-021-014_edited.jpg");
  /* Full height */
  height: 100vh;
  /* Center and scale the image nicely */
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.7;
  position: relative;
}

.leftthing {
  width: calc(100% - 400px);
  float: left;
}

.leftthing img {
  width: 100%;
}

.clear {
  clear: both;
}

.show {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  Box-sizing: border-Box;
  font-family: "Poppins",sans-serif;
}

.container {
  height: 10vh;
  background-color: white;
}

a {
  text-decoration: none;
  font-family: 'Karla';
}

a:visited {
  text-decoration: none;
}


/*        menu*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: transparent;
  height: 10vh;
  margin-right: 30px;
  margin-bottom: 30px;
}

li {
  float: right;
}

li a {
  display: block;
  color: black;
  text-align: center;
  text-decoration: none;
  opacity: 0.4;
  padding: 16px 16px;
  margin-left: 30px;
  margin-right: 30px;
  transition: 0.2s;
}

li a:hover,li a:focus {
  color: black;
  opacity: 1;
}


/*        menu moving footer*/

#bottommenu {
  position: fixed;
  z-index: 100;
  /*            margin-left: 60px;*/
  bottom: 0px;
  background-color: transparent;
  /*            padding: 0px;*/
  /*            text-align: left;*/
  width: 100%;
  display: block;
  transition: bottom 0.5s;
  height: 10vh;
}

</style>

<!DOCTYPE html>
<html>

<head>
  <Meta name="viewport" content="width=device-width,initial-scale=1">
  <Meta charset="UTF-8">
</head>

<body>
  <div class="backgroundimage"></div>
  <div class="container1">
    <div class="header">
      <div class="logo" onclick="scrollWin()">|bacheva
      </div>
    </div>
  </div>

  <div class="leftthing">
    <img src="82213112_611171039713397_1145784978357878784_n.jpg" alt="building concept">
    <img src="INTERIOR%20RENDER.jpg" alt="interior render">
    <img src="exterior%20render.jpg" alt="exterior render">
    <img src="big%20ground%20floor%20plan.jpg" alt="floor plan">
    <img src="READY%20climATE%20SCHEME.jpg" alt="climate scheme">
  </div>

  <div class="clear"></div>


  <div class="container">
    <ul style="font-family: 'Karla';font-size:22px;">
      <li><a href="about_final.html">|about</a></li>
      <li><a href="project%20page_final.html">|work</a></li>
      <li><a href="home_final.html">|home</a></li>
    </ul>
  </div>

  <div id="bottommenu">
    <ul style="font-size:22px;">
      <li><a href="about_final.html">|about</a></li>
      <li><a href="project%20page_final.html">|work</a></li>
      <li><a href="home_final.html">|home</a></li>
    </ul>
  </div>

</body>

</html>

我有以下页面：

我全屏背景图片
向下滚动时一些带有图片的内容
和右下角的菜单（高度为 10vh）

我正在使用执行以下操作的 javascript 函数：向下滚动时不显示菜单，但向上滚动内容时，菜单出现在右下角。当您到达顶部的全屏背景图片时，菜单将再次隐藏以不遮挡图片。但是，目前当您到达页面顶部时，您会在菜单再次隐藏之前看到一毫秒。因此，我的问题是：我是否可以交替使用 javascript 功能并告诉菜单在到达全尺寸背景图片之前消失 10vh，这样当我到达页面顶部时我就看不到它了。

这是我正在使用的功能：

<script>
    document.getElementById("bottommenu").style.bottom = "-10vh";
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
        var currentScrollPos = window.pageYOffset;
        if (prevScrollpos < currentScrollPos) {
            document.getElementById("bottommenu").style.bottom = "-10vh";
        } else {
            document.getElementById("bottommenu").style.bottom = "0";
        }
        if (currentScrollPos == 0) {
            document.getElementById("bottommenu").style.bottom = "-10vh";
        }
        prevScrollpos = currentScrollPos;
    }
</script>

查看最后一个 'if' 菜单在当前滚动为 '0' 时消失，但我希望它在到达最后一个可能的滚动之前（在到达全屏背景图片之前）消失。

预先感谢您的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript menu onscroll