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

Question

I am trying to recreate this fiddle: http://jsfiddle.net/mariusc23/s6mLJ/31/ using AngularJS. 我正在尝试使用AngularJS重新创建这个小提琴： http ： //jsfiddle.net/mariusc23/s6mLJ/31/ 。

Effectively, when the user scrolls down the page, the header disappears. 实际上，当用户向下滚动页面时， header消失。 If, at any point, the user scrolls up, even 1/2px... the header drops down. 如果用户在任何时候向上滚动，即使是1 / 2px ...... header也会下降。

I have created a plunker: http://plnkr.co/edit/DBiY57kKUWiISVDJiDU4?p=preview which seems to apply the hide-header class, but, i cannot seem to get to to appear on scrollUp. 我创建了一个plunker： http ：//plnkr.co/edit/DBiY57kKUWiISVDJiDU4?p=preview似乎应用了hide-header类，但是，我似乎无法在scrollUp上出现。

Directive: 指示：

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: 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>

Answer 1

You can use headroom.js for hiding header on scroll down. 您可以使用headroom.js向下滚动隐藏标题。 The script can be easily implemented using AngularJS. 使用AngularJS可以轻松实现该脚本。

Include headroom.js and angular.headroom.js and require the headroom module in your AngularJS application module. 包括headroom.js和angular.headroom.js，并要求AngularJS应用程序模块中的余量模块。

javascript angular.module('app', [ // your requires 'headroom' ]);

And then use the directive in your markup: 然后在标记中使用该指令：

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>

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

问题描述

1 个解决方案

解决方案1
1 2016-09-30 09:13:33

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

问题描述

1 个解决方案

解决方案1 1 2016-09-30 09:13:33

解决方案1
1 2016-09-30 09:13:33