Как сделать контент страницы стать частью липкого Navbar, как только мы прокручиваем вниз в CSS? ⇐ CSS

[Anonymous]

Я пытаюсь клонировать веб -сайт TripAdvisor. Как можно увидеть здесь -> веб -сайт TripAdvisor < /p>
Когда мы начнем прокручивать вниз и добраться до строки поиска, все ссылки над строкой поиска и сама строка поиска становятся частью липкого Navbar. У меня проблемы с выбором, что здесь делать. Я превратил липкий Navbar в одну сетку и остальную часть контента из «Где?» к строке поиска в качестве следующего элемента сетки, чтобы объединить их в одну, но я не знаю, как обнаружить, когда мы достигнем конец строки поиска, и я даже не знаю, как я сделаю это, используя сетку, даже если я смогу обнаружить конец строки поиска. Любая помощь была бы отличной. < /P>
Вот мой код-> < /p>

Код: Выделить всё

*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

@font-face {
font-family: My Font;
src: url("/HTML/Fonts/trip-sans-bold.otf");
}

@font-face {
font-family: My Font 2;
src: url("/HTML/Fonts/trip-sans.otf");
}

body {
height: 200vh;
}

.header-one {
display: grid;
justify-items: center;
border-top: 1px solid rgba(235, 235, 235, 0.842);
border-bottom: 1px solid rgba(235, 235, 235, 0.842);
}

.header-one-flex {
display: flex;
align-items: center;
justify-content: space-between;
width: 60vw;
}

header {                            /*sticky works when i put it in both header and nav.  otherwise, it wasn't working.*/
position: sticky;
top: 0;
z-index: 100;
background-color: white;      /*background is white to prevent main content from overlapping with navbar when scrolling*/
}

nav {
position: sticky;
top: 0;
z-index: 100;
}

.logo-name a {
display: flex;
align-items: center;
gap: 5px;
text-decoration: none;
}

.logo-name img {
width: 55px;
height: auto;
}

.logo-name .name {
color: black;
font-family: My Font;
font-size: 30px;
}

.discover-links {
display: flex;
gap: 10px;
}

.discover-links a {
text-decoration: none;
color: black;
font-family: My Font;
padding: 20px;
}

.discover-links .discover:hover,
.trips:hover,
.review:hover {
background-color: rgba(236, 235, 235, 0.932);
border-radius: 50px;
}

.discover-links .forum:hover {
text-decoration: underline;
}

.symb img {
width: 40px;
height: auto;
border-right: 1px solid lightgrey;
padding: 10px;
}

.symbol a {
display: flex;
align-items: center;
justify-content: space-between;
text-decoration: none;
font-family: My Font;
font-size: 20px;
color: black;
}

.symbol .inr {
padding: 5px;
}

.symbol {
padding: 5px;
width: 100px;
}

.symbol:hover {
background-color: rgba(230, 229, 229, 0.795);
border-radius: 50px;
}

.button .btn {
background-color:black;
color: white;
font-family: My Font;
font-size: large;
padding: 10px;
border-radius: 50px;
cursor: pointer;
width: 80px;
}

.symbol-button {
display: flex;
align-items: center;
gap: 13px;
}

.second-nav {
display: grid;
}

.second-nav h1 {
text-align: center;
margin-top: 50px;
font-family: My Font;
font-size: 60px;
}

.search-all img,
.hotels img,
.things img,
.restaurants img,
.flights img,
.holiday-home img {
width: 40px;
height: auto;
}

.search-all a,
.hotels a,
.things a,
.restaurants a,
.flights a,
.holiday-home a {
display: flex;
align-items: center;
text-decoration: none;
color: black;
font-family: My Font;
}

.link-search-flex {
display: flex;
align-items: center;
justify-content: center;
gap: 25px;
padding-top: 30px;
}

.search-field {
width: 100%;
height: 55px;
border-radius: 50px;
font-family: My Font 2;
outline: none;
border: none;
padding-left: 45px;
padding-right: 120px;
margin-top: 25px;
box-shadow: 1px 1px 9px 3px lightgrey;
margin-top: 25px;
background-image: url(/HTML/Images/magnifying\ glass\ symbol.png);
background-repeat: no-repeat;
background-position: 10px;
background-size: 25px auto;
background-origin: padding-box, content-box;
}

.search-bar {
display: flex;
justify-content: center;
align-items: center;
}

.search-bar .icon img{
width: 25px;
height: auto;
}

.search-btn {
background-color: rgb(104, 236, 155);
border: 1px solid rgba(3, 117, 3, 0.959);
color: black;
font-family: My Font;
width: 100px;
height: 50px;
border-radius: 50px;
font-size: large;
cursor: pointer;
position: absolute;
right: 3px;
top: 27px;
}

.search-btn:hover {
background-color: rgb(145, 245, 183);
}

.search-container {
position: relative;
width: 42vw;
margin-top: 25px;
}< /code>





Tripadvisor Clone








[url=#]

[img]Images/tripadvisor logo.jpg[/img]

Tripadvisor
[/url]



[url=#]Discover[/url]

[url=#]Trips[/url]

[url=#]Review[/url]

[url=#]Forums[/url]




[url=#]

[img]Images/globe symbol.png[/img]

INR

[/url]


Sign in








Where to?


[url=#]

[img]Images/home symbol.jpg[/img]

Search All
[/url]


[url=#]

[img]Images/bed symbol.png[/img]

Hotels
[/url]


[url=#]

[img]Images/camera symbol.jpg[/img]

Things to Do
[/url]


[url=#]

[img]Images/fork-kinfe symbol.jpg[/img]

Restaurants
[/url]


[url=#]

[img]Images/plane symbol.png[/img]

Flights
[/url]


[url=#]

[img]Images/home with key symbol.jpg[/img]

Holiday Homes
[/url]





Search

Подробнее здесь: https://stackoverflow.com/questions/796 ... croll-down