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:

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

Tips on altering CSS attributes within Magnific Popup

I am currently utilizing the Magnific Popup plugin in my project. The code snippet I have implemented is as shown below: $(".event").magnificPopup({ items: { src: ".hidden-div", type: "inline" ...

jquerycssjquery-pluginspopupmagnific-popup

Align a div to the center horizontally at the top of the screen

Is there a way to vertically center text within a div and also horizontally center the div at the top of the screen? Visit this link for more details <div id='custom'> example text </div> #custom{ width: 50%; background: #FF00 ...

htmlcss

Is there a way to modify the standard width of semantic-ui sidebars?

I'm trying to adjust the width of semantic-ui sidebars, which are originally 275px wide. Where should I include the css/js code to make them wider or narrower? Here is their default code: .ui.sidebar { width: 275px!important; margin-left: -275 ...

htmlcsssemantic-ui

The view of the Google map is filled with numerous rounded tiles

Map divided into 3x3 tiles I am looking to customize the appearance of my map and remove all spaces and rounded corners to create a seamless, undivided visual. Is there a way to modify a map tile attribute to achieve this effect? Below is the code snippet ...

javascriptcssgoogle-mapsmatrixgoogle-api

Ways to define css attributes for the "before" and "after" pseudo elements in the DOM

I'm looking to modify the color of the "border-left" property from its default red to a different color within the scope, such as blue. .hello:before { content:' '; display:inline-block; width: 22px; height: 25px; ...

htmlcss

What is the best method to retrieve child elements from a class list object?

Seems like I have a similar content class <div class="parentclass"> <div class="childClass"> </div> <div class="childClass"> </div> <div class="childClass"> </d ...

javascripthtmlnode.jscss

Is there a way to conceal a Select element so that it is not visible on the screen, yet can still activate the dropdown menu when another element is clicked

One idea for my website is to replace a select element with a button that triggers the dropdown. The plan is to place the select element inside a button DIV, position the select element on top of the button, and set its opacity to 0 so it appears hidden. W ...

htmlcssdrop-down-menu

Unusual Glitch in Bootstrap 3 Dropdown Menu

I am currently developing a website using Bootstrap 3. I am encountering an issue with the navbar dropdown. When I click on the link, it changes to show "expand child menu" and "collapse child menu". To clarify, here is the image I am referring to: Initi ...

javascripthtmlcsstwitter-bootstrap-3

Ensure that the div stays in the same position regardless of the screen resolution

On my webpage, I have a page header with a select menu that needs to be properly positioned on top of the background image. How can I ensure it stays in place when the screen resolution changes? Here is how it looks on a larger resolution: <div c ...

htmlcss

The gap separating the three columns in the DIVs structure

Here is an example that I need The images are being loaded from a MySQL while loop, and I want the spacing between them to be such that the left column and right column touch each side with the middle image centered. Just like in the picture :D This is m ...

htmlcsscss-float

Setting the maximum width for a JavaScript pop-up box

Below is the html code that creates a link reading "sacola de compras" <div> <script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script> <script type="text/javascript"> xMinicart("style=","layout=Mini") ...

javascriptjqueryhtmlioscss

What is the best way to superimpose an image onto a canvas?

I am working on a cool project where I have created a canvas that displays matrix binary code raining down. However, I would like to enhance it by adding an image overlay on top of the canvas. Here is my current setup: <div class="rain"> ...

javascripthtmlcss

When the menu active item is clicked, the header will automatically scroll to the top

I've implemented a sticky header using CSS and JavaScript along with a mega menu. However, I've encountered an issue where when scrolling to the bottom and clicking on the "more" link in the dropdown, the page scrolls back to the top. This is the ...

javascriptcss

Text is not visible when hovering over it

I am facing an issue with the hover effect on my menu element. When I hover over the element, the text does not appear as expected. Even after using z-index to position the text on top, it still doesn't work. Here is a snippet of my code: HTML: < ...

css

What could be the reason for the excess white space at the top and bottom of the page?

Once I implemented a new div class to incorporate a background image, the top, bottom, and side menus on my page suddenly turned white. style.css #boundless{ background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branc ...

htmlcss

Tips for customizing the appearance of a label when a MUI Radio Button is selected

Hello everyone, I am attempting to customize the label text color of a radio button to turn blue when selected. https://i.stack.imgur.com/btSc2.jpg HERE IS THE CODE FOR MY MUI BUTTON SO FAR import * as React from "react"; import Radio from &quo ...

javascriptcssreactjstypescriptmaterial-ui

I'm feeling pretty lost when it comes to understanding how line-height and margins work together

When creating a webpage layout, my goal is to maintain balance by ensuring there is an equal amount of spacing between sections and elements. However, when dealing with varying font sizes and line heights, achieving this can be challenging. To provide fur ...

htmlcss

The web application located on the server is having trouble recognizing and loading the stylesheet

After deploying the web app on MS Server 2008 R2, I noticed that it is not reading the style sheets on any of the pages. The masterpage only contains a ToolkitScriptManager with no styles. However, the source code shows the style links and accessing them d ...

asp.net.netcsswindows-server-2008-r2

primary and secondary colors within the Material UI design scheme

Is there a way to apply different colors for Cards and Papers in the Material UI Theme that are compatible with both light and dark modes? In my app, I have a list of Cards placed on top of a Paper background. Currently, the default color for both the Pap ...

cssmaterial-uithemes

Is there a Joomla extension available that can display or conceal content upon clicking?

Looking to enhance my Joomla site by installing a plugin that allows me to toggle the visibility of content with a click, similar to how FAQ sections work on many websites. Question 1 (click here for the answer) { Details for question 1 go here } Questi ...

phpjavascripthtmlcssjoomla