Question

如何在navigation menu bar上隐藏scroll down，它应该使用scrolling up显示在angularjs上？正如我已经看到一个解决方案，库'headroom.js'非常有用但我无法实现。请建议一个合适的解决方案。

Answer 1

感谢此帖：scroll up/down detection

您可以使用：

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

Answer 2

可以用JQuery完成吗？我在我的应用程序中使用这样的代码，如果使用angular.element(document).ready，可以在AngularJS中使用它。

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

Answer 3

有一个示例解决方案，您可以签出here。使用CSS和JQuery即可解决。

如何在向下滚动时隐藏导航菜单栏，它应该在使用angularjs向上滚动时出现？

3 个答案: