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

我正试图用AngularJS重现这把小提琴

实际上，当用户向下滚动页面时，

标题将消失。如果在任何时候，用户向上滚动，即使是1/2px。。。
标题将下拉

我创建了一个plunker：它似乎应用了
隐藏头类，但是，我似乎无法出现在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();
        });
    };
});

app.directive（“myDirective”），函数（$window）{
返回函数（范围、元素、属性）{
元素（$window）.bind（“滚动”，函数（）{
var lastScrollTop=0；
varδ=50；
var windowInnerHeight=$window.innerHeight；
var windowHeight=$window.height；
var st=此.pageYOffset；
//确保它们滚动的次数大于增量
if（Math.abs（lastScrollTop-st）lastScrollTop&&st>navbarHeight）{
如果（st>lastScrollTop&&st>50）{
//向下滚动
//$（'header'）.removeClass（'nav-down'）.addClass（'nav-up'）；
console.log（“如果…”则登录）；
scope.navUp=true；
}否则{
//向上滚动
if（st+windowInnerHeight

HTML:



项目1
项目2
项目3
项目4

您可以使用headloom.js在向下滚动时隐藏标题。使用AngularJS可以轻松实现该脚本

在AngularJS应用程序模块中包括和要求净空模块

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>

html
在快速提问之前从未见过{true:'hide header'}[navUp]这样的符号。我正在使用Angular seed（）进行游戏。我安装了header，就像github所说的js，视图现在不会显示在seed应用程序上。
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>