Угловая скрыть заголовок на прокрутке вниз, показать на прокрутке вверх

Я пытаюсь воссоздать эту скрипку: http://jsfiddle.net/mariusc23/s6mLJ/31/ используя AngularJS.Угловая скрыть заголовок на прокрутке вниз, показать на прокрутке вверх

Фактически, когда пользователь прокручивает страницу вниз, исчезает header. Если в любой момент пользователь прокручивается, даже 1/2px ... header падает.

Я создал плукер: http://plnkr.co/edit/DBiY57kKUWiISVDJiDU4?p=preview, который, кажется, применил класс hide-header, но, похоже, я не могу появиться на scrollUp.

Директива:

app.directive("myDirective", function ($window) { 
    return function(scope, element, attrs) { 
     angular.element($window).bind("scroll", function() { 

      var lastScrollTop = 0; 
      var delta = 50; 
      var windowInnerHeight = $window.innerHeight; 
      var windowHeight = $window.height; 

      var st = this.pageYOffset; 

      // Make sure they scroll more than delta 
      if(Math.abs(lastScrollTop - st) <= delta) 
       return; 

      // If they scrolled down and are past the navbar, add class .nav-up. 
      // This is necessary so you never see what is "behind" the navbar. 
      //if (st > lastScrollTop && st > navbarHeight){ 
      if (st > lastScrollTop && st > 50){ 
       // Scroll Down 
       //$('header').removeClass('nav-down').addClass('nav-up'); 
       console.log("in if..."); 
       scope.navUp = true; 
      } else { 
       // Scroll Up 
       if(st + windowInnerHeight < windowHeight) { 
        //$('header').removeClass('nav-up').addClass('nav-down'); 
        console.log("in else..."); 
       } 
      } 

      lastScrollTop = st; 

      scope.$apply(); 
     }); 
    }; 
});

HTML:

<body ng-controller="MainCtrl"> 
    <header my-directive ng-class="{true : 'hide-header'}[navUp]"> 
     <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
     <li>Item 4</li> 
     </ul> 
    </header> 
    </body>

источник

2015-10-19 Oam Psy

никогда не видел {истинный: 'прятки заголовка'} [navUp] такое обозначение перед тем –

Вы можете использовать headroom.js для скрытия заголовка на свитке вниз. Сценарий можно легко реализовать с помощью AngularJS.

Включите headroom.js и angular.headroom.js и потребуйте модуль запаса в вашем модуле приложения AngularJS.

javascript angular.module('app', [ // your requires 'headroom' ]);

И затем использовать директиву в разметке:

html 
<header headroom></header> 
<!-- or --> 
<headroom></headroom> 
<!-- or with options --> 
<headroom tolerance='0' offset='0' scroller=".my-scroller" classes="{pinned:'headroom--pinned',unpinned:'headroom--unpinned',initial:'headroom'}"></headroom>

источник

2016-09-30 09:13:33

Быстрый вопрос. Я использую Angular seed (https://github.com/angular/angular-seed), чтобы поиграть. Я установил header, js, как говорит github, и теперь представления не будут отображаться в семестровом приложении. – McDoku

Угловая скрыть заголовок на прокрутке вниз, показать на прокрутке вверх

ответ

Смежные вопросы