Javascript 使用AngularJS将div滚动出视图时在导航栏中显示徽标

亲爱的朋友/同事：

正如我在前面的一个问题中提到的，我正在学习AngularJS，我有一个问题

我试图实现以下目标：

我有一个大版本的logo，它位于主体的一个div中，现在，我希望能够在导航栏中显示同一logo的小版本，一旦大版本被滚动出视图，使用AngularJS。我可以用JQuery和scrollSpy来完成这项工作，但是这个项目是AngularJS特有的，我知道AngularJS可以处理这个任务，只是我似乎无法掌握它

---

非常感谢您的帮助

您可以为此编写并使用指令。其中，您应该使用滚动量，并在小徽标的

div

上使用指令返回的滚动量的最小值

ng show

我会尽力为你写指令

.directive('dirScrollTop', function($window, $parse) {
    return {
        scope: {
            scroll: '=dirScrollTop'
        },
        link: function(scope, element, attrs) {
            var windowEl = angular.element($window);
            var handler = function(e) {
                scope.scroll = $window.pageYOffset;
            }
            windowEl.on('scroll', scope.$apply.bind(scope, handler));
            handler();
        }
    };
})

在html中，将其写入

或

或。。。包含以下徽标的：

并检查指令内的距离，并直接返回布尔值。所以它是这样的：

html将如下所示：

更新：

如果我没有错的话，当窗口的滚动使较大的图像离开视图时，您希望显示/隐藏这两个图像

对于html：

---

当大图像完全看不见时（当其底部到达视图顶部时），将显示徽标。如果希望在较大图像的顶部到达视图顶部时发生这种情况，则应将

元素[0].getBoundingClientRect（）.bottom

替换为

元素[0].getBoundingClientRect（）.top

在指令内。

好的，这是我编写的，应该可以工作，但是否可以代替pageYoffset，要将所有这些应用于特定的div id

var handler = function(e) {
     var someValue = element[0].getBoundingClientRect().top;
     var scrollOffset = $window.pageYOffset;
     scope.scroll = $window.pageYOffset > someValue;
}

编辑：

以下是我所做的，可能是错误的：

<div dir-scroll-top="scrollVariable" ng-show="scrollVariable">

编辑2

这是我想展示的徽标：

$scope.scrollVariable = false;

当这一个滚动出视图时：

logoShow.directive('dirScrollTop', function($window, $parse) {
return {
    scope: {
        scroll: '=dirScrollTop'
    },
    link: function(scope, element, attrs) {
        var windowEl = angular.element($window);
        var someValue = element[0].getBoundingClientRect().bottom;
        var handler = function(e) {
            var scrollOffset = element[0].scrollTop;
            scope.scroll = scrollOffset > someValue;
        };
        windowEl.on('scroll', scope.$apply.bind(scope, handler));
        handler();
    }
};
});

我已经编写了一个适用于pageYoffset的指令，但当页面处于移动视图中时，该指令并不适用，这就是为什么我需要帮助将该指令应用于元素的原因。如果可能的话，我将不胜感激。是否可以将相同的逻辑应用于div，如果要检查元素的滚动量（并且元素的

overflow-y

被设置为

scroll

），而不是页面的滚动量，则只需使用

元素[0].scrollTop

在处理程序中，而不是在

$window中。pageYOffset

您还应该在该滚动元素上放置

dir scroll top=“scrollVariable”

，并在另一个元素的

ng show中使用
滚动变量。我知道这是太多的要求，但有没有机会你可以为我完成这段代码，它应该是，我会非常感激，请。html代码呢？当滚动另一个
div
时，是否要显示小徽标？（而不是整个页面的滚动）
$scope.scrollVariable = false;

logoShow.directive('dirScrollTop', function($window, $parse) {
return {
    scope: {
        scroll: '=dirScrollTop'
    },
    link: function(scope, element, attrs) {
        var windowEl = angular.element($window);
        var someValue = element[0].getBoundingClientRect().bottom;
        var handler = function(e) {
            var scrollOffset = element[0].scrollTop;
            scope.scroll = scrollOffset > someValue;
        };
        windowEl.on('scroll', scope.$apply.bind(scope, handler));
        handler();
    }
};
});

<div class="logo-big">
  <img src="assets/img/logo_big.png" dir-scroll-top="scrollVariable" class="img-responsive center-block" />
</div>

    <div class="navbar-brand" ng-show="scrollVariable">
      <img src="assets/img/logo_menu.png" />
    </div>

logoShow.controller('logoShowCtrl', function($scope) {
    $scope.scrollVariable = false;
});

.directive("scroll", function($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {
            if (this.pageYOffset >=500) {
                scope.boolChangeClass = true;
                console.log('Scrolled out of view.');
            } else {
                scope.boolChangeClass = false;
                console.log('Logo is in view.');
            }
            scope.$apply();
        });
    }
});

var logoShow = angular.module('myApp.logoShow', []);

logoShow.controller('logoShowCtrl', function($scope) {
    $scope.scrollVariable = false;
});


logoShow.directive('dirScrollTop', function($window, $parse) {
    return {
        scope: {
            scroll: '=dirScrollTop'
        },
        link: function(scope, element, attrs) {
            var windowEl = angular.element($window);
            var handler = function(e) {
                var someValue = element.getBoundingClientRect().top;
                var scrollOffset = element(0).scrollTop;
                scope.scroll = element.getBoundingClientRect() > someValue;
            };
            windowEl.on('scroll', scope.$apply.bind(scope, handler));
            handler();
        }
    };
});

<div class="navbar-brand">
          <img src="assets/img/logo_menu.png" />
        </div>

<div class="logo-big">
      <img src="assets/img/logo_big.png" dir-scroll-top="scrollVariable" class="img-responsive center-block" />
    </div>