Wie kann ich ein Element ausblenden, wenn die Seite gescrollt wird?

Question

Ok, ich bin ein wenig ratlos.

Ich versuche, den eckigen Weg von einem jQuery Hintergrund zu denken. Das Problem: Ich möchte nur ein festes Element ausblenden, wenn das Fenster nicht gescrollt wird. Wenn jemand die Seite herunterscrollt, möchte ich das Element verstecken.

Ich habe versucht, eine benutzerdefinierte Anweisung zu erstellen, aber ich konnte es nicht funktionieren, da die Scroll-Ereignisse nicht feuern. Ich denke einen einfachen Controller wie unten, aber es läuft nicht einmal.

Controller:

.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> 

LIVE-VORSCHAU http://www.thewinetradition.com.au/new/#/portfolio

Irgendwelche Ideen wäre sehr dankbar.

Answer 1

Eine grundlegende Richtlinie würde so aussehen. Ein wichtiger Punkt ist, dass Sie scope.$apply() aufrufen müssen, da scroll außerhalb des normalen digest-Zyklus ausgeführt wird.

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

fand ich diese jsfiddle, die es das Scroll-Ereignis der Seite, bis der Boden erreicht ist doesnt laufen schön http://jsfiddle.net/88TzF/