logo标签列表

如何在不使用jQuery的情况下实时获取scrollTop位置？

javascript
3

我希望用CSS特效来美化我的导航栏。我有以下样式类：

.bg-a1{
   background-color: #23e896;
   color: white;
}
.bg-a2{
   background-color: #1cb374;
   color: white;
   animation: all 0.3 ease-in-out;
}
.pad-nav-a{
   padding: 30px;
}
.pad-nav-b{
   padding: 20px;
   animation: all 0.3 ease-in-out;
}

现在，我想在scrollTop > 10时添加类< strong>pad-nav-b和bg-a2。 我通常使用jQuery：

$(document).ready(function () {

   $(window).scroll(function () {
      var scrollTop = $(window).scrollTop();

      if (scrollTop >= 10) {
         $('#navbar').addClass('pad-nav-b bg-a2');
         $('#navbar').removeClass('pad-nav-a bg-a1');
      } else {
         $('#navbar').removeClass('pad-nav-b bg-a2');
         $('#navbar').addClass('pad-nav-a bg-a1');
      }

   });
});

现在，我想仅使用本机JavaScript。 如何像jQuery一样实时跟踪scrollTop？

2个回答
3
你可以给窗口添加一个scroll事件监听器，然后从navbar元素中add/remove类，例如：
const navbar = document.getElementById("navbar");
window.addEventListener('scroll', function(e) {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop >= 10) {
    navbar.classList.add('pad-nav-b', 'bg-a2');
    navbar.classList.remove('pad-nav-a', 'bg-a1');
  } else {
    navbar.classList.remove('pad-nav-b', 'bg-a2');
    navbar.classList.add('pad-nav-a', 'bg-a1');
  }
});
3

你甚至可以监听滚动事件：

const navbar = document.getElementById("navbar");
window.addEventListener("scroll", function(event) {
    var top  = window.pageYOffset || document.documentElement.scrollTop,
    left = window.pageXOffset || document.documentElement.scrollLeft;
    console.log(top,left);
    if (top >= 10) {
        console.log('applying...........')
        navbar.classList.add('pad-nav-b', 'bg-a2');
        navbar.classList.remove('pad-nav-a', 'bg-a1');
    } 
    else {
        console.log('removing...........')
        navbar.classList.remove('pad-nav-b', 'bg-a2');
        navbar.classList.add('pad-nav-a', 'bg-a1');
    }
}, false);
<html>
    <head>
       <style>
        .bg-a1{
            background-color: #23e896;
            color: white;
        }
        .bg-a2{
            background-color: #1cb374;
            color: white;
            animation: all 0.3 ease-in-out;
        }
        .pad-nav-a{
            padding: 30px;
        }
        .pad-nav-b{
            padding: 20px;
            animation: all 0.3 ease-in-out;
        }
        body {
            background-color: lightblue;
            height:3000px;
        }
        </style>
    </head>
    <body>
        <div id="navbar">nav bar</div>
    </body>
<html>

您可以看到它实际上是起作用的...

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接