Question

我在向下滚动时使用headroom.js隐藏我的标题，并在向上滚动时再次显示标题部分。标题部分包含我的徽标和导航按钮。

虽然在我的页面顶部我需要我的导航按钮颜色较深，因为我的背景颜色较浅，向下滚动时我需要导航按钮颜色较浅，因为标题背景颜色较暗。

我在CSS中创建了颜色类来更改按钮颜色。

CSS：

.topColor {color: red;}

.scrollColor {color: white;}

我在这个项目中使用angularjs，所以我使用了headroom.js角度模块和下面的选项。

angular：

<headroom id="header" tolerance="5" offset="205" classes='{"initial":"animated","pinned":"swingInX","unpinned":"swingOutX","top":"headroom--top","notTop":"headroom--not-top"}' >

为了完成更改导航按钮的任务，我尝试了两种不同的方法。

1。）创建了一个指令来检查是否有头部空间（＆＃39;净空 - 不是顶部＆＃39;）以及它是否确实将类（＆＃39; .scrollColor＆＃39;）添加到我的导航按钮（＆＃39;＃navColor＆＃39;）否则添加类（＆＃39; .topColor＆＃39;）。

.directive('headroom', function(){
    return{
        restrict:'E',

        link: function(scope, element, attrs){

            if($(element).hasClass('headroom--not-top'))
            {
                $('#navColor').addClass('.scrollColor');
            }else{
               $('#navColor').addClass('.topColor');
            }
        }
    }
});

2.）然后我尝试了这种方法......

.directive('headroom', function(){
        return{
            restrict:'E',

            link: function(scope, element, attrs){

                if($(element).hasClass('headroom--not-top'))
                {
                    $scope.myNavColor = "scrollColor";
                }else{
                    $scope.myNavColor = "topColor";
                }
            }
        }
    });

导航html

<li><a id="navColor" ng-class="{current: isCurrentPath('/')}"  active class = "{{myNavColor}}"  ng-href="#/">Home</a></li>

两次尝试都没有对我有用，但是第一次尝试确实将按钮更改为白色，但是当我向下滚动时它没有改变。我相信问题是$（元素）没有被识别，或者我只是完全错误地接近这个任务？

Answer 1

我找到了解决这个＆＃34;问题的解决方案＆＃34;用CSS！ headroom.js使用两个类来检测标题何时位于页面顶部以及何时滚动（不是顶部），因此我提供了以下CSS。

header.headroom--not-top ul li a{
    color: red;
}

header.headroom--top ul li a{
    color: white;
}

Answer 2

在我的情况下（使用bootstrap中的nav类）：

nav.headroom--not-top  { color: red; background-color: lightgrey; opacity: .8 }
nav.headroom--top  { color: white }

它有效，但理想的情况是，当nabber下降时，颜色是背景颜色的补色。不是吗？也许在jQuery中......

向上滚动和向下滚动时导航按钮的颜色更改

2 个答案: