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

Question

如何使用angularjs在向下滚动时隐藏导航菜单栏并且它应该出现在向上滚动时？ 正如我看到的解决方案，库“headroom.js”非常有用，但我无法实现。请提出适当的解决方案。

Answer 1

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