Creating a fixed header design with a scrolling sidebar using CSS

Question

Creating a fixed header design with a scrolling sidebar using CSS

I'm currently working on establishing the layout of my page by drawing inspiration from this website. Specifically, I aim to have a fixed header/nav-bar with a sidebar that scrolls independently and a content panel that scrolls conventionally. It seems that the site I referenced is utilizing flexbox functionalities, however, I need to cater to older browsers (at least IE8 and above), so I am looking to create this layout using pure CSS or incorporating jQuery.

You can view a demo in this fiddle here, which illustrates the basic structure based on two primary wrappers:

.wrapper {
    width: 100%;
    height: 100%;
    position: relative;
}
.body-wrapper {
    margin-top: 80px;
    width: 100%;
    height: 100%;
}

The issue with my implementation is that the sidebar doesn't scroll independently. Therefore, when the main scroller is used, both the sidebar and body content scroll together, whereas I intend for only the latter to be affected.

Thank you in advance for any help provided; I am open to modifying my current version or exploring an entirely different approach.

html css

Answer 1

Answer №1

If you want to make some adjustments without changing your current approach too much, you can utilize the position:fixed property for the sidebar as well. Simply include these CSS styles:

div#mainBody {
    padding-left:220px; /* Set width of #list */
}
aside#list{
    position:fixed;
}

I renamed the id for the main content container to #mainBody since you already have a #main for the header on your page. IDs should be unique. Take a look at this JSFiddle example.

Hopefully, this explanation is helpful. Feel free to ask if you need further clarification.

UPDATE: The issue with the bottom of the sidebar being cut off is due to the following style:

aside#list {
    height:100%;
}

By setting the height of the sidebar to 100% of the viewport's height, it gets pushed down by the header and goes off-screen, making it unreachable by scrolling. To resolve this, remove that style and use this instead:

aside#list {
    bottom:0;
    top:80px; /* Height of the header */
}

This adjustment ensures the sidebar starts below the header and reaches the bottom of the viewport, allowing all content to be scrolled through. Check out the updated JSFiddle to see the changes in action.

Answer 2

If you want to make some adjustments without changing your current approach too much, you can utilize the position:fixed property for the sidebar as well. Simply include these CSS styles:

div#mainBody {
    padding-left:220px; /* Set width of #list */
}
aside#list{
    position:fixed;
}

I renamed the id for the main content container to #mainBody since you already have a #main for the header on your page. IDs should be unique. Take a look at this JSFiddle example.

Hopefully, this explanation is helpful. Feel free to ask if you need further clarification.

UPDATE: The issue with the bottom of the sidebar being cut off is due to the following style:

aside#list {
    height:100%;
}

By setting the height of the sidebar to 100% of the viewport's height, it gets pushed down by the header and goes off-screen, making it unreachable by scrolling. To resolve this, remove that style and use this instead:

aside#list {
    bottom:0;
    top:80px; /* Height of the header */
}

This adjustment ensures the sidebar starts below the header and reaches the bottom of the viewport, allowing all content to be scrolled through. Check out the updated JSFiddle to see the changes in action.

Creating a fixed header design with a scrolling sidebar using CSS

Answer №1

Similar questions

Import HTML content into R

Is your sticky sidebar getting in the way of your footer?

Ways to center elements horizontally without relying on Flexbox layout?

custom gradient generator for jquery and css3

Displaying Child1 on hover in CSS is simple using the Parent > Child1:hover selector. But how can we display Child2 using

Content misaligned vertically inside a DIV

Is there a way to right-align the labels and input fields simultaneously?

What could be causing a react element to fail to update?

Error: The Jquery plugin Object #<HTMLDocument> does not have a function called 'observe'

What are the steps to embedding a Facebook video on a website?

Dealing with a jQuery/JavaScript issue involving thumbnail images

Using the <noscript> tag for an individual element or a comparable alternative

Problem with sending a form using Ajax

Each function in Sass is compiled with a dollar sign preceding it

What is causing the links at the bottom of the page to not function properly?

CSS: positioning elements relative to the bottom right corner

Tips for closing a popup without exiting the entire webpage

Update the class of pagination to "active" using jQuery

Clear function of signature pad not working inside Bootstrap modal dialogue box

What is the best way to split an array into four columns and allocate 10 <li> items from the array to each column?