Javascript:在滚动时添加然后删除超过某个点的类

标签 javascript

我正在尝试使一个对象“粘”在 2 个 div 之间。到目前为止，我所能找到的只允许我在 一个 div 之后，而不是在 另一个 div 之前使对象变粘。

我对 Javascript 不是很熟悉，我查看了许多其他关于 If/else 语句结合和 (&&)/或 (||) 运算符的问题(+ 试图找出如何格式化这些一般陈述)，但到目前为止，还没有骰子。

我尝试在此处修改 w3schools 的代码(如下所示):https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky

我在这里试图实现的是在有人向下滚动并点击页脚顶部后从导航栏中删除粘性类。一旦查看器向上滚动超过导航栏，粘性类也会被删除。

if ((window.pageYOffset < sticky)有效，但是 (window.pageYOffset >= sticky2)没有，而且我真的不确定为什么尽管尝试了几种不同的变体(例如我也尝试过:if (window.pageYOffset >= sticky) && (window.pageYOffset < sticky2))。

有人能指出我正确的方向吗？非常感谢!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-size: 28px;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<div id="navbar">
  <a class="active" href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">News</a>
  <a href="javascript:void(0)">Contact</a>
</div>

<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

<div id="footer">Footer here<br>
addasasd
<br>
radadsad
<br>
Footer here<br>
addasasd
<br>
radadsad
<br>
Footer here<br>
addasasd
<br>
radadsad
<br>
Footer here<br>
addasasd
<br>
radadsad
<br>Footer here<br>
addasasd
<br>
radadsad
<br></div>

<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var footer = document.getElementbyId("footer");
var sticky2 = footer.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
  } if ((window.pageYOffset < sticky) || (window.pageYOffset >= sticky2)) {
    navbar.classList.remove("sticky");
  }
}
</script>

</body>
</html>

下面是我在使用基本相同的代码时遇到的错误的屏幕截图:

enter image description here

最佳答案

错误是 var footer = document.getElementbyId("footer"); 因为方法是 getElementById()。如果您更正您的代码有效:

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
var footer = document.getElementById("footer");
var sticky2 = footer.offsetTop;

function myFunction() 
{
  if (window.pageYOffset >= sticky) 
  {
    navbar.classList.add("sticky");
  } 
  
  if ((window.pageYOffset < sticky) || (window.pageYOffset >= sticky2)) 
  {
    navbar.classList.remove("sticky");
  }
}
body {
  margin: 0;
  font-size: 28px;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<div id="navbar">
  <a class="active" href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">News</a>
  <a href="javascript:void(0)">Contact</a>
</div>

<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

<div id="footer">Footer here<br>
addasasd
<br>
radadsad
<br>
Footer here<br>
addasasd
<br>
radadsad
<br>
Footer here<br>
addasasd
<br>
radadsad
<br>
Footer here<br>
addasasd
<br>
radadsad
<br>Footer here<br>
addasasd
<br>
radadsad
<br></div>
</body>
</html>

下次，如果您启用浏览器控制台 (F12)，您将能够在几秒钟内看到错误。 ;)

在这种情况下，您会看到:

enter image description here

祝你有美好的一天。

关于Javascript:在滚动时添加然后删除超过某个点的类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50714890/

上一篇：javascript - 在没有 Canvas 的情况下获取图像 uint8 数据

下一篇：javascript - 在 pageload 方法之后调用 Document.ready 方法 - Jquery 3.3.2

相关文章：

javascript - 如何在预先存在的折线上放置标记？

javascript - 处理父网页中的 iFrame 事件

javascript - 您遇到过哪些跨浏览器问题？

javascript - 使用 jquery 将 RenderPage 插入到 div 中

javascript - 如何在 JavaScript 中检查未定义或空变量？

javascript - 在加载 css 之后但在下载图像之前运行代码

javascript - 如何在悬停到任何链接时显示/隐藏 div

javascript - 如何根据 ASP.NET Core MVC 中不同下拉菜单中的用户选择填充下拉菜单？

javascript - 带回调的 jQuery 简单函数

javascript - Jquery slideUp 在第一次点击时不起作用

©2024 IT工具网  联系我们