Oam*_*Psy 5 javascript css angularjs angularjs-directive angularjs-scope
我正在尝试使用 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>
您可以使用 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>