Question

加载页面时，导航文本为白色，应该是白色。当你向下滚动时，我已经做到了，所以文字是灰色的，这很棒。

但是，当您向上滚动到浏览器的顶部时，导航文本不会返回白色。相反，它保持灰色。

当您滚动回浏览器顶部时，如何将导航文本设为白色？

Answer 1

您可以使用scrollTop()功能检查用户是否已滚动回页面顶部。

$(document).on("scroll",function()
    {               
    if($("body").scrollTop()===0)
    {
    //function for changing the color
    }
    });

Answer 2

当您距离页面顶部50个像素内时，此脚本应该使页面上的文本为白色，但是在距离页面顶部不超过50个像素的任何其他位置将颜色更改为灰色。 / p>

    <script type="text/javascript">
    function scrollcolor() {
        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
            document.getElementById("text").style.color = "white";
        } else {
            document.getElementById("text").style.color = "grey";
        }
    }
    window.addEventListener('scroll', scrollcolor);
    </script>

Answer 3

您可以使用此代码在窗口滚动时触发并检查顶部条形容器元素的顶部偏移量。如果小于等于89则它会给出除第一个链接白色之外的所有导航。

我已经在您的网站页面上对此进行了测试，希望这有帮助

   $(window).on("scroll",function(){

   if($(".top-bar-container").offset().top <= 89)
   {
      $("#menu-main-nav li a").not(":first").css("color","#ffffff")
   }
   else
   {
     $("#menu-main-nav li a").css("color","#333333")

   }    
   })

向上滚动时，导航文本不会改变颜色

3 个答案: