Question

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

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

所以我决定尝试更改页面滚动的CSS，我环顾四周，发现这个指令返回滚动位置并使用滚动位置我可以< strong>使用 ng-class 更改CSS 。

   /**
     * 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();
            }
        };
    })

上面的代码可以工作，但是我遇到了另一个问题，在我的主页上，标题的高度与其他页面不同，因为我的网站响应，标题大小可能会根据屏幕大小而改变。因此我无法使用固定高度来更改类，如下面的代码所示：

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

我真正想要的是：

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

其中 heightOfHeader 是我的标题区域的高度，可根据屏幕大小而改变。

我已经在线查看了有关如何在页面加载或屏幕大小发生变化时获取标题高度的许多解决方案，但我还没有找到任何解决方案，我尝试的任何内容都会返回0作为标题的高度。< / p>

.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;
                    });
                }
            };

评论代码是我尝试过的旧解决方案，但无效。

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

0 个答案: