Tackling the sticky header problem with in-browser anchoring and CSS dynamic height restrictions

Question

Tackling the sticky header problem with in-browser anchoring and CSS dynamic height restrictions

I am experimenting with a unique combination of a Pure CSS in-page anchoring solution using scroll-behavior: smooth and scroll-margin-top settings, along with a sticky header for in-page navigation.

By utilizing IntersectionObserver, I can identify when the sticky element reaches the top of the page and dynamically apply specific styles to create a sticky header effect, which may change the header's height.

When the header is in its sticky position, users can smoothly scroll to different sections by clicking on links in the in-page sticky navigation, with proper offset adjustment.

The challenge lies in the initial state of the page load and clicking an anchor. If you click on an anchor while the header is not yet sticky, you will scroll to the correct section but with an incorrect offset position. Is there a way to resolve this issue without resorting to a JavaScript solution?

To illustrate these issues, I have created a basic Codepen. For instance, if you click on "Section C" upon page load, it will take you to the wrong offset. However, clicking on "Section C" again after that should lead you to the correct position, as well as other sections. When you initially click on an anchor while the header is not sticky, it will likely take you to the wrong section offset.

javascript html css intersection-observer scroll-margin-top

Answer 1

Answer №1

The isSticky class is being applied too early. To address this issue, a simple solution is to introduce a 500ms delay using the setTimeout function.
Although there is still a slight visibility of the effect, the final positioning is now accurate.

const watchHeader = () => {
  console.log(this);
  const header = document.querySelector(".test");
  console.log(header);
  const ioOptions = {
    root: document,
    rootMargin: "0px 0px -100% 0px",
    threshold: 0
  };
  const ioCallback = ([e]) => {
    console.log(e);
    setTimeout( () => e.target.classList.toggle("isSticky", e.isIntersecting), 500 );  // Addition made here
  };
  const observer = new IntersectionObserver(ioCallback, ioOptions);
  observer.observe(header);
};

watchHeader();

Link to Updated CodePen

Answer 2

The isSticky class is being applied too early. To address this issue, a simple solution is to introduce a 500ms delay using the setTimeout function.
Although there is still a slight visibility of the effect, the final positioning is now accurate.

const watchHeader = () => {
  console.log(this);
  const header = document.querySelector(".test");
  console.log(header);
  const ioOptions = {
    root: document,
    rootMargin: "0px 0px -100% 0px",
    threshold: 0
  };
  const ioCallback = ([e]) => {
    console.log(e);
    setTimeout( () => e.target.classList.toggle("isSticky", e.isIntersecting), 500 );  // Addition made here
  };
  const observer = new IntersectionObserver(ioCallback, ioOptions);
  observer.observe(header);
};

watchHeader();

Link to Updated CodePen

Tackling the sticky header problem with in-browser anchoring and CSS dynamic height restrictions

Answer №1

Similar questions

Update the styling for the second list item within a specified unordered list class instantaneously

Whenever I attempt to include state in a React class that is declared as a constant, I consistently encounter the error message: "TypeError:

Tips for effectively showcasing JSON in an Angular directive

Assistance with Collision Detection in HTML5 Canvas using JavaScript

Looking to identify the type of a adorned class in Typescript?

Having an issue with Jquery selector where the text does not match

The issue causing "ReferenceError: fetch is not defined" is causing the test to fail

Xpath merging HTML elements or nodes

JavaScript: Append an ellipsis to strings longer than 50 characters

Exploring AngularJS tab navigation and injecting modules into the system

Angular framework does not trigger the button click event

Troubleshooting the Problem of Uneven Heights in Bootstrap Columns

Searching through multiple columns in datatables

What could be the reason for my form submission redirecting to the PHP page?

AngularJS: Issue with inputMask functionality within an angularJS table

Is it possible to reload the webpage just one time after the form is submitted?

I am experiencing difficulties with the PHP login form on MAMP as it is not loading properly, displaying only a

Seeking assistance with creating an iPad application utilizing JQtouch - any t

Storing customer information securely on the server with the help of Node.js

"The Ajax function for replacing a div upon change event is not functioning properly