margin: 0;
font-family: Arial,
sans-serif;
}
` `.container {
padding: 20px;
box-sizing: border-box;
}
.fixed {
position: fixed;
top: 0;
width: 100%;
background-color: #f4f4f4;
border-bottom: 1px solid #ccc;
z-index: 1000;
}
.scrolling {
margin-top: 100px;
/* Adjust this value based on the height of the fixed container */
background-color: #eaeaea;
padding: 20px;
height: 200vh;
/* Makes the container scrollable by extending its height */
}< /code>
Fixed Container
This container stays fixed at the top when scrolling.
`
Scrolling Container
This container scrolls with the rest of the page.
Content...
More content...
Even more content...
Keep scrolling...
Almost there...
You've reached the end!
.scrolling { margin-top: 100px; /* Adjust this value based on the height of the fixed container */ background-color: #eaeaea; padding: 20px; height: 200vh; /* Makes the container scrollable by extending its height */ }< /code>
Fixed Container This container stays fixed at the top when scrolling. `
Scrolling Container This container scrolls with the rest of the page. Content... More content... Even more content... Keep scrolling... Almost there... You've reached the end! [/code]