HTML navigation on bottom of screen and stick to top

Question

i'd like to create an effect to the navigation(exemple: http://theme.co/x/ ). I want the navigation to be every time i refresh the page at bottom of screen , and when it scrolls down to stick to the top. Any suggestions please ?

Answer 1

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

Answer 2

theme.co website, attach an event to scroll event, and add o remove css class( 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');
      }
    });