Header fixed vertically

Question

Header fixed vertically

I am currently working on a webpage with a minimum width requirement of 1124px. This means that whenever the browser window is smaller than that, the content of the page needs to be scrolled horizontally instead of smoothly transitioning into a responsive layout.

I'm curious if it's possible to keep the header fixed vertically only. So, when the browser size is less than 1124px, the header will scroll horizontally along with the rest of the content, but still stay fixed at the top when scrolling vertically.

body {
 min-width: 1124px;
}

header {
 position: fixed;
}

javascript jquery html css

Answer 1

Answer №1

If you want an element to stay fixed on top while allowing horizontal scroll, you can achieve this with the position: sticky; CSS property:

#header {
  position: sticky;
  top: 0;
  z-index: 1;
}

Here is an example of how it can be implemented:

body {
  min-width: 1124px;
}

#header {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Just to fill space on screen */
#header {
  width: 100%;
  height: 100px;
  background: linear-gradient(45deg, white, blue);
}
.content {
  min-height: 500px;
}

<div id="header">
  <h1>Header</h1>
</div>
<div class="content">
  <p>Content</p>
</div>

Answer 2

If you want an element to stay fixed on top while allowing horizontal scroll, you can achieve this with the position: sticky; CSS property:

#header {
  position: sticky;
  top: 0;
  z-index: 1;
}

Here is an example of how it can be implemented:

body {
  min-width: 1124px;
}

#header {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Just to fill space on screen */
#header {
  width: 100%;
  height: 100px;
  background: linear-gradient(45deg, white, blue);
}
.content {
  min-height: 500px;
}

<div id="header">
  <h1>Header</h1>
</div>
<div class="content">
  <p>Content</p>
</div>

Header fixed vertically

Answer №1

Similar questions

What are some effective strategies for enhancing the performance of React user interfaces?

What could be causing this jQuery color picker to malfunction when used inside a Bootstrap modal?

Set up dynamic restrictions for the length of an HTML paragraph with PHP

The implementation of Typescript in Express does not rely on Middleware

Performing ajax requests with nested ajax calls within a loop

Wavy CSS Animation

Here is how you can include a date picker with the ability to choose the day, month, and year

Querying a subarray in MongoDB

You can click on the link within the Leaflet Popup to trigger JavaScript functionality

Generating a unique serial ID using Angular/JS

Update a mySQL table using dynamic input from a table

Implementing Next.js in a live production environment

Display loading animation until Google Maps is fully loaded - Utilizing AngularJs

Error: JSON parsing failed due to an unexpected token 's' at position 1

GraphQL is not capable of fetching data directly from a mysql database

Can Next.js 13 components maximize performance by utilizing server and client components simultaneously? What is the best approach to achieve this?

Troubleshooting Vue.js 2 Routing Issues: Difficulty Accessing Posts Variable

Combining multiple jQuery selector objects into one jQuery object

The website appears to be loading in a unique way on mobile upon the second loading

What is the best way to show the current date and time?