CODEWITHSUNDEEP
htmlcssangularjs
Sunny
Sunny

Reputation: 615

how to hide navigation menu bar on scroll down and it should appear on scrolling up using angularjs?

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.

Upvotes: 0

Views: 875

Answers (3)

Nesha Zoric
Nesha Zoric

Reputation: 6620

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

Upvotes: 0

tommybernaciak
tommybernaciak

Reputation: 390

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;
    });
  }
});

Upvotes: 1

Farzin Kanzi
Farzin Kanzi

Reputation: 3435

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();
  }   
});

Upvotes: 1

Related Questions