Question

一旦用户向上滚动页面，是否有仅使用CSS的技术来更改固定菜单栏的背景颜色？

颜色从silver更改为gold的示例：
https://codepen.io/dpilafian/pen/pwREjR

以下是我目前使用的JavaScript解决方案：

HTML

<body>
   <header>
      <nav>Navigation Bar</nav>
   </header>
   <main>
      <h1>The Main Event</h1>
      <h2>Scroll this page up.</h2>
      <p>Content goes here.</p>
   </main>
   <footer>
      Footer
   </footer>
</body>

CSS（LESS）

body {
   padding-top: 30px;
   >header, >footer {
      background-color: silver;
      }
   }
body >header {
   position: fixed;
   top: 0px;
   width: 100%;
   transition: all 3s;
   &.scrolled {
      background-color: gold;
      }
   }

JavaScript（使用jQuery）

var elem = $('body >header');
var doc = $(document);
function scrolled() {
   var threshold = doc.scrollTop() > 50;
   elem.toggleClass('scrolled', threshold);
   }
$(window).on({ scroll: scrolled });

如果可能的话，用某种CSS视差解决方案替换上述JavaScript解决方案会很方便。

Answer 1

你可以使用bootstrap词缀和词缀，它可以根据你的书签在词缀和词缀顶级之间切换。所以你可以根据你的需要给.affix和.affix-top类提供css。

注意：当用户没有滚动或滚动回到顶部时，会出现附加顶部。

Answer 2

一旦用户向上滚动页面，是否有仅使用CSS的技术来更改固定菜单栏的背景颜色？

没有。没有办法根据CSS的滚动位置更改规则。

Answer 3

你可以做一些黑客攻击，放置一个透明的绝对定位div，估计所需的滚动距离转换为top坐标。当您滚动到它并将其悬停时，这将触发背景更改。

这是一个通用示例，但您可以根据自己的利益调整坐标和大小（可暂停的div只有视觉参考的边框）。

body {
  font-family: sans-serif;
  margin: 0px;
  padding-top: 30px;
}

body header,
body footer {
  text-align: center;
  background-color: silver;
  padding: 10px;
}

body header {
  position: fixed;
  top: 0px;
  width: 100%;
  transition: all 3s;
}

.scrolled {
  background-color: gold;
}

.hoverEffect {
  position: absolute;
  height: 200px;
  background: transparent;
  border: 1px solid lightgray;
  text-align: center;
  line-height: 200px;
  top: 432px;
  left: 0px;
  right: 0px;
}

.hoverEffect:hover+header {
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverEffect">scroll/hover to this part</div>
<header>
  <nav>Navigation Bar</nav>
</header>
<main>
  <h1>The Main Event</h1>
  <h2>Scroll this page up.</h2>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
  <p>Content goes here.</p>
</main>
<footer>
  Footer
</footer>

用于更改滚动

3 个答案: