【发布时间】：2022-01-25 22:04:42
【问题描述】：
设置
在滚动时，导航栏后面的内容仍然可见，我希望它在看起来干净的同时不可见。
尝试 #1
一个矩形。导航栏后面的 div 可以隐藏其下方的内容，但请注意，当文本出现时（初始），粉红色的 div 在导航栏后面仍然可见（我想在视图中滚动时将其更改为白色）
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: initial;
font-size: 16px;
font-family: 'Comfortaa', cursive;
scrollbar-width: none;
}
body {
background-color: rgb(252, 241, 239);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#mobile_size {
width: 550px;
height: 650px;
background-color: black;
border-radius: 3%;
position: relative;
}
#mobile_screen {
width: 530px;
height: 600px;
background-color: rgb(252, 241, 239);
border-radius: 3%;
position: absolute;
top: 10px;
overflow-y: scroll;
left: 10px;
overflow-x: hidden;
}
header {
display: flex;
padding: 10px;
background-color: rgb(252, 248, 248);
position: sticky;
top: 10px;
align-items: center;
margin: 10px;
border-radius: 15px;
justify-content: space-between;
box-shadow: 3px 5px 10px rgb(0, 0, 0, .13);
z-index: 3;
}
#gradient_pink {
background: rgb(237, 218, 218);
background: linear-gradient(180deg, rgba(237, 218, 218, 1) 0%, rgba(252, 241, 239, 1) 21%);
position: sticky;
top: 0px;
width: 140%;
height: 10px;
z-index: 1;
}
#gradient_white {
background-color: white;
position: sticky;
top: 0px;
width: 140%;
height: 10px;
z-index: 1;
}
h1 {
margin-left: 10px;
font-size: 1.6rem;
}
h1:hover {
cursor: pointer;
}
ul {
margin-right: 20px;
list-style: none;
}
ul,
li {
font-size: 11px;
display: inline;
margin: 5px;
}
a {
text-decoration: none;
}
#img_gallery {
display: flex;
margin: 10px;
margin-top: 30px;
border-radius: 10px;
background-color: rgb(252, 241, 239);
padding: 10px;
height: 500px;
flex-direction: column;
overflow-y: scroll;
}
img {
margin-bottom: 20px;
border-radius: 10px;
height: 480px;
}
::-webkit-scrollbar {
width: 0;
background: transparent;
}
#about_company {
margin-top: 60px;
width: 100%;
background-color: white;
height: auto;
}
h3 {
text-align: center;
font-size: 15px;
padding-top: 60px;
}
p {
padding: 60px;
padding-top: 40px;
text-align: justify;
}
#ig_container {
display: flex;
margin: 10px;
margin-top: 30px;
border-radius: 10px;
background-color: rgb(250, 236, 233);
padding: 10px;
height: 500px;
flex-direction: column;
overflow-y: scroll;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<title>Jino</title>
</head>
<body>
<div id="mobile_size">
<div id="mobile_screen">
<div id="gradient_pink"></div>
<!-- <div id="gradient_white"></div> -->
<header>
<h1 id="name">JINO</h1>
<ul>
<a href="#">
<li>ABOUT</li>
</a>
<a href="#">
<li>CONTACT</li>
</a>
<a href="#">
<li>SERVICES</li>
</a>
<a href="#">
<li>SHOP</li>
</a>
</ul>
</header>
<main>
<div id="ig_container">
<div id="img_gallery">
<img src='http://unsplash.it/g/501?random&gravity=center' alt='' />
<img src='http://unsplash.it/g/502?random&gravity=center' alt='' />
<img src='http://unsplash.it/g/503?random&gravity=center' alt='' />
<img src='http://unsplash.it/g/504?random&gravity=center' alt='' />
<img src='http://unsplash.it/g/505?random&gravity=center' alt='' />
<img src='http://unsplash.it/g/506?random&gravity=center' alt='' />
<img src='http://unsplash.it/g/507?random&gravity=center' alt='' />
<img src='http://unsplash.it/g/500?random&gravity=center' alt='' />
</div>
</div>
<div id="about_company">
<h3>THE INCEPTION</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam minus maiores, veritatis fugiat ut, perspiciatis corrupti, nam eius provident molestias nesciunt fuga! Veritatis temporibus tempore dolor est rerum doloribus, qui voluptatibus id
veniam. Ipsa architecto eligendi hic fugiat minima at laboriosam sapiente animi nostrum amet minus maiores distinctio quasi est tempore nisi similique voluptate doloremque excepturi, tenetur, eius mollitia! Non, soluta? Culpa dicta quisquam
saepe non. Quis ea dolores amet modi magnam maiores porro consequuntur debitis at ex hic necessitatibus minus sunt excepturi quo quasi sed, expedita, sit cupiditate! Tenetur ipsam impedit, sit vel ab velit esse temporibus magnam. Cumque ab
quos enim nostrum error, dicta tenetur distinctio repellendus quasi facere labore culpa qui eos dolore, cum, ut atque explicabo alias totam? Nesciunt illum incidunt dignissimos. Illum laudantium neque aliquam, sequi odio laboriosam beatae
in enim nulla nostrum tenetur necessitatibus ullam illo perferendis adipisci possimus sapiente nemo. Doloribus iste ipsa voluptates cum reprehenderit officia, nemo totam repudiandae eaque eveniet delectus. Optio dolore cum, nemo aspernatur
qui mollitia aliquid officia architecto magnam delectus omnis accusamus velit esse natus molestiae. Modi, distinctio cumque nobis ducimus accusamus quo neque aperiam, tenetur reprehenderit incidunt fugit quaerat provident totam quos! Magni
molestias aut alias exercitationem repellendus ut eum et nesciunt ullam corporis illo veniam, laudantium sed quod veritatis velit adipisci sint accusantium vel. Delectus corporis fugiat aperiam dicta accusantium tempore adipisci praesentium
voluptas fuga ex. Porro tenetur consequuntur in ipsa cum, numquam iure, facilis ipsam, dignissimos est rerum voluptates eveniet dolor dolorum itaque perspiciatis veniam. Inventore incidunt mollitia delectus iste eligendi tempore aut ex provident
error suscipit, adipisci magnam cupiditate hic quis rerum pariatur vitae magni corrupti veritatis assumenda dolore atque, praesentium consequatur quasi. Vitae aperiam nulla minima omnis explicabo. Quibusdam, vel? Consequuntur vitae debitis
accusamus accusantium assumenda magni nobis, labore iure illum inventore eaque ullam totam. Praesentium, incidunt! Quisquam itaque ut tenetur nostrum non ratione, consectetur sunt quas ducimus saepe fugit deserunt, ad assumenda! Sit possimus
minima fugiat accusamus pariatur, voluptates impedit sapiente nam vel cumque, odio rem natus, tempore consequatur eveniet reiciendis adipisci doloremque dolorum voluptatibus totam amet ab. Ad, minus? Quaerat ratione possimus numquam veniam
fugit. Iure tempora delectus deserunt. Hic nisi sed soluta itaque adipisci, facere voluptatibus nesciunt culpa earum deserunt iste magni laboriosam dignissimos blanditiis, ipsa laborum? Sapiente, sequi. Dicta cum debitis magni molestias odio
praesentium temporibus voluptatum culpa qui adipisci expedita, quibusdam ad earum tenetur. Tenetur nulla impedit deleniti iusto numquam, dolorem doloribus aliquam molestiae vero aspernatur velit eos, reprehenderit accusamus enim magni quam
in libero! Eligendi dolore, fuga placeat dicta aliquam aut laudantium, in temporibus, asperiores enim expedita voluptas alias quasi error harum? Cumque sequi porro labore, nisi minima molestiae tempora, voluptatum sit veniam omnis magnam deleniti
esse dolorem expedita tempore eos totam quidem provident officiis vero culpa doloremque quasi delectus. Harum cumque velit dignissimos accusantium qui nesciunt consequuntur error quis sint tenetur et nisi recusandae similique aliquam, ea sapiente!
Cum molestias tempore dolorum dolor ullam deleniti architecto distinctio aperiam rem eos! Illo, velit molestiae cum atque cumque vel repellat libero deleniti animi accusamus vitae! Iure, reiciendis. Explicabo suscipit modi incidunt perferendis
earum unde reprehenderit quod rerum iste soluta, saepe nulla voluptas, voluptatum, tempora vero eius nisi iure culpa nesciunt distinctio. Dolorum possimus soluta nemo. Molestias odio at tempora hic labore eligendi dolorum beatae deleniti,
est facilis nemo, dolore a ad. Doloribus itaque iure quos maiores quidem fugiat? Minus, nobis recusandae pariatur similique saepe repellendus impedit rerum veniam veritatis dolorem facere, laudantium itaque eligendi, magnam odio incidunt exercitationem
sapiente asperiores quas? Quidem iste, pariatur blanditiis nostrum nobis earum officia eum laboriosam placeat, at voluptatum labore laborum neque ullam ipsum odit quod, reprehenderit autem sit doloremque recusandae quaerat! Ducimus quaerat
totam eius facere. Iure, laborum vel sequi blanditiis veniam quaerat quia. Voluptate modi, cumque quam officia impedit harum, debitis delectus necessitatibus magni officiis culpa obcaecati. Debitis nemo sed eum ullam similique fugiat id, veritatis
facere quidem delectus odit nulla dicta aperiam sint ab voluptatibus perspiciatis eos officiis. Doloribus, consequuntur error dicta repellat incidunt unde nemo, corrupti magnam architecto nulla ut similique saepe maxime culpa sit? Ducimus
adipisci perferendis commodi. Voluptatibus quam sit, debitis odit recusandae cupiditate, asperiores nisi sint distinctio nulla autem possimus esse nostrum deserunt. Voluptatum nemo sint delectus consequatur, ipsum mollitia. Debitis aliquam
consectetur repudiandae commodi ratione est sit inventore aliquid nam blanditiis aperiam distinctio doloremque nihil sed quae voluptatum cum modi, eveniet alias voluptas harum unde. Hic libero error eveniet saepe ab animi laborum adipisci
magnam eos incidunt minus, odio molestiae. Debitis cum molestiae reiciendis ipsa. Error nemo ipsum eius explicabo accusantium dolore, voluptatibus et quos laboriosam maxime eum saepe. Exercitationem nam natus delectus placeat doloribus sunt
consequatur autem sapiente. Architecto obcaecati quis reiciendis repellat recusandae sequi exercitationem rerum. Ipsa, mollitia. Ipsam, quas, officia voluptatibus repudiandae, eaque eos quis sit voluptas fugiat quae laudantium adipisci tempora
ullam magnam dolorem delectus! Natus alias distinctio deserunt laboriosam placeat doloremque vel quis possimus, laudantium accusantium? Consectetur recusandae eaque voluptas eligendi modi vel ratione libero aperiam rem! Sint qui reprehenderit
ut, adipisci tenetur minus cumque, iusto quam id quis harum exercitationem aspernatur sit rem eius nobis libero a nam animi laborum esse accusamus illo provident dolor. Repudiandae, aliquam. Et illum itaque eum beatae facilis nihil nam? Voluptatibus
nesciunt veritatis voluptate facere autem molestiae ut similique deserunt eligendi odit! Eius error sit ut praesentium voluptate eum ullam modi architecto, sequi quae. Error obcaecati ducimus debitis ratione nam saepe omnis tempore excepturi
natus ex exercitationem necessitatibus minus, minima a ipsa ad repellat placeat ipsam culpa sequi dicta. Ea rem tenetur quibusdam illum magni perferendis saepe quasi quisquam, odio amet adipisci, voluptate repellat voluptates impedit facilis
expedita aliquam velit officiis! Nemo maxime illo sapiente omnis corporis iusto sunt similique enim beatae itaque quasi pariatur, voluptas impedit consequuntur ipsam iste delectus unde? Sunt, ipsam quasi. Debitis veniam laborum modi sequi
accusantium ut fugit reprehenderit rem hic laudantium aperiam illo nulla odit officiis, saepe, architecto voluptas, nam eos iste aliquid vel! Vero dolorem nemo amet eaque fuga illum, sed fugiat, ullam quo iste facere voluptates!</p>
</div>
<i class="fas fa-chevron-up"></i>
</main>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>可能的方法
获取文本容器元素的滚动位置（inception 和 lorem 文本）并用粉红色/白色隐藏/显示 div。 但我无法获取滚动位置。 ScrollTop 总是返回 0，我试图关注 this 但我的窗口不像链接问题那样可滚动，但它里面的元素是。 我不明白如何考虑它，我错过了一些关键点。 欢迎任何文章或阅读链接。
【问题讨论】：
-
澄清一下，您希望颜色发生变化，但内容在导航栏上方（以及？？一侧）不可见？
-
@AHaworth 是的。我希望 div (id : gradient_pink) 在滚动到特定位置时改变颜色，以便它以干净的方式与白色背景融合。
-
“干净”是指渐进式的吗？
-
@AHaworth 干净的意思是“不引人注目”。但是它被应用了。
标签： javascript html css scroll uiscrollview