向上滚动和向下滚动时导航按钮的颜色变化

Posted 2023-04-13

【中文标题】向上滚动和向下滚动时导航按钮的颜色变化

【英文标题】：color change of navigation buttons when scrolling up and when scrolling down

【发布时间】：2015-06-07 19:37:52

【问题描述】：

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

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

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

CSS：

.topColor color: red;

.scrollColor color: white;

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

角度：

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

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

1.) 创建了一个指令来检查 headroom hasClas('headroom--not-top') 是否添加类 ('.scrollColor') 到我的导航按钮 ('#navColor') 否则添加类 ( '.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.) 然后我尝试了这种方法...

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

这两种尝试都不适合我，但是第一次尝试确实将按钮更改为白色，但是当我向下滚动时它并没有改变。我相信问题是 $(element) 没有被识别，或者我只是完全错误地处理这个任务？

【问题讨论】：

您使用的是限制“A”，但您正在使用该指令作为限制“E”。

@dowomenfart 我已将限制更改为“E”，但它仍然不适合我。

您是否在控制台中遇到任何错误？

没有控制台错误。净空类属性与标准不同，它使用类。你认为这可能是导致问题的原因吗？ '代码'

只是想知道你能在 jsfiddle 或 plunkr 中重新创建它吗？真的很高兴看到这个代码在行动。

【参考方案1】：

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

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


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

【参考方案2】：

就我而言（使用引导程序中的导航类）：

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

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