Question

所以我要做的是为我的网站导航栏。我决定做一个白色的透明背景，与背景图片完美搭配。但是，当您向下滚动页面时，我也希望条形图也可见。因此，我为导航栏选择固定位置。但是，如果向下滚动到有白色背景和文本的部分，（透明和白色）导航栏将变得不可读。

是否可以编码两个导航栏？所以我有一个绝对位置，透明背景和白色字体。一旦开始滚动，就会弹出一个新的导航栏，其中包含相同的内容，但会弹出另一个背景（例如橙色）。如果是这样，我该如何编写代码？

非常感谢你们

Answer 1

我认为最简单的方法是使用一点点jQuery。添加此功能：

它将创建一个可以为菜单设置样式的新类。

$(window).scroll(function() {
  var scroll = $(window).scrollTop();

  if (scroll >= 900) { //Choose where on the page to add new class, here i'ts 900px from the page top
    $("nav").addClass("scrolling");
  } else {
    $("nav").removeClass("scrolling");
  }
});

CSS示例：

nav {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  min-height: 50px;
  padding: 10px;
  background-color: transparent;
  width: 100%;
}

nav.scrolling {
  background-color: #000;
}

在这里查看： http://codepen.io/Winterfox/pen/QNrqRb

这样你就不必创造两个看起来非常精确的外表。

导航栏固定且绝对

1 个答案: