堆栈内存溢出
  繁体   English   中英

到达导航栏 CSS 和 Javascript 时停止图像滚动

[英]Stop the Image Scrolling when it reached Nav bar CSS and Javascript

 原文  2022-06-11 01:42:06  4   1    javascript/ html/ css

问题描述

我试图弄清楚如何使用javascript和css在图像到达导航栏之前阻止图像移动/向上滚动。 但它仍然可以向下滚动。

我将非常感谢您提前提供的任何帮助，谢谢。 我附上了欲望输出的图像

输出欲望

我的代码如下

https://codesandbox.io/s/html-css-navbar-forked-06mjm0?file=/src/styles.css

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navigation Bar</title>
    <link rel="stylesheet" href="../src/styles.css" />
  </head>
  <body>
    <nav>
      <div class="logo">
        <a href="#">Brand name</a>
      </div>
      <div class="menuIcon">
        <div class="line"></div>
        <div class="line"></div>
        <div class="line"></div>
      </div>
      <ul class="nav-links">
        <li class="nav-item active"><a href="#">Home</a></li>
        <li class="nav-item"><a href="#">Services</a></li>
        <li class="nav-item"><a href="#">About</a></li>
        <li class="nav-item"><a href="#">Contact</a></li>
      </ul>
    </nav>
    <div class="mainSec">
      <div id="animatedDiv"></div>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

index.js

    var aDiv = document.getElementById("animatedDiv");

function changeWidth() {
  var scrollVal = window.pageYOffset;

  //Changing CSS Width

  /* This lags if you scroll fast.. aDiv.style.width = (100 - (scrollVal*100/800)) + "%"; 
  I just tried it out, so instead use the code down above, 800 to 1500 doesn't matter, I just increased time of animation
*/
  //NOTE this line checks if PERCENT <= 10 then sets width to 10%
  50 - (scrollVal * 100) / 1500 <= 10
    ? (aDiv.style.width = "10%")
    : (aDiv.style.width = 50 - (scrollVal * 100) / 1500 + "%");
}

window.addEventListener(
  "scroll",
  function () {
    requestAnimationFrame(changeWidth);
  },
  false
);

const menuIcon = document.querySelector(".menuIcon");
const menuIcons = document.querySelectorAll(".menuIcon .line");
const navLinks = document.querySelector(".nav-links");
const items = document.querySelectorAll(".nav-links li");
const logo = document.querySelector(".logo");
menuIcon.addEventListener("click", () => {
  navLinks.classList.toggle("open");
  logo.classList.toggle("close");
  items.forEach((item) => {
    item.classList.toggle("fade");
  });
  menuIcons.forEach((Icon) => {
    Icon.classList.toggle("open");
  });
});

const menu = document.querySelector(".nav-links");
const menuItems = document.querySelectorAll(".nav-links li");

menuItems.forEach((item) => {
  item.addEventListener("click", function () {
    menu.querySelector(".active").classList.remove("active");
    item.classList.add("active");
  });
});

样式.css

   .mainSec {
  width: 100%;
  display: flex;
  justify-content: center;
}
#animatedDiv {
  background: url("https://media.tenor.com/images/34b16b199449136a845ea0300ff2cef3/raw")
    no-repeat;

  min-height: 200vh;
  width: 50%;
  position: absolute;
  margin-top: 20%;
}
#secondPage {
  background: url("https://www.downloadclipart.net/large/doraemon-png-free-download.png")
    no-repeat;
  display: block;
  width: 50%;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

nav {
  position: fixed;
  height: 10vh;
  background-color: rgb(12, 77, 151);
  display: flex;
  align-items: center;
  width: 100%;
}

nav .logo a {
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  display: flex;
  text-align: center;
  margin: 0px 10px;
}
nav .nav-links {
  list-style: none;
  margin-left: auto;
}
.nav-links li {
  display: inline-block;
}

.nav-links .active {
  background-color: black;
  border: 2px solid black;
  border-radius: 10px;
}
nav .nav-links li a {
  color: white;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 0px 10px;
}

@media screen and (max-width: 768px) {
  nav {
    position: relative;
    display: block;
  }
  .logo {
    height: 10vh;
    display: flex;
    align-items: center;
  }
  .logo a {
    text-align: center;
  }
  nav .menuIcon {
    position: absolute;
    cursor: pointer;
    top: 30%;
    right: 5%;
  }
  nav .menuIcon .line {
    width: 30px;
    margin: 5px 0px;
    height: 3px;
    background-color: white;
    position: relative;
  }
  nav .menuIcon .line:nth-child(1).open {
    transform: rotate(45deg);
    width: 40px;
    height: 5px;
    left: 0px;
    top: 16px;
    transition: all 1s ease;
  }
  nav .menuIcon .line:nth-child(2).open {
    opacity: 0;
  }
  nav .menuIcon .line:nth-child(3).open {
    transform: rotate(-45deg);
    width: 40px;
    height: 5px;
    transition: all 1s ease;
  }
  nav .nav-links {
    margin-top: -10px;
    padding: 0px;
    height: 90vh;
    width: 100%;
    background-color: rgb(12, 77, 151);
    display: flex;
    align-items: center;
    flex-direction: column;
    clip-path: circle(50px at 90% -10%);
    -webkit-clip-path: circle(50px at 90% -10%);
    transition: all 1s ease-out;
  }
  .nav-links li {
    margin: 40px 0px;
  }
  nav .nav-links.open {
    clip-path: circle(1000px at 90% -10%);
    -webkit-clip-path: circle(1000px at 90% -10%);
  }
  .nav-links li {
    opacity: 0;
  }
  .nav-links li a {
    font-size: 25px;
  }
  .nav-links li:nth-child(1) {
    transition: all 0.5s ease 0.2s;
  }
  .nav-links li:nth-child(2) {
    transition: all 0.5s ease 0.4s;
  }
  .nav-links li:nth-child(3) {
    transition: all 0.5s ease 0.6s;
  }
  .nav-links li:nth-child(4) {
    transition: all 0.5s ease 0.8s;
  }
  li.fade {
    opacity: 1;
  }
  .logo.close {
    visibility: hidden;
  }
}

1 个解决方案

解决方案1
 1 已采纳  2022-06-11 03:23:43

#animatedDiv 的最小高度应该设置为 87vh 而不是 200vh它对我有用。 无需更改 JS。 查看输出：访问在此处输入图像描述 

 var aDiv = document.getElementById("animatedDiv"); function changeWidth() { var scrollVal = window.pageYOffset; //Changing CSS Width /* This lags if you scroll fast.. aDiv.style.width = (100 - (scrollVal*100/800)) + "%"; I just tried it out, so instead use the code down above, 800 to 1500 doesn't matter, I just increased time of animation */ //NOTE this line checks if PERCENT <= 10 then sets width to 10% 50 - (scrollVal * 100) / 1500 <= 10 ? (aDiv.style.width = "10%") : (aDiv.style.width = 50 - (scrollVal * 100) / 1500 + "%"); } window.addEventListener( "scroll", function() { requestAnimationFrame(changeWidth); }, false ); const menuIcon = document.querySelector(".menuIcon"); const menuIcons = document.querySelectorAll(".menuIcon .line"); const navLinks = document.querySelector(".nav-links"); const items = document.querySelectorAll(".nav-links li"); const logo = document.querySelector(".logo"); menuIcon.addEventListener("click", () => { navLinks.classList.toggle("open"); logo.classList.toggle("close"); items.forEach((item) => { item.classList.toggle("fade"); }); menuIcons.forEach((Icon) => { Icon.classList.toggle("open"); }); }); const menu = document.querySelector(".nav-links"); const menuItems = document.querySelectorAll(".nav-links li"); menuItems.forEach((item) => { item.addEventListener("click", function() { menu.querySelector(".active").classList.remove("active"); item.classList.add("active"); }); });
 .mainSec { width: 100%; display: flex; justify-content: center; } #animatedDiv { background: url("https://media.tenor.com/images/34b16b199449136a845ea0300ff2cef3/raw") no-repeat; display: block; min-height: 87vh; width: 50%; position: absolute; margin-top: 25%; z-index: 4; } #secondPage { background: url("https://www.downloadclipart.net/large/doraemon-png-free-download.png") no-repeat; display: block; width: 50%; } body { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; } nav { position: fixed; height: 10vh; background-color: rgb(12, 77, 151); display: flex; align-items: center; width: 100%; z-index: 6; } nav .logo a { color: white; font-size: 1.5rem; text-decoration: none; display: flex; text-align: center; margin: 0px 10px; } nav .nav-links { list-style: none; margin-left: auto; } .nav-links li { display: inline-block; } .nav-links .active { background-color: black; border: 2px solid black; border-radius: 10px; } nav .nav-links li a { color: white; text-decoration: none; font-size: 1rem; font-weight: 500; padding: 0px 10px; } /*responsive*/ @media screen and (max-width: 768px) { nav { position: relative; display: block; } .logo { height: 10vh; display: flex; align-items: center; } .logo a { text-align: center; } nav .menuIcon { position: absolute; cursor: pointer; top: 30%; right: 5%; } nav .menuIcon .line { width: 30px; margin: 5px 0px; height: 3px; background-color: white; position: relative; } nav .menuIcon .line:nth-child(1).open { transform: rotate(45deg); width: 40px; height: 5px; left: 0px; top: 16px; transition: all 1s ease; } nav .menuIcon .line:nth-child(2).open { opacity: 0; } nav .menuIcon .line:nth-child(3).open { transform: rotate(-45deg); width: 40px; height: 5px; transition: all 1s ease; } nav .nav-links { margin-top: -10px; padding: 0px; height: 90vh; width: 100%; background-color: rgb(12, 77, 151); display: flex; align-items: center; flex-direction: column; clip-path: circle(50px at 90% -10%); -webkit-clip-path: circle(50px at 90% -10%); transition: all 1s ease-out; } .nav-links li { margin: 40px 0px; } nav .nav-links.open { clip-path: circle(1000px at 90% -10%); -webkit-clip-path: circle(1000px at 90% -10%); } .nav-links li { opacity: 0; } .nav-links li a { font-size: 25px; } .nav-links li:nth-child(1) { transition: all 0.5s ease 0.2s; } .nav-links li:nth-child(2) { transition: all 0.5s ease 0.4s; } .nav-links li:nth-child(3) { transition: all 0.5s ease 0.6s; } .nav-links li:nth-child(4) { transition: all 0.5s ease 0.8s; } li.fade { opacity: 1; } .logo.close { visibility: hidden; } }
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Navigation Bar</title> <link rel="stylesheet" href="../src/styles.css" /> </head> <body> <nav> <div class="logo"> <a href="#">Brand name</a> </div> <div class="menuIcon"> <div class="line"></div> <div class="line"></div> <div class="line"></div> </div> <ul class="nav-links"> <li class="nav-item active"><a href="#">Home</a></li> <li class="nav-item"><a href="#">Services</a></li> <li class="nav-item"><a href="#">About</a></li> <li class="nav-item"><a href="#">Contact</a></li> </ul> </nav> <div class="mainSec"> <div id="animatedDiv"></div> </div> <script src="src/index.js"></script> </body> </html>

如果您更改 CSS 以提高响应能力，那将是最好的。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Javascript：导航栏在向上滚动并到达顶部时消失 滚动时导航栏模糊 如何修复导航栏，以便在该人未查看导航栏时删除菜单？ | CSS / Javascript 使用 css/javascript 滚动时如何模糊图像？ 滚动时导航栏的跳动/缓动动画 缓慢滚动时，粘性导航栏闪烁 滚动时导航栏样式闪烁 当到达文档中的不同点时，导航栏突出显示适当的链接 隐藏导航栏在滚动时不隐藏，我希望它在我通过 javascript 滚动时切换 无需锚点和带有图像映射的导航栏的平滑滚动
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM