All geek questions in one place

Angular hide title on scroll down, show when scroll up

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

Effectively, when the user scrolls down the page, headerdisappears. If at any moment the user scrolls, even 1 / 2px ... headercrashes.

I created a plunker: http://plnkr.co/edit/DBiY57kKUWiISVDJiDU4?p=preview , which seems to have applied the class hide-header, but it looks like I can't 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>
+4
source share
1 answer

headroom.js . script AngularJS.

headroom.js angular.headroom.js 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>
+1

Source: https://habr.com/ru/post/1612249/

More articles:


All Articles