向上滚动和向下滚动时导航按钮的颜色变化 [英] color change of navigation buttons when scrolling up and when scrolling down

问题描述

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

I am using headroom.js to hide my header when scrolling down and make my header section visible again when scrolling up. The header section contains my logo and navigation buttons.

在页面顶部，我需要我的导航按钮是一个更深的颜色，因为我的背景颜色是一个更轻，当向下滚动我需要我的导航按钮是较浅的颜色，因为标题背景颜色较暗。

While at the top of my page I need my navigation buttons to be a darker color because my background color is a lighter, and when scrolling down i need my navigation buttons to be a lighter color because the header background color is darker.

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

I have created colors classes in CSS to change the button colors.

CSS：

.topColor {color: red;}

.scrollColor {color: white;}

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

I'm using angularjs for this project, so i'm using headroom.js angular module and the option below.

angular：

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

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

In an attempt to accomplish the task of changing my navigation buttons, I tried two different approaches.

1。）创建一个指令，检查headroom是否有Clas（'headroom - not-top'），如果没有添加class（'.scrollColor'导航按钮（'#navColor'），否则添加类（'.topColor'）。

1.) Created a directive to check if headroom hasClas('headroom--not-top') and if it did add class ('.scrollColor') to my navigation buttons ('#navColor') otherwise add class ('.topColor').

.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。）然后我尝试了这种方法...

2.) I then tried this approach...

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

            link: function(scope, element, attrs){

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

nav in html

nav in html

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

这两个尝试都不适合我，但是第一次尝试改变了按钮白色，但当我向下滚动它没有改变。我相信问题是$（元素）不被识别，或者我只是接近这个任务完全错了吗？

Neither attempt worked for me, however the first attempt did change the button white, but when i scrolled down it did not change. I believe the problem is $(element) is not being recognized, or am I just approaching this task completely wrong?

推荐答案

我发现使用CSS的这个问题的解决方案！ headroom.js使用两个类来检测报头是在页面的顶部，当它滚动（不是顶部）时，所以我提供了以下CSS。

I found a solution for this "issue" using CSS! headroom.js uses two classes to detect when the header is at top the page and when it's scrolling (not a the top), so I provided the following CSS.

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

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

这篇关于向上滚动和向下滚动时导航按钮的颜色变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！