Angular hide header on scroll down, show on scroll up

Question

I am trying to recreate this fiddle: http://jsfiddle.net/mariusc23/s6mLJ/31/ using AngularJS.

Effectively, when the user scrolls down the page, the header disappears. If, at any point, the user scrolls up, even 1/2px... the header drops down.

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.

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:

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

never saw {true : 'hide-header'}[navUp] such notation before — Petr Averyanov
– Petr Averyanov, Commented Oct 19, 2015 at 13:33

Aditya Chawla · Accepted Answer · 2016-09-30 10:04:31Z

1

You can use headroom.js for hiding header on scroll down. The script can be easily implemented using AngularJS.

Include headroom.js and angular.headroom.js and require the headroom module in your AngularJS application module.

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>

edited Sep 30, 2016 at 10:04

answered Sep 30, 2016 at 9:13

Aditya Chawla

4415 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BoDogLLL Over a year ago

Quick question. I am using the Angular seed (github.com/angular/angular-seed) to play around. I installed header,js like the github says and the views will now not display on the seed app.

Collectives™ on Stack Overflow

Angular hide header on scroll down, show on scroll up

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related