Is it possible to create a sticky element that stays fixed to the window without using JavaScript?

Question

Is it possible to create a sticky element that stays fixed to the window without using JavaScript?

Using position: sticky has been a game-changer for me. It resolves many issues without the need for JavaScript. However, I've encountered a roadblock. I am trying to create a sticky element that is nested inside multiple <div> elements. Since position: sticky functions as a blend of position: relative and position: fixed, it naturally anchors to its first parent.

As per MDN's explanation:

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor)

In my case, I'm looking to make a header sticky in relation to the window rather than its container. Unfortunately, the structure of the HTML complicates moving it outside the nested <div>.

Is there a way to achieve this without using JavaScript?

Below is the code snippet:

<div class="attendance">
<!-- The header I want to stick to the window, and not to div.attendance-->
    <header class="text-center sticky">Monday 11/22/2019</header>
<!-- Header above -->
    <div class="date-config">
        <div class="form-group">
            <input type="checkbox" id="workable" /> No Work<br />
        </div>

        <div class="form-group">
            <label for="notes">Notes:</label>
            <textarea id="notes" class="form-control"></textarea>
        </div>
        <label for="markall">Mark all as>
        <select id="markall" class="form-control">
            <option></option>
            <option>Absent</option>
            <option>Present</option>
        </select>
    </div>

    <div class="student-attendance">
      Hello :)   
    </div>

</div>

Does anyone have suggestions on how to tackle this issue?

P.S: While researching, I came across this resource, but it relies on JavaScript.

Edit: Here's an unconventional yet functional demo (Note: It's in Spanish - Focus on the dates! They do not stay anchored to the window!).

javascript html css

Answer 1

Answer №1

Apologies for the inconvenience, but answering this question required a closer look at the rendered HTML. Fortunately, I have identified a solution.

TL;DR In this scenario, JavaScript is necessary to achieve the desired outcome. You will need to apply a translateY transform to the element. It seems that the presence of a transform property in the parent element may be causing an issue as mentioned in this post.

Explanation:

I am currently utilizing a carousel JS library known as tiny slider. Instead of images, I am displaying form elements to create a responsive table (as CSS Grids were problematic). Initially, everything seemed fine until I attempted to make the date headers sticky.

Despite using position:sticky, the elements failed to stick properly and remained fixed in one position. After some online research and examining the HTML structure, I discovered multiple parent <div> elements created by tiny-slider. My suspicion was that the sticky behavior was being affected by one of these parents.

As a workaround, I tried combining position:fixed with a scroll event, but unfortunately, it did not resolve the issue. Further investigation led me to potential bugs associated with transforms applied to parent elements interfering with position:fixed functionality[1] [2] [3].

While there was speculation that this bug might explain the issue, an answer referenced here suggested otherwise.

After much contemplation, I decided to utilize the transform CSS property with translateY. This approach proved effective when tested in the browser.

Subsequently, I implemented a scroll eventListener to monitor the header's parent position and adjust accordingly using getBoundingClientRect(). To optimize performance on mobile browsers, I ensured that the transform function was called within a requestAnimationFrame and included a will-change property in the CSS stylesheet.

Testing the code under a 4x CPU Slowdown in Google Chrome yielded positive results 😁.

Below is the function I developed to handle fixed header scrolling (where elemsToFixed are all the <header> elements and threshold is the top offset):

export function fixedHeaderScroll(elemsToFixed: HTMLHeadingElement[], threshold: number) {
  if (!elemsToFixed || elemsToFixed.length === 0) {
    console.error("elemsToFixed can't be null or empty");
    return;
  }
  console.log('Total elems', elemsToFixed.length);
  const firstEl = elemsToFixed[0];
  let propSet = false;
  window.addEventListener('scroll', (e) => {
    window.requestAnimationFrame(() => {
      const top = firstEl.parentElement!.getBoundingClientRect().top;
      if (top > threshold) {
        if (!propSet) return;
        propSet = false;
        setElemsFixed(elemsToFixed, top, threshold, false);
        return;
      }
      propSet = true;
      setElemsFixed(elemsToFixed, top, threshold);
    });
  });
}

function setElemsFixed(elemsToFixed: HTMLHeadingElement[], top: number,
                       threshold: number, setFixed = true) {
  console.log('SetElemsFixed is', setFixed);
  elemsToFixed.forEach((elem) => {
    if (!setFixed) {
      elem.removeAttribute('style');
      return;
    }

    elem.style.transform = `translateY(${(top * -1)}px)`;
  });
}

The following image illustrates a 4x slowdown in CPU performance where the calculation of styles (with 26 elements) took approximately 29.4ms – a favorable outcome! Tested on Chrome 70 with Windows and an i7 4700MQ processor.

https://i.stack.imgur.com/AeAUb.png

Answer 2