如何在页面滚动时隐藏元素？

我想从角落的方式来自jQuery背景。

问题：我只想隐藏一个固定的元素，如果窗口没有滚动。如果有人向下滚动页面，我想隐藏该元素。

我试着创建一个自定义指令，但我不能让它工作，因为滚动事件没有发射。我想像下面这样简单的控制器，但它甚至没有运行。

控制器：

.controller('MyCtrl2', function($scope,appLoading, $location, $anchorScroll, $window) { 
    angular.element($window).bind("scroll", function(e) { 
     console.log('scroll') 
     console.log(e.pageYOffset) 
     $scope.visible = false; 
    }) 
})

VIEW

<a ng-click="gotoTop()" class="scrollTop" ng-show="{{visible}}">TOP</a>

实时预览 http://www.thewinetradition.com.au/new/#/portfolio

任何想法，将不胜感激。

来源

2013-11-27 MichaelBell

基本指令看起来像这样。一个关键点是您需要致电scope.$apply()，因为滚动将在正常的digest周期之外运行。

app = angular.module('myApp', []); 
app.directive("scroll", function ($window) { 
    return function(scope, element, attrs) { 
     angular.element($window).bind("scroll", function() { 
      scope.visible = false; 
      scope.$apply(); 
     }); 
    }; 
});

我发现这个的jsfiddle这表明它很好http://jsfiddle.net/88TzF/

来源

2013-11-27 21:54:02 eddiec

感谢Eddiec，出于某种原因，滚动事件犯规运行，直到页面的底部被击中。请参阅控制台日志： http://www.thewinetradition.com.au/new/#/portfolio – MichaelBell

您在'hh'类（app.css行3）上有'overflow-x：hidden;'，这就是看起来一贯停止滚动。 – eddiec

当指令被销毁时，这会自动解除绑定事件吗？ – jvannistelrooy

如何在页面滚动时隐藏元素？

回答

相关问题