Daisy 与 div 的其他内容重叠

时间：2021-06-04 04:36:19

标签： javascript html jquery css jquery-plugins

我是初学者。我正在尝试使用名为“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>

我必须做什么才能使插件不与其他内容重叠？

谢谢。

1 个答案:

答案 0 :(得分：1)

该插件不与其他内容重叠。您只需要更改点和线的颜色。

$('#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>

相关问题
最新问题