Question

我尝试在我的网站上制作一个导航栏，该导航栏的标题是透明的，然后滚动，然后将其颜色更改为某种颜色，然后我编写了一些js代码以达到此目的，但是在我的情况下，我有一个一个小问题，当我在页面上滚动并返回到标题时，导航栏不再返回透明并且仍然带有颜色，仅在启动或刷新时透明

   <script>    
    var x = document.getElementById("navy");
    window.onscroll = function(){
        if(document.body.scrollTop >= 200)
        {
            x.classList.add("transparent")
            x.classList.remove("scrolled")
        }
        else
        {
            x.classList.add("scrolled")
            x.classList.remove("transparent")
        }
    };
   </script>

Answer 1

首先，您希望返回标题时它是透明的，以便if else语句的顺序错误。

        if(document.body.scrollTop >= 200)
        {
            x.classList.add("scrolled") //when its >= 200 it means the user is 
            x.classList.remove("transparent") //scrolling downwards
        }
        else
        {

            x.classList.add("transparent") //so I swapped your classes for you
            x.classList.remove("scrolled")
        }

第二，document.body.scrollTop并不是检查用户滚动位置的全部方法，我发现使用一些类似skrollr源代码中的命令的组合对我来说非常有效。

Skrollr.prototype.getScrollTop = function() {
        if(_isMobile) {
            return _mobileOffset;
        } else {
            return window.pageYOffset || documentElement.scrollTop || body.scrollTop 
                   || 0;
        }
    };

这是源代码上的github链接：https://github.com/Prinzhorn/skrollr/blob/b98d40820b9864be275e81af382045d72cc5a08a/src/skrollr.js#L627

Answer 2

http://jsfiddle.net/L561fzdj/

var x = document.getElementById("navy");
window.addEventListener("scroll", function(){
    if(window.pageYOffset >=100){
        x.classList.remove("transparent");
      x.classList.add("scrolled");
    }
    else{
      x.classList.add("transparent");
      x.classList.remove("scrolled");
    }
}, false)

透明导航栏

2 个答案: