角度隱藏標題向下滾動，顯示向上滾動

我正在嘗試使用AngularJS重新創建這個小提琴：http://jsfiddle.net/mariusc23/s6mLJ/31/。角度隱藏標題向下滾動，顯示向上滾動

實際上，當用戶向下滾動頁面時，header消失。如果用戶在任何時候都向上滾動，即使是1/2px ... header也會下降。

我已經創建了一個plunker：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

從未見過{TRUE： '隱藏的頭'}之前 –

可以使用headroom.js隱藏標題上向下滾動。該腳本可以使用AngularJS輕鬆實現。

包括headroom.js和angular.headroom.js並且需要AngularJS應用程序模塊中的淨空模塊。

，然後使用您的標記指令：

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

快速的問題[navUp]這樣的符號。我正在使用Angular種子（https://github.com/angular/angular-seed）來玩耍。我安裝了頭文件，js像github所說的那樣，這些視圖現在不會顯示在種子應用程序中。 – McDoku

角度隱藏標題向下滾動，顯示向上滾動

回答

相關問題