Показать элемент DOM при прокрутке страницы вниз 50 пикселей

Question

В моем приложении Angular я хочу, чтобы элемент DOM появился, когда пользователь прокручивает 50 пикселей.

Есть ли способ сделать это в Угловом?

Answer 1

Либо с JavaScript

window.pageYOffset 

или Jquery

$(window).scrollTop() 

Вы бы установить их в спиральном слушателя, как -

window.addEventListener('scroll', function() { 
    var x = window.pageYOffset; 
    if(x >= 50){ 
    //apply styles 
    }else{ 
    //remove styles 
    } 
} 

(вы можете использовать JQuery для этого тоже). Затем добавьте стили в элемент, установив, что вы выше или ниже 50. Это основная идея.

Answer 2

Вы можете использовать директиву, которая хранит свиток смещения в переменной и использовать его в сочетании с нг-шоу, чтобы показать и скрыть элементы:

app.directive('scrollObserver', function($window) { 
    return { 
    scope: { 
     scroll: '=scrollObserver' 
    }, 
    link: function(scope) { 
     angular.element($window).on('scroll', function(){ 
      scope.scroll = angular.element($window).scrollTop(); 

      // event listener does not trigger angular apply cycle automatically 
      scope.$apply(); 
     }); 
    } 
    }; 
}); 

Затем вы можете использовать эту директиву, чтобы скрыть элементы, основанные на текущей позиции прокрутки:

<span ng-show="scroll > 50" scroll-observer="scroll">Display me on scroll!</span>