programing

페이지를 스크롤할 때 요소를 숨기려면 어떻게 해야 합니까?

magicmemo 2023. 4. 1. 09:01
반응형

페이지를 스크롤할 때 요소를 숨기려면 어떻게 해야 합니까?

그래, 좀 당황스럽네요

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/ #/webook

어떤 아이디어라도 주시면 감사하겠습니다.

기본 지시는 다음과 같습니다.한 가지 중요한 점은,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/

언급URL : https://stackoverflow.com/questions/20253322/how-can-i-hide-an-element-when-the-page-is-scrolled

반응형