javascript - 当页面上只有图像时如何使菜单重叠
问题描述
我想将主菜单与图像合并,但仅当主菜单下有图像时(例如,如果导航栏下有一些文本,则主菜单在白色部分将是黑色的)这是我的一个示例我正在努力实现https://prestige-theme-vogue.myshopify.com/
这是我的代码(HTML + CSS + JavaScript):
var options = {
accessibility: true,
prevNextButtons: true,
pageDots: true,
setGallerySize: false,
arrowShape: {
x0: 10,
x1: 60,
y1: 50,
x2: 60,
y2: 45,
x3: 15
}
};
var carousel = document.querySelector('[data-carousel]');
var slides = document.getElementsByClassName('carousel-cell');
var flkty = new Flickity(carousel, options);
flkty.on('scroll', function() {
flkty.slides.forEach(function(slide, i) {
var image = slides[i];
var x = (slide.target + flkty.x) * -1 / 3;
image.style.backgroundPosition = x + 'px';
});
});
body {
font-family: "Inter";
}
/*ANN BAR*/
.annbar {
align-items: center;
background-color: #000;
border-style: solid;
border-width: 0;
box-sizing: border-box;
color: #fff;
display: flex;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
height: 2.5rem;
justify-content: center;
line-height: 24px;
}
/**NAVIGATION**/
.navigation {
display: flex;
justify-content: space-around;
align-items: center;
/* margin-top: 15px;*/
}
/*Menu items*/
.navigation .menu-items ul {
display: flex;
justify-content: center;
align-items: center;
}
.navigation .menu-items ul>li {
margin-right: 10px;
}
/*Menu Logo*/
.navigation .logo {
/* box-sizing: border-box; */
color: #333;
font-family: Inter, sans-serif;
font-size: 2em;
font-weight: 700;
line-height: 44px;
margin: 0 0 auto;
}
/*Menu Icons*/
.navigation .menu-icons ul {
display: flex;
justify-content: center;
align-items: center;
}
.navigation .menu-icons ul>li {
color: #000;
margin-right: 10px;
}
.navigation .menu-icons li.cart {
display: flex;
align-items: center;
padding-left: 5px;
}
.navigation .menu-icons li.cart img {
margin-right: 5px;
}
/*Carousel*/
.hero-slider {
width: 100%;
height: 90vh;
overflow: hidden;
}
.hero-slider .overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient( to bottom, transparentize(#0E1D33, 0.2), transparentize(#0E1D33, 0.8));
}
.hero-slider .carousel-cell {
background: url(./assets/imgs/Header\ slider.png);
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.hero-slider .carousel-cell .inner {
position: relative;
top: 50%;
transform: translateY(-50%);
color: white;
text-align: center;
}
.hero-slider .carousel-cell .inner .sub-title {
font-size: 2.2rem;
line-height: 1.2em;
font-weight: 200;
font-style: italic;
letter-spacing: 3px;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 5px;
}
.hero-slider .carousel-cell .inner .title {
font-size: 3rem;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: 3px;
margin-bottom: 40px;
}
.hero-slider .carousel-cell .inner .btn {
border: 1px solid #fff;
padding: 14px 18px;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 3px;
color: #fff;
text-decoration: none;
transition: all .2s ease;
}
.hero-slider .carousel-cell .inner .btn:hover {
background: #fff;
color: #000;
}
.hero-slider .flickity-prev-next-button {
width: 80px;
height: 80px;
background: transparent;
}
.hero-slider .flickity-prev-next-button:hover {
background: transparent;
}
.hero-slider .flickity-prev-next-button .arrow {
fill: white;
}
.hero-slider .flickity-page-dots {
bottom: 30px;
}
.hero-slider .flickity-page-dots .dot {
width: 30px;
height: 4px;
opacity: 1;
background: rgba(255, 255, 255, 0.5);
border: 0 solid white;
border-radius: 0;
}
.hero-slider .flickity-page-dots .dot.is-selected {
background: #f00;
border: 0 solid #f00;
}
/*Welcome header*/
.welcome-header {
margin-top: 20px;
display: flex;
flex-direction: column;
text-align: center;
padding-bottom: 20px;
align-items: center;
}
.welcome-header h2 {
font-family: Inter;
font-style: normal;
font-weight: 900;
font-size: 25px;
line-height: 42px;
color: #000000;
}
.welcome-header p {
width: 816px;
height: 60px;
}
.welcome-header .btn-welcome {
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
width: 220px;
height: 40px;
background-color: black;
color: white;
font-size: 15px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.css">
<header>
<div class="annbar">
<strong>Free Shipping</strong> On all order above $100
</div>
<nav class="navigation">
<div class="menu-items">
<ul>
<li>Men</li>
<li>Women</li>
<li>Story</li>
</ul>
</div>
<div class="logo">
<h1>My page</h1>
</div>
<div class="menu-icons">
<ul>
<li><img src="assets/icons/search.svg" alt="search"></li>
<li><img src="assets/icons/user.svg" alt="search"></li>
<li class="cart"><img src="assets/icons/Cart.svg" alt="search">Cart(0)</li>
</ul>
</div>
</nav>
</header>
<div class="hero-slider" data-carousel>
<div class="carousel-cell">
<div class="overlay"></div>
<div class="inner">
<h3 class="subtitle">Slide 1</h3>
<h2 class="title">Flickity Parallax</h2>
<a href="https://flickity.metafizzy.co/" target="_blank" class="btn">Tell me more</a>
</div>
</div>
<div class="carousel-cell" ">
<div class="overlay "></div>
<div class="inner ">
<h3 class="subtitle ">Slide 2</h3>
<h2 class="title ">Flickity Parallax</h2>
<a href="https://flickity.metafizzy.co/ " target="_blank " class="btn ">Tell me more</a>
</div>
</div>
<div class="carousel-cell ">
<div class="overlay "></div>
<div class="inner ">
<h3 class="subtitle ">Slide 3</h3>
<h2 class="title ">Flickity Parallax</h2>
<a href="https://flickity.metafizzy.co/ " target="_blank " class="btn ">Tell me more</a>
</div>
</div>
</div>
<div class="welcome-header ">
<h2>Welcome to my page</h2>
<p>Lorem ipsum Lorem ipsum</p>
<a href="http:// " class="btn-welcome ">Our Story</a>
</div>
<script type="text/javascript " src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.pkgd.min.js "></script>
解决方案
我认为这会起作用:
header {
position: absolute;
width: 100%;
z-index: 99;
}
推荐阅读
- c++ - 2 的补码二进制预期输出
- assembly - 我试图理解“rep scasb byte [edi]”指令
- elasticsearch - ELK docker image 观察到数组中的对象没有得到很好的支持错误
- python-3.x - jinja2中如何区分字段和子表单?
- javascript - 表单验证:检查是否选择了多个复选框和单选按钮
- mysql - MySQL变量分配不分配给变量 - 我做错了什么?
- proxy - 负载均衡 Fiddler 代理
- django - 使用 S3 存储桶中的对象创建 Django 对象
- android - 使用“this”在片段中调用上下文
- mule-component - Mulesoft的后台进程