滚动的三种情况 - if 内的函数

Question

我需要在导航栏上设置三个不同的背景：

1. 如果页面滚动小于 400 像素则无背景

2.如果页面滚动超过400px，两种不同的颜色： a) 向下滚动时为蓝色 b) 向上滚动时为绿色。

我试过使用下面的代码，但是好像在我输入第一个 IF 后，即使页面小于 400px，该功能仍然有效。

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

    function scrollFunction() {



    if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) { 
    
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
    var currentScrollPos = window.pageYOffset; 
    if (prevScrollpos > currentScrollPos) {
    document.getElementById("nav1").style.background = "rgba(0, 41, 51,1)";
    } else {
    lastScroll = currentScroll;
    document.getElementById("nav1").style.background = "rgba(68,78,36,1)";
    }
    prevScrollpos = currentScrollPos;
    } else {
document.getElementById("nav1").style.background = "rgba(0,0,0,0)";
}
}

谢谢！

Answer 1

您可以使用这个脚本：

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

  function myFunction() {
    if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
      var lastScrollTop = 0;

      window.addEventListener("scroll", function () {
        var st = window.pageYOffset || document.documentElement.scrollTop;
        if (st > lastScrollTop) {
          document.getElementById("nav").style.background = "rgba(0, 41, 51,1)";
        } else {
          document.getElementById("nav").style.background = "rgba(68,78,36,1)";
        }
        lastScrollTop = st <= 0 ? 0 : st;
      }, false);
    } else {
      document.getElementById("nav").style.background = "rgba(0,0,0,0)";
    }
  }
</script>

Answer 2

不要尝试将两个函数分配给 window.onscroll，这是一个属性，只能容纳一个函数。

这是您当前代码的情况：

声明了一个匿名函数（它调用 scrollFunction）并分配给 window.onscroll
在第一次滚动时，调用 scrollFunction。如果页面尚未滚动超过 400px，则不会执行 if 块。
一旦页面超过 400px，就会声明 prevScrollpos...然后之前分配给 window.onscroll 的功能将被新功能覆盖。

这就是之后没有进行 400px 比较的原因。它不属于第二个功能。第一个迷失在虚无中

这是您想要实现的目标：

// This variable needs to be global
let prevScrollpos = 0;

// This getElement can also be global
let nav1 = document.getElementById("nav1")

function scrollFunction() {

  // This varable needs to be local
  let currentScrollPos = window.pageYOffset;

  if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {

    // Determine scroll direction
    if (prevScrollpos > currentScrollPos) {
      nav1.style.background = "rgba(0, 41, 51,1)";
    } else {
      nav1.style.background = "rgba(68,78,36,1)";
    }
  }
  
  // If below 400px
  else {
    nav1.style.background = "rgba(0,0,0,0)";
  }
  
  // Update this variable for the next iteration
  prevScrollpos = currentScrollPos;
  
  // For this demo only
  console.clear()
  console.log(currentScrollPos)
}

// Assign the scrollFunction reference to the window property
window.onscroll = scrollFunction;

body {
  height: 1000px;
}

#nav1{
  position: sticky;
  top: 4px;
  height: 100px;
  border: 1px solid black;
}

<div id="nav1"></div>

滚动的三种情况 - if 内的函数

Three cases on scroll - function inside an if

javascript

css

jquery

scroll

function