To prevent flickering when using child flex elements, it's best to use position fixed along with a dynamically updated scrollbar position using Javascript

Question

To prevent flickering when using child flex elements, it's best to use position fixed along with a dynamically updated scrollbar position using Javascript

My navigation component includes a slim banner that should hide upon scroll and a main-nav bar that should stick to the top of the screen and shrink when it does so.

I initially looked into using Intersection Observer based on a popular answer found here: Event to detect when position:sticky is triggered

However, I encountered an issue where my child elements (which are flex) caused a flicker when transitioning between showing and hiding the sticky banner. Removing these child elements isn't an option, so I am considering applying position: fixed to the main-nav with top: 40px. This setup allows the skinny-banner to scroll away as intended, but now I am seeking help in obtaining the scrollbar position via JavaScript. Once achieved, I plan to add a class like .isSticky when the skinny-banner disappears to ensure that the main-nav sticks to the top.

.isSticky {
 top: 0;
 height: 66px;
}

body { 
 margin: 0;
 height: 200vh;  
}

.skinny-banner{
  background: lightblue;
  height: 40px;
  display: flex;
}

.nav-menu {
  display: flex;
}

.sticky-nav{
  position: fixed;
  top: 40px;                    

  background: salmon;
  transition: .1s;
}

/* styles for when the header is in sticky mode */
.sticky-nav.isSticky{
  top: 0;
  height: 66px;
}

<header>
   <div class="skinny-banner">Skinny banner that on scroll down disapears.</div>
   <div class="sticky-nav">Sticky Header that on scroll down sticks to top and shrinks in height when stuck</div>
</header>

I would like to develop a vanilla JS, HTML, & CSS solution while preserving the existing HTML structure which includes a wrapping container with the skinny-banner and nav-menu as children.

javascript html css scroll

Answer 1

Answer №1

One of the reasons why the .sticky-nav element is not becoming sticky is because it is nested inside the <header> element, which by default has a display: block property. This default behavior of the <header> element interferes with the sticky positioning of its child elements, including position: sticky. To overcome this issue, you need to set the display: initial for the <header> element.

You can also monitor when the element becomes sticky by observing the value of .offsetTop. This value will change once the element becomes sticky. However, before that, ensure you have specified position: sticky and top: 0 for the .sticky-nav element.

const stickyNav = document.querySelector('.sticky-nav');
const initalPos = stickyNav.offsetTop;

window.addEventListener("scroll", () => {
  if(stickyNav.offsetTop > initalPos) {
    stickyNav.classList.add('isSticky');
  } else {
    stickyNav.classList.remove('isSticky');
  }
});

body { 
 margin: 0;
 height: 200vh;  
}
header{
  display: initial;
}
.skinny-banner{
  background: lightblue;
  height: 40px;
  display: flex;
}

.nav-menu {
  display: flex;
}

.sticky-nav{
  position: sticky;
  top: 0;
  background: salmon;
  min-height: 1px; /* custom this */
  transition: min-height ease 1s; /* custom this */
}

/* styles for when the header is in sticky mode */
.sticky-nav.isSticky{
  top: 0;
  min-height: 66px;  /* custom this */
}

<header>
   <div class="skinny-banner">Skinny banner that, on scroll down, disappears.</div>
   <div class="sticky-nav">Sticky Header that, on scroll down, sticks to top and shrinks in height when stuck</div>
   <div>Test content 1</div>
   <div>Test content 2</div>
   <div>Test content 3</div>
   <div>Test content 4</div>
   <div>Test content 5</div>
   <div>Test content 6</div>
   <div>Test content 7</div>
   <div>Test content 8</div>
   <div>Test content 9</div>
   <div>Test content 10</div>
   <div>Test content 11</div>
   <div>Test content 12</div>
   <div>Test content 13</div>
   <div>Test content 14</div>
   <div>Test content 15</div>
   <div>Test content 16</div>
</header>

Answer 2

One of the reasons why the .sticky-nav element is not becoming sticky is because it is nested inside the <header> element, which by default has a display: block property. This default behavior of the <header> element interferes with the sticky positioning of its child elements, including position: sticky. To overcome this issue, you need to set the display: initial for the <header> element.

You can also monitor when the element becomes sticky by observing the value of .offsetTop. This value will change once the element becomes sticky. However, before that, ensure you have specified position: sticky and top: 0 for the .sticky-nav element.

const stickyNav = document.querySelector('.sticky-nav');
const initalPos = stickyNav.offsetTop;

window.addEventListener("scroll", () => {
  if(stickyNav.offsetTop > initalPos) {
    stickyNav.classList.add('isSticky');
  } else {
    stickyNav.classList.remove('isSticky');
  }
});

body { 
 margin: 0;
 height: 200vh;  
}
header{
  display: initial;
}
.skinny-banner{
  background: lightblue;
  height: 40px;
  display: flex;
}

.nav-menu {
  display: flex;
}

.sticky-nav{
  position: sticky;
  top: 0;
  background: salmon;
  min-height: 1px; /* custom this */
  transition: min-height ease 1s; /* custom this */
}

/* styles for when the header is in sticky mode */
.sticky-nav.isSticky{
  top: 0;
  min-height: 66px;  /* custom this */
}

<header>
   <div class="skinny-banner">Skinny banner that, on scroll down, disappears.</div>
   <div class="sticky-nav">Sticky Header that, on scroll down, sticks to top and shrinks in height when stuck</div>
   <div>Test content 1</div>
   <div>Test content 2</div>
   <div>Test content 3</div>
   <div>Test content 4</div>
   <div>Test content 5</div>
   <div>Test content 6</div>
   <div>Test content 7</div>
   <div>Test content 8</div>
   <div>Test content 9</div>
   <div>Test content 10</div>
   <div>Test content 11</div>
   <div>Test content 12</div>
   <div>Test content 13</div>
   <div>Test content 14</div>
   <div>Test content 15</div>
   <div>Test content 16</div>
</header>

Answer 3

Answer №2

Appreciate your valuable insights and sharing of experiences! Here is a solution that you might find useful.

  window.onscroll = function() {stickyNav()};

  function stickyNav() {
    let navbar = document.querySelector(".sticky-nav");
    let banner = document.querySelector(".skinny-banner");      
    let sticky = navbar.offsetTop;
    if (window.pageYOffset >= sticky) {
      navbar.classList.add("isSticky");
  banner.classList.add("hide-banner"); 

    } else {
      navbar.classList.remove("isSticky");
      banner.classList.remove("hide-banner");
    }
  }

    body { 
      margin: 0;
      height: 200vh;  
    }

    .skinny-banner {
      background: lightblue;
      height: 40px;
      display: flex;
    }

    .nav-menu {
      display: flex;
    }

    .sticky-nav {
      position: fixed;
      top: 0px;
      background: salmon;
      transition: .1s;
    }

    /* styles for when the header is in sticky mode */
    .sticky-nav.isSticky {
      top: 0;
      height: 77px;
    }

    .hide-banner {
    display: none;
     }

    div {
      padding: 20px;
      background-color: #f2f2f2;
      border: 1px solid #ddd;
      margin: 10px;
    }

<div class="sticky-nav">Sticky Header that on scroll down sticks to top and shrinks in height when stuck</div>
<div class="skinny-banner">Skinny banner that on scroll down disapears.</div>      
<div>Test Content</div>
<div>Test Content</div>
<div>Test Content</div>

Answer 4

Appreciate your valuable insights and sharing of experiences! Here is a solution that you might find useful.

  window.onscroll = function() {stickyNav()};

  function stickyNav() {
    let navbar = document.querySelector(".sticky-nav");
    let banner = document.querySelector(".skinny-banner");      
    let sticky = navbar.offsetTop;
    if (window.pageYOffset >= sticky) {
      navbar.classList.add("isSticky");
  banner.classList.add("hide-banner"); 

    } else {
      navbar.classList.remove("isSticky");
      banner.classList.remove("hide-banner");
    }
  }

    body { 
      margin: 0;
      height: 200vh;  
    }

    .skinny-banner {
      background: lightblue;
      height: 40px;
      display: flex;
    }

    .nav-menu {
      display: flex;
    }

    .sticky-nav {
      position: fixed;
      top: 0px;
      background: salmon;
      transition: .1s;
    }

    /* styles for when the header is in sticky mode */
    .sticky-nav.isSticky {
      top: 0;
      height: 77px;
    }

    .hide-banner {
    display: none;
     }

    div {
      padding: 20px;
      background-color: #f2f2f2;
      border: 1px solid #ddd;
      margin: 10px;
    }

<div class="sticky-nav">Sticky Header that on scroll down sticks to top and shrinks in height when stuck</div>
<div class="skinny-banner">Skinny banner that on scroll down disapears.</div>      
<div>Test Content</div>
<div>Test Content</div>
<div>Test Content</div>

To prevent flickering when using child flex elements, it's best to use position fixed along with a dynamically updated scrollbar position using Javascript

Answer №1

Answer №2

Similar questions

What is the best approach to transform an HTML textarea value into JSON format?

Is there a way to identify the ID of a button using Javascript specifically in Internet Explorer and Safari browsers?

multiple urls causing duplication of states in angular ui routes

The integration of CSS into an HTML file is ineffective

Displaying an iFrame with a height that excludes the header section

Conceal a different CSS class if a certain CSS class is present on the page

What code can I use to prompt clients to refresh JavaScript files automatically?

Extracting a precise data point stored in Mongo database

Implementing the row delete function in MUI DataGrid using JavaScript

How can I handle pings in Discord using discord.js?

Utilizing IndexedDB for data storage

Executing PHP scripts using Ajax

Determine the precise boundaries of the React component

Navigating to two separate webpages concurrently in separate frames

The pure css overlay does not display correctly on Chrome

"Troubleshooting VueJS: Issue with default value not being set in

What are some alternative solutions when functional component props, state, or store are not being updated within a function?

Warning: The core schema has detected an unknown property `color` for the component or system `undefined` in Aframe + Vuejs. This issue was flagged within 10 milliseconds in

What's Going on with My Angular Dropdown Menu?

The content is being pushed down by the responsive navigation bar