Menu
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>
270
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
