在 MaterializeCSS 中滚动时更改导航栏固定位置

Question

首先，对不起我的英语不好。

我有这个网站，顶部有一个公司徽标，下方有一个导航栏。当我滚动经过公司徽标时，我想将导航栏位置更改为顶部。

我尝试用 CSS 改变它：

.navbar-fixed {
  position: relative;
  height: 56px;
  z-index: 1000;
}

到...

.navbar-fixed {
  position: top;
  height: 56px;
  z-index: 1000;
}

在 $(document).ready(function (){}) 上使用 Materialize.js 和下一个算法：

    var scroll_start = 0;
    var startchange = $('#startchange');
    var offset = startchange.offset();
    if (startchange.length){
      $(document).scroll(function() { 
        scroll_start = $(this).scrollTop();
        if(scroll_start > offset.top) {
          $(".navbar-fixed").css('position', 'top');
        } else {
          $('.navbar-fixed').css('position', 'relative');
        }
      });
    }

但它不起作用。

Answer 1

首先，css属性position没有top值。

好的，这是我花费了 3 分钟的脚本。我相信您可以轻松改进它以使其适合您的需求。假设您的公司徽标有id="logo"：

function fixNavbar() {
  var $logo       = $('#logo'),
      $nav        = $('.navbar-fixed'),
       offset     = $logo.offset(),
       logoHeight = $logo.height(),
       distance   = offset + logoHeight,
       scroll     = $(window).scrollTop();

  if (scroll >= distance) {
    $nav.css({
      'position': 'fixed',
      'top':      '0',
      'right':    '0',
      'left':     '0'
    });
  } else {
    $nav.css({
      'position': 'relative',
      'top':      'auto',
      'right':    'auto',
      'left':     'auto'
    });
  }
}

$(window).scroll( function() {
  fixNavbar();
});