Javascript 使用元素高度更改页面滚动菜单的CSS

您好，在我的页面上，我有三个部分，标题部分包含菜单和滑块区域，红色背景为白色文本，内容区域为白色背景为黑色文本，页脚区域为灰色背景。我的菜单是静态的，这意味着无论你滚动到页面的哪个部分，它都会显示

然而，当我滚动到页面的白色部分时，我的问题就出现了，因为菜单文本在页面的白色部分是白色的，而文本没有显示

所以我决定尝试更改页面滚动上的css，我环顾四周，发现这个指令返回滚动位置，使用滚动位置，我可以使用ng类更改css

上述代码有效，但我面临另一个问题，在我的主页上，页眉的高度不同于其他页面，因为我的网站是响应的，页眉大小可能会根据屏幕大小而变化。因此，我无法使用固定高度来更改类，如下面的代码所示：

ng-class="{ 'topbar': scroll > 200 }"

我真正想要的是：

 ng-class="{ 'topbar': scroll > heightOfHeader }"

其中heightOfHeader是标题区域的高度，它可以根据屏幕大小进行更改

我在网上寻找了很多关于如何在页面加载或屏幕大小改变时获取页眉高度的解决方案，但我还没有找到解决方案，我尝试的任何方法都会返回0作为页眉高度

.directive('elementHeight', function() {
            return {
                scope: {
                    elementHeight: '='
                },
                link: function(scope, element) {
                    /*var windowEl = angular.element($window);
                    var handler = function() {
                        scope.elementHeight = element[0].offsetHeight;
                    }
                    windowEl.on('load', scope.$apply.bind(scope, handler));
                    handler();*/

                    /*$timeout(function(){
                        scope.elementHeight = $('#header').height();
                    });*/

                    $(window).load(function() {
                        scope.elementHeight = element[0].offsetHeight;
                    });
                }
            };

---

注释的代码是我尝试过的旧解决方案，但没有成功。

好的，所以我最终找到了一个解决方案，将我在stackoverflow上找到的几个答案放在一起。对于滚动位置，我保留了我已有的代码：

/**
     * Scroll Position Directive
     */
    .directive('scrollPosition', function($window) {
        return {
            scope: {
                scroll: '=scrollPosition'
            },
            link: function(scope, element, attrs) {
                var windowEl = angular.element($window);
                var handler = function() {
                    scope.scroll = windowEl.scrollTop();
                }
                windowEl.on('scroll', scope.$apply.bind(scope, handler));
                handler();
            }
        };
    })

我在这里找到了这段代码，虽然我自己并不完全理解这里发生的事情，但我对它做了一些修改：

/*
 * Get notified when height changes and change margin-top
 */
.directive( 'elHeightTarget', function($rootScope) {
    return {
        link: function( scope, elem, attrs ) {

            scope.$watch( '__height', function( newHeight, oldHeight ) {
                $rootScope.$broadcast('elHeight', newHeight);
            } );
        }
    }
})

/*
 * Checks every $digest for height changes
 */
.directive( 'elHeightSource', function() {

    return {
        link: function( scope, elem, attrs ) {

            scope.$watch( function() {
                scope.__height = elem.height();
            } );
        }
    }

})

在elHeightTarget指令中，我在作用域内添加了$rootScope.$broadcast.$watch来广播目标元素高度的任何变化

然后在我的主控制器内：

.controller('MainCtrl', ['$http', '$scope', '$state', '$rootScope', function($http, $scope, $state, $rootScope) {

    $scope.height = 0;
    $scope.scroll = 0;

    $scope.$on('elHeight', function(events, args){
        $scope.height = args;
    });

}])

最后，在我的HTML中，我看到使用ng类根据标题的滚动位置和高度更改菜单的类：

<div class="menu-wrapper">
    <div class="menu" scroll-position="scroll" ng-class="{ 'menu-default': scroll < height, 'menu-red': scroll > height  }">
        <div class="container">
            ...
        </div>
    </div>
</div>

这是标题的html，我在其中添加了检查高度变化的指令：

<div id="header" class="header" el-height-target el-height-source>
    ...
</div>

仅此而已：我不知道是否有更简单更好的方法，但这确实解决了我的问题

<div id="header" class="header" el-height-target el-height-source>
    ...
</div>