html - 当我仅使用 CSS 向下滚动时,如何使导航栏固定在顶部并变得透明?
问题描述
我是 html/css 的新手,我只想使用 HTML/CSS 来使导航栏在向下滚动变为透明时始终位于顶部。这是可能的?现在这让我发疯了,我无法在导航栏下制作背景图片。我应该在哪里更改 CSS 部分?这是我期望成为
[链接] https://frankyeah.github.io/Front-Enter/index.html
我所做的是以下
HTML:
<nav>
<div>
<a href="" class="logo"><img src="./image/FE_logo-4.png"></a>
Logo
</div>
<div class="navlist">
<a href="">explore</a>
<a href="">Skill</a>
<a href="">login</a>
</div>
<div>
<a href="" class="search"><img src="./image/FE_search_green.png">
</a>
</div>
</nav>
<main>
<div class="mainview"></div>
<div class="mainview2"></div>
<div></div>
<div></div>
<div></div>
</main>
CSS:
<style>
nav{
display: flex;
justify-content: space-between;
flex-flow:row nowrap;
position: fixed;
width:100%;
background-color: white;
opacity:0.7;
z-index:999 ;
margin: 0 auto;
padding: 0;
}
.logo>img{
display: flex;
flex-flow:row nowrap;
width:50%;
margin-top:5%;
margin-left:20%;
}
.navlist{
display: flex;
flex-flow:row nowrap;
width:40%;
justify-content: space-evenly;
margin-top:2.5%;
margin-left:40%;
font-family:"arial";
}
a:hover{
color: #66FFFF;
}
div a{
text-decoration: none;
color:#AAAAAA;
}
.search>img {
display: flex;
flex-flow:row nowrap;
margin:30px 50px;
width:20%;
}
.mainview{
overflow: hidden;
background-image:url("../image/key-visual.jpg");
background-repeat:no-repeat;
background-attachment:scroll;
background-size: cover;
widows: 100%;
height: 100%;
padding-top: 50%;
}
.mainview2{
background-image:url("../image/second-img.jpg");
background-attachment:scroll;
background-position:top left;
background-repeat:no-repeat;
background-size: cover;
widows: 100%;
height: 100%;
padding-top: 50%;
margin: 0 0;
}
</style>
我希望背景图像会在我的导航栏下,向下滚动时导航栏会是透明的,但是出了点问题。
解决方案
我认为您需要了解视差滚动效果。你可以从这个链接学习它:https ://www.w3schools.com/howto/howto_css_parallax.asp
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set a specific height */
height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element -->
<div class="parallax"></div>
可以使用 css 和 javascript 根据滚动位置更改导航栏透明度。我已经修改了您的代码,您可以在此链接中看到它:https ://jsfiddle.net/SyamKumarD/r37n6cp8/20/
希望这会有所帮助
推荐阅读
- google-apps-script - 如何在谷歌电子表格中查找形状/绘图位置
- java - 为了让程序绘制图 1 中看到的图像,我应该对我的代码进行哪些更改?
- php - 关于使用 sql 数据库在 php 中更新/删除的 PHP/SQL 问题
- python - 使用来自 pandas 中其他两列的匹配项创建新列
- c# - 在 for 循环中向 Panel 添加控件只会添加控件的第一次迭代
- javascript - 我的滚动顶部按钮工作,但它不应该显示的按钮
- laravel - 如何使用 Laravel RestApi 和 vuejs 上传照片
- docker - 如何限制 Kubernetes 容器查看主机(K8s minion)操作系统上的块设备列表?
- sql - SQL - 如何在查询中包含视图?
- mysql - SQL 存储过程:如果语句未按预期运行