Daisy 与 div 的其他内容重叠
Daisy is overlapping the other contents of the div
我是初学者。我正在尝试使用名为“Daisy”的 jQuery 插件。我已经成功地实施了它，但我遇到了一个问题。该插件与 div 的其他内容重叠。下面我给出了我的完整代码。
插件：Daisy GitHub
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$(".header-1").addClass("nav-color");
} else {
$(".header-1").removeClass("nav-color");
}
});
$('#home').daisyjs({
dotColor: '#fff',
lineColor: '#fff'
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
text-decoration: none !important;
list-style: none;
}
a {
color: #fff;
}
.button {
display: block;
width: 180px;
padding: 15px 20px;
background: transparent;
color: #fff;
font-weight: bold;
text-align: center;
border: 2px solid #fff;
border-radius: 30px;
}
header {
background: crimson;
height: 100vh;
color: #fff;
width: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.header-1 {
position: fixed;
width: 100%;
}
.nav-color {
background: #fff;
}
.header-1.nav-color a {
color: #000 !important;
}
.header-2 {
width: 100%;
height:100vh;
display: grid;
place-items: center;
}
.header-2-1 {
width: 50%;
text-align: center;
margin: auto;
}
.header-2-btn {
margin: auto;
}
.navbar a {
color: #fff !important;
}
.navbar-toggler {
color: #fff !important;
}
@media (max-width: 576px) {
.header-2-1 {
width: 95% !important;
}
}
@media (max-width: 768px) {
.header-2-1 {
width: 90% !important;
}
}
@media (max-width: 991px) {
.header-1 {
background: #fff;
width: 100% !important;
text-align: center;
}
.header-1 a {
color: black !important;
}
.header-2-1 {
width: 80% !important;
}
}
<!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">
<title>Test Webpage</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<header id="home">
<div class="content">
<div class="header-1">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<div class="container-fluid">
<a class="navbar-brand" href="#">Test Webpage</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">Reviews</a>
<a class="nav-link" href="#">Portfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="header-2 container">
<div class="header-2-1">
<h2>Welcome</h2>
<h1 class="my-4">I'M A WEB DEVELOPER</h1>
<p class="my-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos explicabo magni
voluptates rerum laborum cum</p>
<a href="#" class="button header-2-btn">DOWNLOAD CV</a>
</div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/warengonzaga/daisy.js/daisy.min.js"></script>
</body>
</html>
我必须怎么做才能使插件不与其他内容重叠？
谢谢。
插件不与其他内容重叠。你只需要改变点和线的颜色。
$('#home').daisyjs({
dotColor: '#000000',
lineColor: '#000000'
});
更改后您将看到以下输出片段输出。
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$(".header-1").addClass("nav-color");
} else {
$(".header-1").removeClass("nav-color");
}
});
$('#home').daisyjs({
dotColor: '#000000',
lineColor: '#000000'
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
text-decoration: none !important;
list-style: none;
}
a {
color: #fff;
}
.button {
display: block;
width: 180px;
padding: 15px 20px;
background: transparent;
color: #fff;
font-weight: bold;
text-align: center;
border: 2px solid #fff;
border-radius: 30px;
}
header {
background: crimson;
height: 100vh;
color: #fff;
width: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.header-1 {
position: fixed;
width: 100%;
}
.nav-color {
background: #fff;
}
.header-1.nav-color a {
color: #000 !important;
}
.header-2 {
width: 100%;
height:100vh;
display: grid;
place-items: center;
}
.header-2-1 {
width: 50%;
text-align: center;
margin: auto;
}
.header-2-btn {
margin: auto;
}
.navbar a {
color: #fff !important;
}
.navbar-toggler {
color: #fff !important;
}
@media (max-width: 576px) {
.header-2-1 {
width: 95% !important;
}
}
@media (max-width: 768px) {
.header-2-1 {
width: 90% !important;
}
}
@media (max-width: 991px) {
.header-1 {
background: #fff;
width: 100% !important;
text-align: center;
}
.header-1 a {
color: black !important;
}
.header-2-1 {
width: 80% !important;
}
}
<!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">
<title>Test Webpage</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<header id="home">
<div class="content">
<div class="header-1">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<div class="container-fluid">
<a class="navbar-brand" href="#">Test Webpage</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">Reviews</a>
<a class="nav-link" href="#">Portfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="header-2 container">
<div class="header-2-1">
<h2>Welcome</h2>
<h1 class="my-4">I'M A WEB DEVELOPER</h1>
<p class="my-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos explicabo magni
voluptates rerum laborum cum</p>
<a href="#" class="button header-2-btn">DOWNLOAD CV</a>
</div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/warengonzaga/daisy.js/daisy.min.js"></script>
</body>
</html>
我是初学者。我正在尝试使用名为“Daisy”的 jQuery 插件。我已经成功地实施了它，但我遇到了一个问题。该插件与 div 的其他内容重叠。下面我给出了我的完整代码。
插件：Daisy GitHub
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$(".header-1").addClass("nav-color");
} else {
$(".header-1").removeClass("nav-color");
}
});
$('#home').daisyjs({
dotColor: '#fff',
lineColor: '#fff'
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
text-decoration: none !important;
list-style: none;
}
a {
color: #fff;
}
.button {
display: block;
width: 180px;
padding: 15px 20px;
background: transparent;
color: #fff;
font-weight: bold;
text-align: center;
border: 2px solid #fff;
border-radius: 30px;
}
header {
background: crimson;
height: 100vh;
color: #fff;
width: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.header-1 {
position: fixed;
width: 100%;
}
.nav-color {
background: #fff;
}
.header-1.nav-color a {
color: #000 !important;
}
.header-2 {
width: 100%;
height:100vh;
display: grid;
place-items: center;
}
.header-2-1 {
width: 50%;
text-align: center;
margin: auto;
}
.header-2-btn {
margin: auto;
}
.navbar a {
color: #fff !important;
}
.navbar-toggler {
color: #fff !important;
}
@media (max-width: 576px) {
.header-2-1 {
width: 95% !important;
}
}
@media (max-width: 768px) {
.header-2-1 {
width: 90% !important;
}
}
@media (max-width: 991px) {
.header-1 {
background: #fff;
width: 100% !important;
text-align: center;
}
.header-1 a {
color: black !important;
}
.header-2-1 {
width: 80% !important;
}
}
<!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">
<title>Test Webpage</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<header id="home">
<div class="content">
<div class="header-1">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<div class="container-fluid">
<a class="navbar-brand" href="#">Test Webpage</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">Reviews</a>
<a class="nav-link" href="#">Portfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="header-2 container">
<div class="header-2-1">
<h2>Welcome</h2>
<h1 class="my-4">I'M A WEB DEVELOPER</h1>
<p class="my-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos explicabo magni
voluptates rerum laborum cum</p>
<a href="#" class="button header-2-btn">DOWNLOAD CV</a>
</div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/warengonzaga/daisy.js/daisy.min.js"></script>
</body>
</html>
我必须怎么做才能使插件不与其他内容重叠？
谢谢。
插件不与其他内容重叠。你只需要改变点和线的颜色。
$('#home').daisyjs({
dotColor: '#000000',
lineColor: '#000000'
});
更改后您将看到以下输出片段输出。
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$(".header-1").addClass("nav-color");
} else {
$(".header-1").removeClass("nav-color");
}
});
$('#home').daisyjs({
dotColor: '#000000',
lineColor: '#000000'
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
text-decoration: none !important;
list-style: none;
}
a {
color: #fff;
}
.button {
display: block;
width: 180px;
padding: 15px 20px;
background: transparent;
color: #fff;
font-weight: bold;
text-align: center;
border: 2px solid #fff;
border-radius: 30px;
}
header {
background: crimson;
height: 100vh;
color: #fff;
width: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.header-1 {
position: fixed;
width: 100%;
}
.nav-color {
background: #fff;
}
.header-1.nav-color a {
color: #000 !important;
}
.header-2 {
width: 100%;
height:100vh;
display: grid;
place-items: center;
}
.header-2-1 {
width: 50%;
text-align: center;
margin: auto;
}
.header-2-btn {
margin: auto;
}
.navbar a {
color: #fff !important;
}
.navbar-toggler {
color: #fff !important;
}
@media (max-width: 576px) {
.header-2-1 {
width: 95% !important;
}
}
@media (max-width: 768px) {
.header-2-1 {
width: 90% !important;
}
}
@media (max-width: 991px) {
.header-1 {
background: #fff;
width: 100% !important;
text-align: center;
}
.header-1 a {
color: black !important;
}
.header-2-1 {
width: 80% !important;
}
}
<!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">
<title>Test Webpage</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<header id="home">
<div class="content">
<div class="header-1">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-transparent">
<div class="container-fluid">
<a class="navbar-brand" href="#">Test Webpage</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-row-reverse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link" href="#">Reviews</a>
<a class="nav-link" href="#">Portfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="header-2 container">
<div class="header-2-1">
<h2>Welcome</h2>
<h1 class="my-4">I'M A WEB DEVELOPER</h1>
<p class="my-4">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quos explicabo magni
voluptates rerum laborum cum</p>
<a href="#" class="button header-2-btn">DOWNLOAD CV</a>
</div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/warengonzaga/daisy.js/daisy.min.js"></script>
</body>
</html>