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

【问题标题】：Navigation text won't change colour when scrolling back up向上滚动时导航文本不会改变颜色
【发布时间】：2017-01-10 22:33:07
【问题描述】：

链接：http://jdfill.me/nrmc/

当您加载页面时，导航文本应该是白色的。当您向下滚动时，我已将文本设置为灰色，这很棒。

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

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

【问题讨论】：

请添加您用来进行颜色转换的代码。

标签： javascript jquery navigation

【解决方案1】：

您可以使用scrollTop()函数来检查用户是否已经滚动到页面顶部。

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

【讨论】：

【解决方案2】：

当您在距页面顶部 50 像素以内时，此脚本应使页面上的文本为白色，但在距页面顶部 50 像素以内的任何其他地方将颜色更改为灰色。

    <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>

【讨论】：

【解决方案3】：

您可以使用在窗口滚动时触发的代码并检查 top-bar-container 元素的顶部偏移量。如果小于等于 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")

   }    
   })

【讨论】：