A fixed header list using CSS with a single scroll bar

I am looking to create a scrollable list with a fixed header, where the scroll bar extends the full height of the parent but only scrolls through the nav items (keeping the logo in place).

My current setup involves:

<div className="home-page-nav">
   <div className="logo"></div>

   <div className="nav-items">
     <div className="nav-item"></div>
     ....
   </div>
</div>

And using this CSS:

.home-page-nav {
   overflow:auto;
   overflow-y:scroll;
}

.logo {
   position: fixed;
}

This is the desired outcome:

https://i.sstatic.net/0LGF9.png

csscss-grid

Answer №1

To achieve sticky positioning, you can utilize the position: sticky; property.

Here is an example where I have set a height for the overflow container to allow scrolling of the content within:

If you want more information on this topic, you can refer to https://developer.mozilla.org/en-US/docs/Web/CSS/position and make sure to verify browser support.

An element with sticky positioning becomes stuck once its containing block reaches a certain threshold (such as setting top to a value other than auto) in relation to its flow root or scrollable container. Before that point, it behaves like a relatively positioned element.

.home-page-nav {
  overflow: auto;
  overflow-y: scroll;
  height: 400px;
}

.logo {
  position: -webkit-sticky;
  position: sticky;
  background-color: green;
  top: 0;
}

.nav-item {
  height: 40px;
  margin-bottom: 10px;
  background-color: grey;
}
Document
<br/>
<br/>
<br/><br/>
<div class="home-page-nav">
  <div class="logo">I am logo</div>

  <div class="nav-items">
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
    <div class="nav-item"></div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Don't forget to update the CSS stylesheet whenever templates are rendered in Flask

I have developed a Flask application using HTML and external (static) CSS stylesheets. One interesting feature of the application is a checkbox that uses JavaScript to toggle between two different CSS stylesheets - one for light mode and one for dark mode. ...

pythoncssflaskjinja2

The issue of slides overlapping in a Javascript slideshow during auto play mode

I encountered an issue while creating an automatic slideshow with 4 slides. Upon autoplay for the first time, slide 1 overlaps slide 4, as well as slide 2 and 3. This only happens once after the site loads. However, on subsequent playthroughs or when using ...

javascriptjquerycssslideshowoverlapping

Updating the appearance of a non-declared HTML child component on-the-fly using Angular

Trying to dynamically adjust the style of an unspecified div is causing some trouble. Using Angular and PrimeNG, invisible divs are being generated that I cannot access through inline styles. The objective is to allow a user to input a width as a string (5 ...

htmlcssangularsassprimeng

Tips for implementing a method to switch CSS properties of a main container by using a checkbox within its child element in a Svelte component

It took me a while to figure this out, but I still feel like my implementation is not ideal. I'm confused as to why things break when I remove the checkedActivities.has(activity) ? "checked" : "unchecked", because I thought TypeScr ...

htmlcsstypescriptsvelte

HTML Canvas resizing challenge

My goal is to resize the canvas to fit inside its parent div within a Bootstrap grid, but I'm running into an issue where the canvas keeps expanding to 2000px x 2000px. Despite successfully resizing based on console.log outputs showing the same dimens ...

javascripthtmlcssbootstrap-4html5-canvas

The vanishing footer issue arising while adding the back to top button

When attempting to place the "back to top" button on the right-hand side just above the footer, the footer disappears. I am striving to position the button just above the footer while ensuring it aligns correctly. Prior to adding the "back to top" button, ...

htmlcssfooter

Is it more effective to consolidate similar styles into a single class and utilize it, or is it better to go the opposite route?

Which code snippet below is more efficient? First Example .a { color: #000; width: 20px; -webkit-transition: 0.3s all; -moz-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; } .b { color: #333; width: 40px; -webkit-transition: 0.3s a ...

htmlcssweb-performance

What steps can be taken to prevent a "Flash of Unstyled Content" when using fixed-width cells in CSS Tables?

My website's design is heavily influenced by CSS tables. This decision was made to ensure consistent cell heights regardless of the content, making alignment easier. Overall, this method has been quite effective. However, there is an issue where the ...

htmlcssfouc

Achieving Desired Styling Without Altering the HTML Structure: A Guide to CSS Formatting

Check out this HTML code: <head> <meta charset="UTF-8"> <title>Countdown</title> <style> /* CSS goes here */ </style> </head> <body> <ul> <li>one</li> ...

css

What is the best way to create a responsive grid layout for my form using Bootstrap?

I have designed a form using bootstrap 5 with 1 row containing 4 columns (1 dropdown menu and 3 buttons). While it looks fine on my desktop, the problem arises when I view the page on a mobile device. The buttons shrink and remain on the same row instead o ...

htmlcssbootstrap-5

Tips for aligning content at the bottom center of a design

Could you assist me in positioning the buttons at the bottom center of the horizontal layout as depicted in the image below? Ps: the vertical layout at the top has a dynamic height. My HTML code is as follows: <html> <body> <div class="c ...

htmlcssvaadin

Only show a single li element in CSS at a time

I'm working with Angular 2 and I have a list: <ul> <li *ngFor="let show of (ann)"> {{show}} </li> </ul> I want to show one item from the list every 3 seconds in an infinite loop. Here&apos ...

cssangular

Mobile browsers are displaying fonts unevenly within tables

Currently in the process of developing a desktop site () that should function optimally on mobile browsers without the need for a separate mobile version. While mobile Safari scales up fonts in large text blocks, tables used for content are causing some is ...

htmlcss

Modify the conditions of a CSS file in Bootstrap using JavaScript

My project requires internationalization support for right-to-left languages like Arabic and Hebrew, so I need to modify some Bootstrap classes (such as col) to float right instead of left. I am using create-react-app with babel/webpack and react-bootstra ...

javascriptcssreactjswebpackreact-bootstrap

Adjust the size of a div element dynamically to maintain the aspect ratio of a background image while keeping the

Utilizing the slick slider from http://kenwheeler.github.io/slick/ to display images of varying sizes, including both portrait and landscape pictures. These images are displayed as background-image properties of the div. By default, the slider has a fixed ...

javascriptcssslideraspect-ratioslick.js

Unable to get click function to work with multiple div elements

Using four div elements, I have implemented a feature where clicking on the first div causes all other div elements to change opacity. This is working correctly. However, I would like the opacity of the first div to remain unchanged when moving to another ...

javascriptjqueryhtmlcss

Formatting a specific portion of the content within the placeholder

I need to adjust the CSS style for a specific part of a placeholder, not the entire placeholder text. For example, if my placeholder text is: "Where (example: New York)" <label>Search:</label> <textarea placeholder="Where (example: New Yor ...

csshtmlplaceholder

Fluid Centered UL with Bullet Points

We have received a unique request from one of our clients. They are asking for the content within a specific <ul> to be centered along with the icons. Centering and adding icons are doable, but the challenge lies in centering the <li> elements ...

htmlcss

The card header in Bootstrap card grid does not have the ability to extend all the way to the edge of

Utilizing bootstrap 4 within Laravel, I create blade.php template files. Here is a snippet of my code. The card grid layout appears satisfactory, however, there seems to be some empty space between the card titles and the edges of the cards. <div id=" ...

htmlcsslaravelbootstrap-4bootstrap-cards

Inverted CSS Shadow Box

I thought I had a good grasp on how CSS shadow-box works, but it seems I was mistaken. Could someone provide me with a visual explanation of why the <hr/> looks the way it does here? Take a look at style 13: https://codepen.io/ibrahimjabbari/pen/ozi ...

css