在开始之前,我了解线性梯度不能通过CSS中的传统过渡来过渡。我知道渐变被视为图像。这是我的问题。我的网站上有一个导航栏。我正在与物化CSS作为我的框架。当用户访问我的网站时,导航栏是透明的白色,随着用户滚动,我希望导航栏在某个点过渡到线性渐变。这可能吗?这是我的标记:
$(document).ready(function(){
$('.sidenav').sidenav();
const parallax = () => {
let wScroll = $(window).scrollTop();
if (wScroll > 400) {
$("nav").addClass("bgchange");
} else {
$("nav").removeClass("bgchange");
}
};
parallax();
$(window).scroll(function() {
parallax();
});
});
.navlogo {
position: relative;
height: 55px !important;
width: 55px !important;
margin-top: 10px;
}
.bgchange {
z-index: 10;
background: linear-gradient(to right, #00BAA3, #1565c0) !important;
}
.navbar-fixed {position: absolute; z-index:10;}
.trans{
background-color: rgba(255,255,255,0.25) !important;
transition: all 0.7s ease-in-out;
}
input {
outline-style:none;
box-shadow:none;
border-color:transparent;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 40px white inset !important;
}
.sidenav .user-view .background img {
width: 100%;
height: 100%;
position: relative;
}
.sidenav .user-view {
height: 240px;
background-color: rgba(0, 0, 0, 0.5);
}
.name {
display: inline-block;
line-height: 15px;
}
.sale {
text-transform: uppercase;
font-weight: 900;
margin: 0 0 1rem;
padding: 0;
line-height: 1;
font-family: Futura, Helvetica, sans-serif;
font-size: 26px;
}
.brand-logo .text {
display: inline-block;
position: absolute;
margin-top: 18px;
margin-left: 5px;
text-transform: uppercase;
font-weight: 900;
padding: 0;
line-height: 1;
font-family: Futura, Helvetica, sans-serif;
font-size: 26px;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet"/>
<div class="navbar-fixed">
<nav class='trans'>
<div class="nav-wrapper">
<a href="#!" class="brand-logo "><img class='navlogo' src="static/images/IMG_6970.png" alt=""><span class="text">Dog<span>House</span></span></a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href='login.html' class="waves-effect waves-light btn indigo darken-4 btnnav">Login</a></li>
<li><a href='login.html' class="waves-effect waves-light btn indigo darken-4 btnnav">Sign up</a></li>
<li>
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
</ul>
</div>
</nav>
</div>
<ul class="sidenav " id="mobile-demo">
<li><div class="user-view">
<div class="background">
<img src="static/images/IMG_6971.png">
</div>
<div class="center center-align">
<a href="#sell"><span class="white-text sale">DogHouse</span></a>
<a href="#name"><span class="white-text name">The only app you will need for when you are on your dream vacation.</span></a>
<a href="#email"><span class="white-text email"><br>doghouse@gmail.com</span></a>
</div>
</div></li>
<li><a href="login.html"><i class="material-icons">supervisor_account</i> Login</a></li>
<li>
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
</ul>
答案 0 :(得分:0)
建议您不要在导航中创建动画元素,而是在导航中创建一个伪元素,其绝对位置的z索引为0
。然后只需转换伪元素的不透明度即可。
希望能帮到您的伙伴!
Codepen示例:https://codepen.io/samwalker/pen/KeOXBa
下面是更新的代码,值得注意的是我只更改了CSS:
$(document).ready(function() {
$('.sidenav').sidenav();
const parallax = () => {
let wScroll = $(window).scrollTop();
if (wScroll > 400) {
$("nav").addClass("bgchange");
} else {
$("nav").removeClass("bgchange");
}
};
parallax();
$(window).scroll(function() {
parallax();
});
});
.navlogo {
position: relative;
height: 55px !important;
width: 55px !important;
margin-top: 10px;
}
.bgchange {
z-index: 10;
/* this is now being applied to the sudo element */
/* background: linear-gradient(to right, #00baa3, #1565c0) !important; */
}
.navbar-fixed {
position: absolute;
z-index: 10;
}
.trans {
background-color: rgba(255, 255, 255, 0.25) !important;
/* this is now being applied to the sudo element */
transition: all 0.7s ease-in-out;
}
input {
outline-style: none;
box-shadow: none;
border-color: transparent;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 40px white inset !important;
}
.sidenav .user-view .background img {
width: 100%;
height: 100%;
position: relative;
}
.sidenav .user-view {
height: 240px;
background-color: rgba(0, 0, 0, 0.5);
}
.name {
display: inline-block;
line-height: 15px;
}
.sale {
text-transform: uppercase;
font-weight: 900;
margin: 0 0 1rem;
padding: 0;
line-height: 1;
font-family: Futura, Helvetica, sans-serif;
font-size: 26px;
}
.brand-logo .text {
display: inline-block;
position: absolute;
margin-top: 18px;
margin-left: 5px;
text-transform: uppercase;
font-weight: 900;
padding: 0;
line-height: 1;
font-family: Futura, Helvetica, sans-serif;
font-size: 26px;
}
/* sudo element */
.trans::before {
background: linear-gradient(to right, #00baa3, #1565c0);
bottom: 0;
content: '';
display: block;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: all 0.7s ease-in-out;
z-index: 0;
}
.trans.bgchange::before {
opacity: 1;
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet" />
<div class="navbar-fixed">
<nav class='trans'>
<div class="nav-wrapper">
<a href="#!" class="brand-logo "><img class='navlogo' src="static/images/IMG_6970.png" alt=""><span class="text">Dog<span>House</span></span>
</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href='login.html' class="waves-effect waves-light btn indigo darken-4 btnnav">Login</a></li>
<li><a href='login.html' class="waves-effect waves-light btn indigo darken-4 btnnav">Sign up</a></li>
<li>
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
</ul>
</div>
</nav>
</div>
<ul class="sidenav " id="mobile-demo">
<li>
<div class="user-view">
<div class="background">
<img src="static/images/IMG_6971.png">
</div>
<div class="center center-align">
<a href="#sell"><span class="white-text sale">DogHouse</span></a>
<a href="#name"><span class="white-text name">The only app you will need for when you are on your dream vacation.</span></a>
<a href="#email"><span class="white-text email"><br>doghouse@gmail.com</span></a>
</div>
</div>
</li>
<li><a href="login.html"><i class="material-icons">supervisor_account</i> Login</a></li>
<li>
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
<i class="material-icons">close</i>
</div>
</form>
</li>
</ul>