[英]How i can make my nav bar to come over my background
所以在我的项目中，第一个导航栏来了，然后是我的网页很长的背景，并制作了一个滚动按钮，也有一个水平滚动，我不知道为什么。 但我希望我的导航栏从背景中出来，而背景应该后退。 但它没有发生。
https://codepen.io/mohit-04/pen/wvJxPOK
指数
<!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>Document</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<center>
<!-- <navbar>
</navbar> -->
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1"><h1> TEAM VIEWER</h1></span>
</nav>
<div class="carousel" data-carousel>
<button
class="carousel-button next"
data-carousel-button="next"
data-carousel-button
>
⇝
</button>
<button
class="carousel-button prev"
data-carousel-button="prev"
data-carousel-button
>
⇜
</button>
<ul data-slides>
<li class="slide" data-active>
<div class="card" style="width: 18rem">
<img
class="card-img-top"
src="https://images.unsplash.com/photo-1644982647531-daff2c7383f3?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=600"
alt="Card image cap"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</li>
<li class="slide">
<div class="card" style="width: 18rem">
<img
class="card-img-top"
src="https://images.unsplash.com/photo-1653491888857-6cb8c8f0264c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
alt="Card image cap"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</li>
<li class="slide">
<div class="card" style="width: 18rem">
<img
class="card-img-top"
src="https://images.unsplash.com/photo-1625215081436-85323ed5042c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
alt="Card image cap"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</li>
<li class="slide">
<div class="card" style="width: 18rem">
<img
class="card-img-top"
src="https://images.unsplash.com/photo-1653597859079-bc6d0e9101de?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzNHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
alt="Card image cap"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</li>
<li class="slide">
<div class="card" style="width: 18rem">
<img
class="card-img-top"
src="https://images.unsplash.com/photo-1653604212161-b50f445f7987?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0M3x8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60"
alt="Card image cap"
height="200"
width="100"
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</li>
</ul>
</div>
</center>
</body>
</html>
风格
@import url("https://fonts.googleapis.com/css2?family=Lora:ital@1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Halant:wght@500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quattrocento&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Quattrocento&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
background-image: url("b.avif");
background-repeat: no-repeat;
background-size: cover;
}
nav {
position: relative;
}
h1 {
font-size: 50px;
font-family: "Halant", serif;
}
h5 {
font-size: 30px;
font-weight: bolder;
font-family: "Quattrocento", serif;
}
p {
font-family: "Nunito Sans", sans-serif;
}
a {
font-family: "Quattrocento", serif;
}
.carousel {
width: 100vw;
height: 100vh;
position: relative;
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: 200ms opacity ease-in-out;
}
.slide > img {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
}
.carousel > ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
.slide[data-active] {
opacity: 1;
}
.carousel-button {
position: absolute;
z-index: 2;
background: none;
border: none;
font-size: 4rem;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
border-radius: 0.25rem;
padding: 0 0.5rem;
background-color: rgba(0, 0, 0, 0.1);
}
.carousel-button:hover,
.carousel-button:focus {
color: purple;
background-color: rgba(0, 0, 0, 0.2);
}
.carousel-button:focus {
outline: 1px solid black;
}
.carousel-button.prev {
left: 24rem;
}
.carousel-button.next {
right: 24rem;
}
.card {
box-shadow: 1px 2px 3px 4px rgba(20, 20, 20, 0.3);
}
要删除水平滚动条set overflow-x to hidden of body 。
为了让导航栏挺身而出，将其position to absolute而不是相对。
// taking ids const button = document.querySelectorAll("[data-carousel-button]"); // looping though next and prev button means // ** LOGIC ** // storing all the images in array and then if we click the // left arrow then it will go to -1 and if right then +1 //through this it will navigate through each images using index of images button.forEach((button) => { // function which check which button is gonna be clicked button.addEventListener("click", () => { const offset = button.dataset.carouselButton === "next" ? 1 : -1; // to navigate closest parent element making a loop in ul tag to navigate each li const slides = button .closest("[data-carousel]") .querySelector("[data-slides]"); // just checking which slide means li has data active tag const activeSlide = slides.querySelector("[data-active]"); // extracting all the li in array // getting the active slide and + offset means what we have to do means either +1 or -1 let newIndex = [...slides.children].indexOf(activeSlide) + offset; // if it comes to last element and again user click left then it automatically goes to last element if (newIndex < 0) newIndex = slides.children.length - 1; if (newIndex >= slides.children.length) newIndex = 0; // adding .active to that slide and removeing data-active to the previous one slides.children[newIndex].dataset.active = true; delete activeSlide.dataset.active; }); });
@import url("https://fonts.googleapis.com/css2?family=Lora:ital@1&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Halant:wght@500&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Quattrocento&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Quattrocento&display=swap"); *, *::before, *::after { box-sizing: border-box; } body { background-image: url("https://images.unsplash.com/photo-1520052205864-92d242b3a76b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2069&q=80"); background-repeat: no-repeat; background-size: cover; overflow-x: hidden /* to remove horizontal scrollbar */ } nav { position: absolute !important; /* to make nav bar come forward*/ } h1 { font-size: 50px; font-family: "Halant", serif; } h5 { font-size: 30px; font-weight: bolder; font-family: "Quattrocento", serif; } p { font-family: "Nunito Sans", sans-serif; } a { font-family: "Quattrocento", serif; } .carousel { width: 100vw; height: 100vh; position: relative; } .slide { position: absolute; inset: 0; opacity: 0; transition: 200ms opacity ease-in-out; } .slide>img { display: block; height: 100%; width: 100%; object-fit: cover; } .carousel>ul { margin: 0; padding: 0; list-style: none; display: flex; } .slide[data-active] { opacity: 1; } .carousel-button { position: absolute; z-index: 2; background: none; border: none; font-size: 4rem; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.5); cursor: pointer; border-radius: 0.25rem; padding: 0 0.5rem; background-color: rgba(0, 0, 0, 0.1); } .carousel-button:hover, .carousel-button:focus { color: purple; background-color: rgba(0, 0, 0, 0.2); } .carousel-button:focus { outline: 1px solid black; } .carousel-button.prev { left: 24rem; } .carousel-button.next { right: 24rem; } .card { box-shadow: 1px 2px 3px 4px rgba(20, 20, 20, 0.3); }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> <center> <!-- <navbar> </navbar> --> <nav class="navbar navbar-light bg-light"> <span class="navbar-brand mb-0 h1"><h1> TEAM VIEWER</h1></span> </nav> <div class="carousel" data-carousel> <button class="carousel-button next" data-carousel-button="next" data-carousel-button> ⇝ </button> <button class="carousel-button prev" data-carousel-button="prev" data-carousel-button> ⇜ </button> <ul data-slides> <li class="slide" data-active> <div class="card" style="width: 18rem"> <img class="card-img-top" src="https://images.unsplash.com/photo-1644982647531-daff2c7383f3?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=60&raw_url=true&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=600" alt="Card image cap" /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </li> <li class="slide"> <div class="card" style="width: 18rem"> <img class="card-img-top" src="https://images.unsplash.com/photo-1653491888857-6cb8c8f0264c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60" alt="Card image cap" /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </li> <li class="slide"> <div class="card" style="width: 18rem"> <img class="card-img-top" src="https://images.unsplash.com/photo-1625215081436-85323ed5042c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60" alt="Card image cap" /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </li> <li class="slide"> <div class="card" style="width: 18rem"> <img class="card-img-top" src="https://images.unsplash.com/photo-1653597859079-bc6d0e9101de?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzNHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60" alt="Card image cap" /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </li> <li class="slide"> <div class="card" style="width: 18rem"> <img class="card-img-top" src="https://images.unsplash.com/photo-1653604212161-b50f445f7987?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0M3x8fGVufDB8fHx8&auto=format&fit=crop&w=600&q=60" alt="Card image cap" height="200" width="100" /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text"> Some quick example text to build on the card title and make up the bulk of the card's content. </p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </li> </ul> </div> </center>
使用带有导航栏的“ sticky-top ”，剩下的就交给它了
<nav class="navbar navbar-light bg-light sticky-top">
当我向上滚动并在向上滚动或当我将鼠标悬停在上面时，如何使导航条变得透明？
[英]How do i make my nav bar transparent when I scroll down and come back when I scroll up or when I hover my mouse over is?
如何使我的徽标 go 向左，我的导航栏图标在中间？
[英]How do I make my logo go towards the left and my nav bar icons in the middle?
如何使我的导航栏（具有透明背景）在视差滚动网页中浮动/重叠背景？
[英]How can I make my navigation bar (which has transparent background) to float/overlap my background in a parallax-scrolling webpage?
如何使用JQuery在导航栏中单击时滑动一个滑动条
[英]How to can I have a sliding bar that slides on click in my nav bar using JQuery
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.