角度隐藏标题向下滚动，显示向上滚动

问题描述：

我正在尝试使用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>

从未见过{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>

快速的问题[navUp]这样的符号。我正在使用Angular种子（https://github.com/angular/angular-seed）来玩耍。我安装了头文件，js像github所说的那样，这些视图现在不会显示在种子应用程序中。 – McDoku

角度隐藏标题向下滚动，显示向上滚动

相关推荐