我正在尝试重新创建这个 fiddle :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>
最佳答案
您可以使用 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>
关于javascript - 向下滚动时 Angular 隐藏标题，向上滚动时显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33215051/