Javascript Daisy与div的其他内容重叠

Javascript Daisy与div的其他内容重叠,javascript,html,jquery,css,jquery-plugins,Javascript,Html,Jquery,Css,Jquery Plugins,我是初学者。我正在尝试使用一个名为“Daisy”的jQuery插件。我已经成功地实现了它,但我面临一个问题。该插件与div的其他内容重叠。下面我将给出我的完整代码 插件: $(文档).ready(函数(){ $(窗口)。滚动(函数(){ 如果($(this).scrollTop()>100){ $(“.header-1”).addClass(“导航颜色”); }否则{ $(“.header-1”).removeClass(“导航颜色”); } }); $(“#home”).daisyjs({

我是初学者。我正在尝试使用一个名为“Daisy”的jQuery插件。我已经成功地实现了它,但我面临一个问题。该插件与div的其他内容重叠。下面我将给出我的完整代码

插件:

$(文档).ready(函数(){
$(窗口)。滚动(函数(){
如果($(this).scrollTop()>100){
$(“.header-1”).addClass(“导航颜色”);
}否则{
$(“.header-1”).removeClass(“导航颜色”);
}
});
$(“#home”).daisyjs({
dotColor:“#fff”,
线条颜色:'#fff'
});
});
*{
保证金:0;
填充:0;
框大小:边框框;
字体系列:“蒙特塞拉特”,无衬线;
文字装饰:无!重要;
列表样式:无;
}
a{
颜色:#fff;
}
.按钮{
显示:块;
宽度:180px;
填充:15px 20px;
背景:透明;
颜色:#fff;
字体大小:粗体;
文本对齐:居中;
边框:2倍实心#fff;
边界半径:30px;
}
标题{
背景:深红色;
高度:100vh;
颜色:#fff;
宽度:100%;
}
.内容{
位置:绝对位置;
排名:0;
左:0;
右:0;
底部:0;
}
.标题-1{
位置:固定;
宽度:100%;
}
.导航颜色{
背景:#fff;
}
.标题-1.nav-颜色a{
颜色:#000!重要;
}
.标题-2{
宽度:100%;
高度:100vh;
显示:网格;
放置项目:中心;
}
.标题-2-1{
宽度:50%;
文本对齐:居中;
保证金:自动;
}
.标题-2-btn{
保证金:自动;
}
纳瓦尔先生{
颜色:#fff!重要;
}
.导航杆切换器{
颜色:#fff!重要;
}
@介质(最大宽度:576px){
.标题-2-1{
宽度:95%!重要;
}
}
@介质(最大宽度:768px){
.标题-2-1{
宽度:90%!重要;
}
}
@介质(最大宽度:991px){
.标题-1{
背景:#fff;
宽度:100%!重要;
文本对齐:居中;
}
.标题-1 a{
颜色:黑色!重要;
}
.标题-2-1{
宽度:80%!重要;
}
}

测试网页
欢迎
我是一名网络开发者

Lorem ipsum,dolor sit amet Concertetur Adipising Elite。马尼之歌 产褥期胃扭转


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

$('#home').daisyjs({
    dotColor: '#000000',
    lineColor: '#000000'
});
更改后,您将看到以下输出代码段输出

$(文档).ready(函数(){
$(窗口)。滚动(函数(){
如果($(this).scrollTop()>100){
$(“.header-1”).addClass(“导航颜色”);
}否则{
$(“.header-1”).removeClass(“导航颜色”);
}
});
$(“#home”).daisyjs({
点颜色:'#000000',
线条颜色:'#000000'
});
});
*{
保证金:0;
填充:0;
框大小:边框框;
字体系列:“蒙特塞拉特”,无衬线;
文字装饰:无!重要;
列表样式:无;
}
a{
颜色:#fff;
}
.按钮{
显示:块;
宽度:180px;
填充:15px 20px;
背景:透明;
颜色:#fff;
字体大小:粗体;
文本对齐:居中;
边框:2倍实心#fff;
边界半径:30px;
}
标题{
背景:深红色;
高度:100vh;
颜色:#fff;
宽度:100%;
}
.内容{
位置:绝对位置;
排名:0;
左:0;
右:0;
底部:0;
}
.标题-1{
位置:固定;
宽度:100%;
}
.导航颜色{
背景:#fff;
}
.标题-1.nav-颜色a{
颜色:#000!重要;
}
.标题-2{
宽度:100%;
高度:100vh;
显示:网格;
放置项目:中心;
}
.标题-2-1{
宽度:50%;
文本对齐:居中;
保证金:自动;
}
.标题-2-btn{
保证金:自动;
}
纳瓦尔先生{
颜色:#fff!重要;
}
.导航杆切换器{
颜色:#fff!重要;
}
@介质(最大宽度:576px){
.标题-2-1{
宽度:95%!重要;
}
}
@介质(最大宽度:768px){
.标题-2-1{
宽度:90%!重要;
}
}
@介质(最大宽度:991px){
.标题-1{
背景:#fff;
宽度:100%!重要;
文本对齐:居中;
}
.标题-1 a{
颜色:黑色!重要;
}
.标题-2-1{
宽度:80%!重要;
}
}

测试网页
欢迎
我是网络开发者