如何在頁面滾動時隱藏元素？

我想從角落的方式來自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

如何在頁面滾動時隱藏元素？

回答

相關問題