屏幕底部的HTML导航并保持在顶部

Question

我想对导航创建一个效果（例如： http : //theme.co/x/ ）。 我希望导航是每次刷新屏幕底部的页面时以及滚动向下滚动至顶部时的导航。 有什么建议吗？

Answer 1

将事件侦听器附加到滚动事件，然后在滚动位置大于所需位置时，向nav元素添加一个类，将其position为fixed并将top为0 。

Answer 2

theme.co网站，将事件附加到滚动事件，然后添加或删除css类（ http://theme.co/x/wp-content/themes/x-child-custom/framework/js/x-custom.js ）：

$window.scroll(function() {
      var $menutop = $navbarWrap.offset().top - $navbar.outerHeight();
      var $current = $this.scrollTop();
      if ($current >= $menutop) {
        $navbar.addClass('x-navbar-fixed-top');
      } else {
        $navbar.removeClass('x-navbar-fixed-top');
      }
    });