0

How to hide navigation menu bar on scroll down and it should appear on scrolling up using angularjs? As I have seen a solution that library 'headroom.js' is quite useful but I am unable to implement.Please suggest an appropriate solution.

Sunny
  • 577
  • 6
  • 20

3 Answers3

1

Thanks to this post: scroll up/down detection

You can use this:

var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
$('body').bind(mousewheelevt, function(e){

var evt = window.event || e //equalize event object     
evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta //check for detail first, because it is used by Opera and FF

  if(delta > 0) {
    $('.menu').fadeIn();
  }
  else{
    $('.menu').fadeOut();
  }   
});
Community
  • 1
  • 1
Farzin Kanzi
  • 3,380
  • 2
  • 21
  • 23
1

Can it be done with JQuery? I am using code like this in my app, you can use it in AngularJS if you use angular.element(document).ready.

// Navigation Scripts to Show Header on Scroll-Up
jQuery(document).ready(function($) {
  var MQL = 1170;

//primary navigation slide-in effect
  if ($(window).width() > MQL) {
    var headerHeight = $('.navbar-custom').height();
    $(window).on('scroll', {
      previousTop: 0
    },
    function() {
      var currentTop = $(window).scrollTop();
      //check if user is scrolling up
      if (currentTop < this.previousTop) {
        //if scrolling up...
        if (currentTop > 0 && $('.navbar-custom').hasClass('is-fixed')) {
          $('.navbar-custom').addClass('is-visible');
        } else {
          $('.navbar-custom').removeClass('is-visible is-fixed');
        }
      } else if (currentTop > this.previousTop) {
        //if scrolling down...
        $('.navbar-custom').removeClass('is-visible');
        if (currentTop > headerHeight && !$('.navbar-custom').hasClass('is-fixed')) $('.navbar-custom').addClass('is-fixed');
      }
      this.previousTop = currentTop;
    });
  }
});
tommybernaciak
  • 390
  • 2
  • 17
  • Actually, I did it using `jquery`. But requirement is different. i need a solution in pure angularjs. @tommybernaciak – Sunny Mar 23 '17 at 16:12
  • if it possible to you to give a solution in with the `making` use of angularjs directives. Then provide me. – Sunny Mar 24 '17 at 19:12
  • hey! @tommybernaciak. I need a help from your side. please a look to this issue. http://stackoverflow.com/questions/43348123/how-to-prevent-showing-login-page-after-user-logged-and-hit-browser-back-button – Sunny Apr 13 '17 at 10:46
0

There is an example solution you can check out here. It is solved using CSS and JQuery.

Nesha Zoric
  • 6,218
  • 42
  • 34