有没有 CSS-only 的技术可以在用户滚动页面时更改固定菜单栏的背景颜色?
例如,颜色从 silver 变为 gold: https://codepen.io/dpilafian/pen/pwREjR 以下是我目前正在使用的 JavaScript 解决方案:
HTML
如果可能的话,用某种CSS视差解决方案替换上述JavaScript解决方案会更方便。
例如,颜色从 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)
const elem = $('body >header');
const scrolled = () => {
const threshold = $(document).scrollTop() > 50;
elem.toggleClass('scrolled', threshold);
};
$(window).on({ scroll: scrolled });
如果可能的话,用某种CSS视差解决方案替换上述JavaScript解决方案会更方便。
position: sticky;
来进行一些“有效的滚动检测”,据我所知这是CSS中唯一可用的方法。我之后会再回来处理这个问题。 - Fred Gandtparallax
或background-color
标签。 - sheriffderek