web-dev-qa-db-ja.com

ページがスクロールされたときに要素を非表示にするにはどうすればよいですか？

さて、私は少し困惑しています。

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

見る

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

ライブプレビュー http://www.thewinetradition.com.au/new/#/portfolio

どんなアイデアでも大歓迎です。

angularjsscroll
32
MichaelBell

基本的なディレクティブは次のようになります。 1つの重要な点は、スクロールが通常のdigestサイクルの外側で実行されるため、scope.$apply()を呼び出す必要があることです。

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/

70
eddiec