javascript - 滚动过去全屏背景图像后如何更改导航栏背景颜色
问题描述
我想让导航栏背景颜色在到达全屏背景图像的末尾时变为黑色。我正在使用引导程序 4。
我已经尝试了很多，最终得到了这篇文章，它显示导航栏至少在滚动时改变颜色，所以我拿了那个代码并修改了它，但它不起作用。如果有人能快速写出最基本的代码让导航栏在滚动全屏背景图像后消失，那将是惊人的，我将非常感激，谢谢。该片段显示了我目前拥有的内容：
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it
takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1200, function(){
// Add hash (#) to URL when done scrolling (default click
behavior)
window.location.hash = hash;
});
} // End if
});
});
$(document).ready(function(){
$("#infowebstyle1").click(function(){
$("#infoweb1").show();
$("#infoweb2").hide();
$("#infoweb3").hide();
});
});
$(document).ready(function(){
$("#infowebstyle2").click(function(){
$("#infoweb1").hide();
$("#infoweb2").show();
$("#infoweb3").hide();
});
});
$(document).ready(function(){
$("#infowebstyle3").click(function(){
$("#infoweb1").hide();
$("#infoweb2").hide();
$("#infoweb3").show();
});
});
$(document).ready(function(){
$("#infowebstyle1").click(function(){
$("#infotext1").show();
$("#infotext2").hide();
$("#infotext3").hide();
});
});
$(document).ready(function(){
$("#infowebstyle2").click(function(){
$("#infotext1").hide();
$("#infotext2").show();
$("#infotext3").hide();
});
});
$(document).ready(function(){
$("#infowebstyle3").click(function(){
$("#infotext1").hide();
$("#infotext2").hide();
$("#infotext3").show();
});
});
$(document).ready(function(){
$("#articlewebstyle1").click(function(){
$("#articleweb1").show();
$("#articleweb2").hide();
$("#articleweb3").hide();
});
});
$(document).ready(function(){
$("#articlewebstyle2").click(function(){
$("#articleweb1").hide();
$("#articleweb2").show();
$("#articleweb3").hide();
});
});
$(document).ready(function(){
$("#articlewebstyle3").click(function(){
$("#articleweb1").hide();
$("#articleweb2").hide();
$("#articleweb3").show();
});
});
$(document).ready(function(){
$("#articlewebstyle1").click(function(){
$("#articletext1").show();
$("#articletext2").hide();
$("#articletext3").hide();
});
});
$(document).ready(function(){
$("#articlewebstyle2").click(function(){
$("#articletext1").hide();
$("#articletext2").show();
$("#articletext3").hide();
});
});
$(document).ready(function(){
$("#articlewebstyle3").click(function(){
$("#articletext1").hide();
$("#articletext2").hide();
$("#articletext3").show();
});
});
$(document).ready(function(){
$("#blogwebstyle1").click(function(){
$("#blogweb1").show();
$("#blogweb2").hide();
$("#blogweb3").hide();
});
});
$(document).ready(function(){
$("#blogwebstyle2").click(function(){
$("#blogweb1").hide();
$("#blogweb2").show();
$("#blogweb3").hide();
});
});
$(document).ready(function(){
$("#blogwebstyle3").click(function(){
$("#blogweb1").hide();
$("#blogweb2").hide();
$("#blogweb3").show();
});
});
$(document).ready(function(){
$("#blogwebstyle1").click(function(){
$("#blogtext1").show();
$("#blogtext2").hide();
$("#blogtext3").hide();
});
});
$(document).ready(function(){
$("#blogwebstyle2").click(function(){
$("#blogtext1").hide();
$("#blogtext2").show();
$("#blogtext3").hide();
});
});
$(document).ready(function(){
$("#blogwebstyle3").click(function(){
$("#blogtext1").hide();
$("#blogtext2").hide();
$("#blogtext3").show();
});
});
$(document).ready(function(){
$("#photowebstyle1").click(function(){
$("#photoweb1").show();
$("#photoweb2").hide();
$("#photoweb3").hide();
});
});
$(document).ready(function(){
$("#photowebstyle2").click(function(){
$("#photoweb1").hide();
$("#photoweb2").show();
$("#photoweb3").hide();
});
});
$(document).ready(function(){
$("#photowebstyle3").click(function(){
$("#photoweb1").hide();
$("#photoweb2").hide();
$("#photoweb3").show();
});
});
$(document).ready(function(){
$("#photowebstyle1").click(function(){
$("#phototext1").show();
$("#phototext2").hide();
$("#phototext3").hide();
});
});
$(document).ready(function(){
$("#photowebstyle2").click(function(){
$("#phototext1").hide();
$("#phototext2").show();
$("#phototext3").hide();
});
});
$(document).ready(function(){
$("#photowebstyle3").click(function(){
$("#phototext1").hide();
$("#phototext2").hide();
$("#phototext3").show();
});
});
$(document).ready(function(){
$("#ecomwebstyle1").click(function(){
$("#ecomweb1").show();
$("#ecomweb2").hide();
$("#ecomweb3").hide();
});
});
$(document).ready(function(){
$("#ecomwebstyle2").click(function(){
$("#ecomweb1").hide();
$("#ecomweb2").show();
$("#ecomweb3").hide();
});
});
$(document).ready(function(){
$("#ecomwebstyle3").click(function(){
$("#ecomweb1").hide();
$("#ecomweb2").hide();
$("#ecomweb3").show();
});
});
$(document).ready(function(){
$("#ecomwebstyle1").click(function(){
$("#ecomtext1").show();
$("#ecomtext2").hide();
$("#ecomtext3").hide();
});
});
$(document).ready(function(){
$("#ecomwebstyle2").click(function(){
$("#ecomtext1").hide();
$("#ecomtext2").show();
$("#ecomtext3").hide();
});
});
$(document).ready(function(){
$("#ecomwebstyle3").click(function(){
$("#ecomtext1").hide();
$("#ecomtext2").hide();
$("#ecomtext3").show();
});
});/* KEYFRAMES START */
@keyframes slideInDown {
from {
transform: translate3d(0, -100%, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInDown {
animation-name: slideInDown;
}
@keyframes fadeIn {
0% {opacity: 0;}
10% {opacity: 0.1;}
20% {opacity: 0.2;}
30% {opacity: 0.3;}
40% {opacity: 0.4;}
50% {opacity: 0.5;}
60% {opacity: 0.6;}
70% {opacity: 0.7;}
80% {opacity: 0.8;}
90% {opacity: 0.9;}
100% {opacity: 1;}
}
.fadeIn {
animation-name: fadeIn;
}
@keyframes slideInLeft {
from {
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInLeft {
animation-name: slideInLeft;
}
@keyframes slideInRight {
from {
transform: translate3d(100%, 0, 0);
visibility: visible;
}
to {
transform: translate3d(0, 0, 0);
}
}
.slideInRight {
animation-name: slideInRight;
}
@keyframes jackInTheBox {
from {
opacity: 0;
transform: scale(0.1) rotate(30deg);
transform-origin: center bottom;
}
50% {
transform: rotate(-10deg);
}
70% {
transform: rotate(3deg);
}
to {
opacity: 1;
transform: scale(1);
}
}
.jackInTheBox {
animation-name: jackInTheBox;
}
/* KEYFRAMES END */
/* NAVBAR START */
.navbar {
height:90px;
color:white;
}
.nav-link {
text-align:center;
color:white;
background-color:transparent;
}
#logo {
width:175px;
height:65px;
border: 1px solid white;
}
li::after {
background-color: white;
content: "";
width: 0;
height: 3px;
left: 50%;
bottom: 0;
position: absolute;
}
li:hover::after {
width: 100%;
left:0%;
animation-name: fadeIn;
animation-delay: 0s;
animation-duration: 300ms;
}
.nav-item {
animation-name: slideInDown;
animation-duration: 800ms;
animation-delay: 0s;
font-family: 'Work Sans', sans-serif;
font-weight:100;
}
li {
position: relative;
}
.navbar-nav.navbar-center { /* Centers navbar items to the middle */
position: absolute;
left: 50%;
transform: translatex(-50%);
}
.navbar-nav > li{ /* Creates space between items in navbar */
margin-left:30px;
margin-right:30px;
}
.navbar-brand {
animation-name: slideInDown;
animation-duration: 800ms;
animation-delay: 0s;
}
.navbar a {
color: white;
padding: 12px 20px;
text-decoration: none;
border-radius: 8px;
font-size: 20px;
}
/* NAVBAR END */<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto:100|Work+Sans:100,300|Kalam:300|Coming+Soon|Quicksand:300,400,500" rel="stylesheet">
<link href="https://raw.githubusercontent.com/camwiegert/in-view/master/dist/in-view.min.js">
<link rel="stylesheet" type="text/css" href="stackoverflow.css"> <!-- This css file is prioritised over any others below it -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Home | Business</title>
<!-- Script Start -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Script End -->
</head>
<body>
<span id="home"></span>
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg fixed-top bg-transparent navbar-light">
<button class="navbar-toggler navbar-toggler-right collapsed" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbarNav">
<ul class="navbar-nav mr-auto navbar-center">
<li class="nav-item">
<a class="nav-link" href="#home" style="padding-left:20px; padding-right:20px;"><b>HOME</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#aboutus" style="padding-left:20px; padding-right:20px;"><b>ABOUT US</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features" style="padding-left:20px; padding-right:20px;"><b>FEATURES</b></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#templates" style="padding-left:20px; padding-right:20px;"><b>EXAMPLE </b></a>
</li>
</ul>
</div>
</nav>
<!-- Navbar End -->我还创建了一个CodePen。
解决方案
根据 Lalji 的回答，一旦.view滚动了 div（此处）高度（减去.navbar' 高度），我将修改提议的 JS 以添加类。我还会添加背景过渡以.navbar获得流畅的体验。
JS：
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= $('.view').height() - 90) {
$(".navbar").addClass('black-bg');
} else {
$(".navbar").removeClass("black-bg");
}
});
CSS：
.navbar {
transition: background 1s; /* Change 1s to the wanted duration */
}
可在此处作为 Lalji 笔的叉子购买。
推荐阅读
- python - TypeError：“NoneType”对象不能用 bs4 下标
- python - 比较python中的两个列表
- c# - 允许文本换行和平滑滚动的 Winforms 控件
- javascript - VueJS - 羽毛图标的无效渲染
- laravel - Laravel 混合夹板块供应商
- google-apps-script - 触发谷歌表格
- mysql - 如何在mysql中提取第一个日期和最后一个日期
- reactjs - React JS 仅在我刷新页面时读取道具数据
- windows - Windows 上的 Dtrace fbt 提供程序无法正常工作
- powershell - 如何在power shell中选择文本模式之前添加文本