导航条初始透明，滚动后应用线性梯度

Question

我正在Bootstrap的导航栏上工作，并试图在页面加载时实现透明的导航栏，当你向下滚动时，导航栏会变为线性背景。

导航栏使用的代码：

<nav class="navbar navbar-expand-lg bgdefault fixed-top navbar-transparent" color-on-scroll="500"> 
</nav>

使用SASS，我将样式应用于导航栏：

$bgDefault      : #013e75;
@mixin bg-gradient(){
background: rgb(95,139,178); 
background: linear-gradient(90deg, rgba(95,139,178,1) 0%, rgba(1,72,136,1) 55%, rgba(1,62,117,1) 100%);
}
$bgHighlight    : #5f8bb2;
$colDefault     : #ecf0f1;
$colHighlight   : #ffbbbc;
$dropDown       : false;
.navbar {
@include bg-gradient();
.navbar-brand {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
.navbar-text {
color: $colDefault; 
a {
color: $colHighlight;
&:hover, &:focus {
color: $colHighlight; }}}
.navbar-nav {
.nav-link {
color: $colDefault;
border-radius: .25rem;
margin: 0 0.25em;
&:not(.disabled) {
&:hover, &:focus {
color: $colHighlight; }}}
@if ($dropDown) {
.dropdown-menu {
background-color: $bgDefault;
border-color: $bgHighlight;
.dropdown-item {
color: $colDefault;
&:hover, &:focus, &.active {
color: $colHighlight;
background-color: $bgHighlight; }}
.dropdown-divider {
border-top-color: $bgHighlight; }}}
.nav-item.active, .nav-item.show {
.nav-link, .nav-link:hover, .nav-link:focus {
color: $colHighlight;
background-color: $bgHighlight; }}}
.navbar-toggle {
border-color: $bgHighlight;
&:hover, &:focus {
background-color: $bgHighlight; }
.navbar-toggler-icon {
color: $colDefault; }}
.navbar-collapse,
.navbar-form {
border-color: $colDefault; }
.navbar-link {
color: $colDefault;
&:hover {
color: $colHighlight; }}}
@media (max-width: 575px) {
.navbar-expend-sm .navbar-nav .show .dropdown-menu {
.dropdown-item {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
.dropdown-item.active {
color: $colHighlight;
background-color: $bgHighlight; }}}
@media (max-width: 767px) {
.navbar-expend-md .navbar-nav .show .dropdown-menu {
.dropdown-item {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
.dropdown-item.active {
color: $colHighlight;
background-color: $bgHighlight; }}}
@media (max-width: 991px) {
.navbar-expend-lg .navbar-nav .show .dropdown-menu {
.dropdown-item {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
.dropdown-item.active {
color: $colHighlight;
background-color: $bgHighlight; }}}
@media (max-width: 1199px) {
.navbar-expend-xl .navbar-nav .show .dropdown-menu {
.dropdown-item {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
.dropdown-item.active {
color: $colHighlight;
background-color: $bgHighlight; }}}
.navbar-expend .navbar-nav .show .dropdown-menu {
.dropdown-item {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
.dropdown-item.active {
color: $colHighlight;
background-color: $bgHighlight; }}

因此，基本上，当页面加载或滚动到页面顶部时，我希望有一个基于"导航栏透明"的透明导航栏，并且查看文档，导航栏的更改是通过"bgdefault"实现的。

有没有想过如何才能避开这种行为？

Answer 1

伙计！

在javascript:中查看此代码

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollpos = window.pageYOffset;
if (prevScrollpos > currentScrollpos) {
document.getElementById("navbar").style.top = "0";
document.getElementById("navbar").style.backgroundColor = "#000000";
}
else {
document.getElementById("navbar").style.top = "-100px";
document.getElementById("navbar").style.backgroundColor = "transparent";
}
prevScrollpos = currentScrollpos;
}

只需将其传递到.js文件中，然后将其调用到html中。