Sticky element on the left side vanishes while scrolling towards the right

Question

Sticky element on the left side vanishes while scrolling towards the right

My goal is to design a webpage with five distinct regions, out of which three are meant to be sticky. However, while implementing this feature, I encountered an issue - when the user scrolls to the right beyond the viewport width, the left sticky elements disappear. Since I cannot predict the width of the content in advance, I am looking for a solution to allow these elements to automatically expand based on their content. Is there a way to ensure that the left elements remain visible even when the user scrolls all the way to the right?

The regions I have defined are as follows:

header - This region should disappear when the user scrolls vertically.
upperleft - This region is a small column header that remains sticky to the left and top while scrolling.
upperright - This region should stick only to the top while scrolling vertically. It should be hidden behind upperleft when the user scrolls to the right.
bottomleft - This region should stick to the left side of the screen when the user scrolls to the right and disappear behind upperleft when the user scrolls down.
bottomright - This region should be hidden behind upperleft, upperright, and bottomleft based on the user's scrolling actions.

Below is a sample code snippet illustrating the issue (tested on Firefox 62.0.3):

 <!-- CSS code here-->

 <!-- HTML code here-->

html css sticky

Answer 1

Answer №1

If you're experiencing an overflow issue, it could be because your body is a block element with a width that won't exceed the dimension of your screen, causing problems with the left sidebar.

An easy solution is to change the body to inline-grid:

body {
  margin: 1rem;
  display: inline-grid;
  grid-template-columns: 3rem auto;
  grid-template-rows: 12vh 2rem auto;
  grid-template-areas: "header header" "topleft topright" "bottomleft bottomright";
}

/* CSS styles for header, topleft, topright, bottomleft, bottomright */

<div class="header">
This intro area should be visible until scrolled out of view.
</div>
<div class="topleft">
Stay
</div>
<div class="topright">
Top line sticky vertically but not horizontally
</div>
<div class="bottomleft">
Large vertical data set
</div>
<div class="bottomright">
Large area with cells
</div>

To visualize the issue better, add a border to the initial code, and you'll see the left sidebar stop at that border:

body {
  margin: 1rem;
  display: grid;
  border: 2px solid red;
  grid-template-columns: 3rem auto;
  grid-template-rows: 12vh 2rem auto;
  grid-template-areas: "header header" "topleft topright" "bottomleft bottomright";
}

/* CSS styles for header, topleft, topright, bottomleft, bottomright */

<div class="header">
This intro area should be visible until scrolled out of view.
</div>
<div class="topleft">
Stay
</div>
<div class="topright">
Top line sticky vertically but not horizontally
</div>
<div class="bottomleft">
Large vertical data set
</div>
<div class="bottomright">
Large area with cells
</div>

As a tip, it's best to avoid using the body as a container and instead create your own container for easier structure and integration:

body {
  margin: 0;
}

.container {
  margin: 1rem;
  display: inline-grid;
  border: 2px solid red;
  grid-template-columns: 3rem auto;
  grid-template-rows: 12vh 2rem auto;
  grid-template-areas: "header header" "topleft topright" "bottomleft bottomright";
}

/* CSS styles for header, topleft, topright, bottomleft, bottomright */

<div class="container">
  <div class="header">
    This intro area should be visible until scrolled out of view.
  </div>
  <div class="topleft">
    Stay
  </div>
  <div class="topright">
    Top line sticky vertically but not horizontally
  </div>
  <div class="bottomleft">
    Large vertical data set
  </div>
  <div class="bottomright">
    Large area with cells
  </div>
</div>

Answer 2

If you're experiencing an overflow issue, it could be because your body is a block element with a width that won't exceed the dimension of your screen, causing problems with the left sidebar.

An easy solution is to change the body to inline-grid:

body {
  margin: 1rem;
  display: inline-grid;
  grid-template-columns: 3rem auto;
  grid-template-rows: 12vh 2rem auto;
  grid-template-areas: "header header" "topleft topright" "bottomleft bottomright";
}

/* CSS styles for header, topleft, topright, bottomleft, bottomright */

<div class="header">
This intro area should be visible until scrolled out of view.
</div>
<div class="topleft">
Stay
</div>
<div class="topright">
Top line sticky vertically but not horizontally
</div>
<div class="bottomleft">
Large vertical data set
</div>
<div class="bottomright">
Large area with cells
</div>

To visualize the issue better, add a border to the initial code, and you'll see the left sidebar stop at that border:

body {
  margin: 1rem;
  display: grid;
  border: 2px solid red;
  grid-template-columns: 3rem auto;
  grid-template-rows: 12vh 2rem auto;
  grid-template-areas: "header header" "topleft topright" "bottomleft bottomright";
}

/* CSS styles for header, topleft, topright, bottomleft, bottomright */

<div class="header">
This intro area should be visible until scrolled out of view.
</div>
<div class="topleft">
Stay
</div>
<div class="topright">
Top line sticky vertically but not horizontally
</div>
<div class="bottomleft">
Large vertical data set
</div>
<div class="bottomright">
Large area with cells
</div>

As a tip, it's best to avoid using the body as a container and instead create your own container for easier structure and integration:

body {
  margin: 0;
}

.container {
  margin: 1rem;
  display: inline-grid;
  border: 2px solid red;
  grid-template-columns: 3rem auto;
  grid-template-rows: 12vh 2rem auto;
  grid-template-areas: "header header" "topleft topright" "bottomleft bottomright";
}

/* CSS styles for header, topleft, topright, bottomleft, bottomright */

<div class="container">
  <div class="header">
    This intro area should be visible until scrolled out of view.
  </div>
  <div class="topleft">
    Stay
  </div>
  <div class="topright">
    Top line sticky vertically but not horizontally
  </div>
  <div class="bottomleft">
    Large vertical data set
  </div>
  <div class="bottomright">
    Large area with cells
  </div>
</div>

Sticky element on the left side vanishes while scrolling towards the right

Answer №1

Similar questions

What is the best way to design a form with two dropdown menus, where the options in the second dropdown menu are determined by the selection made in the first dropdown menu

Using jQuery AJAX to Transfer Data to a PHP Script

Implementing a watcher property in JavaScript to dynamically add a class to an element

My initial junior UI/UX assignment: Can you confirm whether this form modal dialog is pixel-perfect, and offer any suggestions for improvements

Unable to display divs in a stacked format using Bootstrap 5

Optimizing the rendering of Font-awesome CDN JS for better performance on Pagespeed Insights

What is the method to adjust the font size for section, subsection, and other sections in Doxygen?

Ensuring proper input with JavaScript form validation

Bx slider - displaying partially hidden slides at the far right while utilizing a full-width carousel

Issue with anchor tag not functioning properly within toggle div

Connecting Angular TextArea functionality to the Ctrl-Enter keyboard shortcut

Code not functioning properly in Internet Explorer

What could be the reason for the CSS stylesheet not functioning properly on mobile devices?

Error: Unexpected end of argument list in file c:/.../list.ejs during ejs compilation

Gather information from "div" tag with the class attribute using Python

The Cordova advanced HTTP POST request functionality is not functioning as expected

The Animation effect of jQuery Making an Element Move Down

Load the iframe element only when the specified class becomes visible within the container div, without relying on jQuery

Adjust the cell text overflow based on the width of the table

Searching dynamically using class names with JQuery