Question

所有的拳头，抱歉我的英语不好。

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

我尝试使用CSS更改它：

SELECT b.[PrinterId],b.[DeviceNumber],FORMAT (t.[ReportDatetime], 'MM/dd/yyyy hh:mm:ss') as Date,t.[PrinterStatusText]
FROM [PrinterStatusReports] t, [MV_DevicesServerPortsAndPrinters] b
WHERE t.[ReportDatetime] < DateADD (MINUTE, 1, CURRENT_TIMESTAMP) and t.[PrinterStatusText] LIKE 'Not Ready To Print- Not Reachable%'

为...

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

在$（document）.ready（function（）{}）上使用Materialize.js和下一个algorhythm：

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

但它没有用。

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

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

1 个答案: