向下滚动时隐藏标题，向上滚动时显示
Posted
技术标签:
【中文标题】向下滚动时隐藏标题，向上滚动时显示【英文标题】：Angular hide header on scroll down, show on scroll up 【发布时间】：2016-01-17 20:06:08 【问题描述】：我正在尝试使用 AngularJS 重新创建这个小提琴：http://jsfiddle.net/mariusc23/s6mLJ/31/。
实际上，当用户向下滚动页面时，header 消失了。如果在任何时候，用户向上滚动，甚至 1/2 像素……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 : 'hide-header'[navUp] 这样的符号 【参考方案1】：您可以使用 headroom.js 在向下滚动时隐藏标题。该脚本可以使用 AngularJS 轻松实现。
包括headroom.js 和angular.headroom.js 并在您的AngularJS 应用程序模块中要求headroom 模块。
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>
【讨论】：
快速提问。我正在使用 Angular 种子 (github.com/angular/angular-seed) 来玩。我像 github 说的那样安装了 header，js，视图现在不会显示在种子应用程序上。以上是关于向下滚动时隐藏标题，向上滚动时显示的主要内容，如果未能解决你的问题，请参考以下文章