纯 CSS 视差 + 导航显示滚动 [英] Pure CSS Parallax + Navigation Reveal on Scroll
本文介绍了纯 CSS 视差 + 导航显示滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
所以我遇到了一个问题，它涉及纯 CSS 视差与固定导航栏的结合，当页面开始滚动或返回顶部时，该导航栏会改变大小.两个部分中的每一个都独立工作，但是当我将它们组合起来时，视差效果仍然有效，而导航栏不会从其初始状态改变.
So I've run into a problem involving pure CSS parallax in combination with a fixed navbar that changes size when the page begins to scroll or returns to the top. Each of the two parts work independently but when I combine them the parallax effect still works while the navbar does not change from it's initial state.
这是视差的代码:
main {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
header {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2.25);
background: url('https://faith.prismapixel.studio/assets/img/hero-desktop.jpg') top center / cover;
}
section {
position: relative;
display: block;
background: #FFFFFF;
z-index: 1;
}
section article {
max-width: 75rem;
margin: 0 auto;
padding: 7.5rem 0;
}
p {
margin: 7.5rem 0;
}<main>
<header class="section parallax">
<h1>HEADLINE HERE</h1>
</header>
<section class="section static">
<article>
<p>ʻO Lorem Ipsum kahi haʻahaʻa wale nō o ka paʻi a me keʻano o nāʻoihana. ʻO Lorem Ipsum ka 'ōlelo papahana maʻamau o kaʻoihana o ka makahiki 1500, i ka wā i lawe ai kekahi mea paʻi kiʻiʻole i keʻano o ka type a scrambled iā ia e hana i kahi puke
kiko'ī. ʻAʻole i ola wale i kaʻelima mau kenekulia, akā,ʻo ka leleʻana hoʻi i nāʻano o ka lolouila, e hoʻololiʻoleʻia ana. Ua hoʻolahaʻia i nā makahiki 1960 me ka hoʻokuʻuʻana i nā pepa Letraset i loko o nā moʻolelo Lorem Ipsum, a me nā mea hou
aku me ka polokalamu hoʻopuka pākī e like me Aldus PageMaker me nā papa o Lorem Ipsum.
</p>
<p>ʻO Lorem Ipsum kahi haʻahaʻa wale nō o ka paʻi a me keʻano o nāʻoihana. ʻO Lorem Ipsum ka 'ōlelo papahana maʻamau o kaʻoihana o ka makahiki 1500, i ka wā i lawe ai kekahi mea paʻi kiʻiʻole i keʻano o ka type a scrambled iā ia e hana i kahi puke
kiko'ī. ʻAʻole i ola wale i kaʻelima mau kenekulia, akā,ʻo ka leleʻana hoʻi i nāʻano o ka lolouila, e hoʻololiʻoleʻia ana. Ua hoʻolahaʻia i nā makahiki 1960 me ka hoʻokuʻuʻana i nā pepa Letraset i loko o nā moʻolelo Lorem Ipsum, a me nā mea hou
aku me ka polokalamu hoʻopuka pākī e like me Aldus PageMaker me nā papa o Lorem Ipsum.
</p>
<p>ʻO Lorem Ipsum kahi haʻahaʻa wale nō o ka paʻi a me keʻano o nāʻoihana. ʻO Lorem Ipsum ka 'ōlelo papahana maʻamau o kaʻoihana o ka makahiki 1500, i ka wā i lawe ai kekahi mea paʻi kiʻiʻole i keʻano o ka type a scrambled iā ia e hana i kahi puke
kiko'ī. ʻAʻole i ola wale i kaʻelima mau kenekulia, akā,ʻo ka leleʻana hoʻi i nāʻano o ka lolouila, e hoʻololiʻoleʻia ana. Ua hoʻolahaʻia i nā makahiki 1960 me ka hoʻokuʻuʻana i nā pepa Letraset i loko o nā moʻolelo Lorem Ipsum, a me nā mea hou
aku me ka polokalamu hoʻopuka pākī e like me Aldus PageMaker me nā papa o Lorem Ipsum.
</p>
<p>ʻO Lorem Ipsum kahi haʻahaʻa wale nō o ka paʻi a me keʻano o nāʻoihana. ʻO Lorem Ipsum ka 'ōlelo papahana maʻamau o kaʻoihana o ka makahiki 1500, i ka wā i lawe ai kekahi mea paʻi kiʻiʻole i keʻano o ka type a scrambled iā ia e hana i kahi puke
kiko'ī. ʻAʻole i ola wale i kaʻelima mau kenekulia, akā,ʻo ka leleʻana hoʻi i nāʻano o ka lolouila, e hoʻololiʻoleʻia ana. Ua hoʻolahaʻia i nā makahiki 1960 me ka hoʻokuʻuʻana i nā pepa Letraset i loko o nā moʻolelo Lorem Ipsum, a me nā mea hou
aku me ka polokalamu hoʻopuka pākī e like me Aldus PageMaker me nā papa o Lorem Ipsum.
</p>
<p>ʻO Lorem Ipsum kahi haʻahaʻa wale nō o ka paʻi a me keʻano o nāʻoihana. ʻO Lorem Ipsum ka 'ōlelo papahana maʻamau o kaʻoihana o ka makahiki 1500, i ka wā i lawe ai kekahi mea paʻi kiʻiʻole i keʻano o ka type a scrambled iā ia e hana i kahi puke
kiko'ī. ʻAʻole i ola wale i kaʻelima mau kenekulia, akā,ʻo ka leleʻana hoʻi i nāʻano o ka lolouila, e hoʻololiʻoleʻia ana. Ua hoʻolahaʻia i nā makahiki 1960 me ka hoʻokuʻuʻana i nā pepa Letraset i loko o nā moʻolelo Lorem Ipsum, a me nā mea hou
aku me ka polokalamu hoʻopuka pākī e like me Aldus PageMaker me nā papa o Lorem Ipsum.
</p>
</article>
</section>
</main>这是导航栏的代码:
window.onscroll = function() {
yScroll()
};
function yScroll() {
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
document.getElementsByTagName('nav')[0].className = "mini";
} else {
document.getElementsByTagName('nav')[0].className = "";
}
}
window.addEventListener("scroll", yScroll);nav {
position: fixed;
z-index: 9;
top: 0;
left: 0;
width: 100%;
height: 0rem;
background: #FFFFFF;
opacity: 0;
color: #FFF;
font-size: 23px;
transition: height 0.3s ease 0s, opacity 0.3s ease 0s;
overflow: hidden;
}
nav.mini {
opacity: 1;
height: 3rem;
}
header {
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2.25);
background: url('https://faith.prismapixel.studio/assets/img/hero-desktop.jpg') top center / cover;
}
section {
position: relative;
display: block;
background: #FFFFFF;
z-index: 1;
}
section article {
max-width: 75rem;
margin: 0 auto;
padding: 7.5rem 0;
}
p {
margin: 7.5rem 0;
}<nav class="">
</nav>
<main>
<header class="section parallax">
<h1>HEADLINE HERE</h1>
</header>
<section class="section static">
<article>
<p>ʻO Lorem Ipsum kahi haʻahaʻa wale nō o ka paʻi a me keʻano o nāʻoihana. ʻO Lorem Ipsum ka 'ōlelo papahana maʻamau o kaʻoihana o ka makahiki 1500, i ka wā i lawe ai kekahi mea paʻi kiʻiʻole i keʻano o ka type a scrambled iā ia e hana i kahi puke
kiko'ī. ʻAʻole i ola wale i kaʻelima mau kenekulia, akā,ʻo ka leleʻana hoʻi i nāʻano o ka lolouila, e hoʻololiʻoleʻia ana. Ua hoʻolahaʻia i nā makahiki 1960 me ka hoʻokuʻuʻana i nā pepa Letraset i loko o nā moʻolelo Lorem Ipsum, a me nā mea hou
aku me ka polokalamu hoʻopuka pākī e like me Aldus PageMaker me nā papa o Lorem Ipsum.
</p>
<p>ʻO Lorem Ipsum kahi haʻahaʻa wale nō o ka paʻi a me keʻano o nāʻoihana. ʻO Lorem Ipsum ka 'ōlelo papahana maʻamau o kaʻoihana o ka makahiki 1500, i ka wā i lawe ai kekahi mea paʻi kiʻiʻole i keʻano o ka type a scrambled iā ia e hana i kahi puke
kiko'ī. ʻAʻole i ola wale i kaʻelima mau kenekulia, akā,ʻo ka leleʻana hoʻi i nāʻano o ka lolouila, e hoʻololiʻoleʻia ana. Ua hoʻolahaʻia i nā makahiki 1960 me ka hoʻokuʻuʻana i nā pepa Letraset i loko o nā moʻolelo Lorem Ipsum, a me nā mea hou
aku me ka polokalamu hoʻopuka pākī e like me Aldus PageMaker me nā papa o Lorem Ipsum.
</p>
<p>ʻO Lorem Ipsum kahi haʻahaʻa wale nō o ka paʻi a me keʻano o nāʻoihana. ʻO Lorem Ipsum ka 'ōlelo papahana maʻamau o kaʻoihana o ka makahiki 1500, i ka wā i lawe ai kekahi mea paʻi kiʻiʻole i keʻano o ka type a scrambled iā ia e hana i kahi puke
kiko'ī. ʻAʻole i ola wale i kaʻelima mau kenekulia, akā,ʻo ka leleʻana hoʻi i nāʻano o ka lolouila, e hoʻololiʻoleʻia ana. Ua hoʻolahaʻia i nā makahiki 1960 me ka hoʻokuʻuʻana i nā pepa Letraset i loko o nā moʻolelo Lorem Ipsum, a me nā mea hou
aku me ka polokalamu hoʻopuka pākī e like me Aldus PageMaker me nā papa o Lorem Ipsum.
</p>
<p>ʻO Lorem Ipsum kahi haʻahaʻa wale nō o ka paʻi a me keʻano o nāʻoihana. ʻO Lorem Ipsum ka 'ōlelo papahana maʻamau o kaʻoihana o ka makahiki 1500, i ka wā i lawe ai kekahi mea paʻi kiʻiʻole i keʻano o ka type a scrambled iā ia e hana i kahi puke
kiko'ī. ʻAʻole i ola wale i kaʻelima mau kenekulia, akā,ʻo ka leleʻana hoʻi i nāʻano o ka lolouila, e hoʻololiʻoleʻia ana. Ua hoʻolahaʻia i nā makahiki 1960 me ka hoʻokuʻuʻana i nā pepa Letraset i loko o nā moʻolelo Lorem Ipsum, a me nā mea hou
aku me ka polokalamu hoʻopuka pākī e like me Aldus PageMaker me nā papa o Lorem Ipsum.
</p>
<p>ʻO Lorem Ipsum kahi haʻahaʻa wale nō o ka paʻi a me keʻano o nāʻoihana. ʻO Lorem Ipsum ka 'ōlelo papahana maʻamau o kaʻoihana o ka makahiki 1500, i ka wā i lawe ai kekahi mea paʻi kiʻiʻole i keʻano o ka type a scrambled iā ia e hana i kahi puke
kiko'ī. ʻAʻole i ola wale i kaʻelima mau kenekulia, akā,ʻo ka leleʻana hoʻi i nāʻano o ka lolouila, e hoʻololiʻoleʻia ana. Ua hoʻolahaʻia i nā makahiki 1960 me ka hoʻokuʻuʻana i nā pepa Letraset i loko o nā moʻolelo Lorem Ipsum, a me nā mea hou
aku me ka polokalamu hoʻopuka pākī e like me Aldus PageMaker me nā papa o Lorem Ipsum.
</p>
</article>
</section>
</main>如您所见，它们各自都可以正常工作.如果我删除 <main> 标记的样式，则导航栏将起作用，但视差效果不起作用.
As you can see they both work fine on their own. If I remove the styling for the <main> tag, then the navbar will work but the parallax effect won't.
我做错了什么?
推荐答案
在网上搜索了一下并自学更多有关 javascript 的知识后，我解决了我的困境.
After a bit of scouring the web and teaching myself more about javascript I have solved my dilemma.
function yScroll() {
var el = document.getElementById("main");
var nav = document.getElementById("navBar");
var y = el.scrollTop;
if (y >= 50) {
nav.className = "mini";
} else {
nav.className = "";
}
}html {
font-size: 10px;
scroll-behavior: smooth;
color: #212121;
box-sizing: border-box;
line-height: 1.4;
margin: 0;
padding: 0;
min-width: 32rem;
}
body {
font: normal 400 1.5rem 'Montserrat Alternates';
background: #ffffff;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
overscroll-behavior-y: none;
}
nav {
width: calc(100% - 1rem);
height: 0rem;
position: fixed;
top: 0;
left: 0;
z-index: 9000;
text-transform: uppercase;
transition: all 150ms ease 0s;
}
nav.mini {
background: #FFFFFF;
height: 5rem;
box-shadow: 0 0 .5rem 0 rgba(0, 0, 0, .15);
}
#main {
perspective: 1px;
transform-style: preserve-3d;
height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
#main::-webkit-scrollbar {
width: 1rem;
}
#main::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 .5rem rgba(#212121, .5);
}
#main::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
header {
background: url('https://faith.prismapixel.studio/assets/img/hero-desktop.jpg') top center / cover;
display: flex;
flex: 1 0 auto;
position: relative;
z-index: -1;
height: 100vh;
justify-content: center;
align-items: center;
transform: translateZ(-1px) scale(2.25);
}
section {
position: relative;
display: block;
background: #FFFFFF;
z-index: 1;
}
section article {
max-width: 75rem;
margin: 0 auto;
padding: 7.5rem 0;
}
p {
margin: 7.5rem 0;
}
</style><nav id="navBar" class="">
</nav>
<main id="main" onscroll="yScroll()">
<header>
<h1 id="print">Headline Here</h1>
</header>
<section>
<article>
<p>ʻO Lorem Ipsum kahi haʻahaʻa wale nō o ka paʻi a me keʻano o nāʻoihana. ʻO Lorem Ipsum ka 'ōlelo papahana maʻamau o kaʻoihana o ka makahiki 1500, i ka wā i lawe ai kekahi mea paʻi kiʻiʻole i keʻano o ka type a scrambled iā ia e hana i kahi puke
kiko'ī. ʻAʻole i ola wale i kaʻelima mau kenekulia, akā,ʻo ka leleʻana hoʻi i nāʻano o ka lolouila, e hoʻololiʻoleʻia ana. Ua hoʻolahaʻia i nā makahiki 1960 me ka hoʻokuʻuʻana i nā pepa Letraset i loko o nā moʻolelo Lorem Ipsum, a me nā mea hou
aku me ka polokalamu hoʻopuka pākī e like me Aldus PageMaker me nā papa o Lorem Ipsum.
</p>
<p>ʻO Lorem Ipsum kahi haʻahaʻa wale nō o ka paʻi a me keʻano o nāʻoihana. ʻO Lorem Ipsum ka 'ōlelo papahana maʻamau o kaʻoihana o ka makahiki 1500, i ka wā i lawe ai kekahi mea paʻi kiʻiʻole i keʻano o ka type a scrambled iā ia e hana i kahi puke
kiko'ī. ʻAʻole i ola wale i kaʻelima mau kenekulia, akā,ʻo ka leleʻana hoʻi i nāʻano o ka lolouila, e hoʻololiʻoleʻia ana. Ua hoʻolahaʻia i nā makahiki 1960 me ka hoʻokuʻuʻana i nā pepa Letraset i loko o nā moʻolelo Lorem Ipsum, a me nā mea hou
aku me ka polokalamu hoʻopuka pākī e like me Aldus PageMaker me nā papa o Lorem Ipsum.
</p>
<p>ʻO Lorem Ipsum kahi haʻahaʻa wale nō o ka paʻi a me keʻano o nāʻoihana. ʻO Lorem Ipsum ka 'ōlelo papahana maʻamau o kaʻoihana o ka makahiki 1500, i ka wā i lawe ai kekahi mea paʻi kiʻiʻole i keʻano o ka type a scrambled iā ia e hana i kahi puke
kiko'ī. ʻAʻole i ola wale i kaʻelima mau kenekulia, akā,ʻo ka leleʻana hoʻi i nāʻano o ka lolouila, e hoʻololiʻoleʻia ana. Ua hoʻolahaʻia i nā makahiki 1960 me ka hoʻokuʻuʻana i nā pepa Letraset i loko o nā moʻolelo Lorem Ipsum, a me nā mea hou
aku me ka polokalamu hoʻopuka pākī e like me Aldus PageMaker me nā papa o Lorem Ipsum.
</p>
</article>
</section>
</main>在解决了我的困境后，我不得不修改导航栏的宽度以适应滚动条的宽度，因为滚动条实际上位于 <main> 元素而不是 <正文>.但这很容易做到.
I had to modify the width of the navbar after solving my dilemma to accommodate the width of the scrollbar due to the scrollbar actually being on the <main> element and not the <body>. But that was easy to do.
我希望这有助于其他任何人尝试在纯 CSS 网站的滚动导航栏上添加固定显示.
I hope this helps anyone else trying to add a fixed reveal on scroll navbar to a pure CSS website.
这篇关于纯 CSS 视差 + 导航显示滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
