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

The postMessage function in my Javascript SlackBot seems to be flooding the channel with messages

Tips for editing events in the "react-big-calendars" component

Adjust the div container to wrap underneath the image if the webpage width decreases

Save a JSON object from a URL into a JavaScript variable using jQuery

Is it possible to prefetch library calls in Next.js in advance?

tips for sending a chosen item to the Vujes API

Leveraging the ng-hide property of one controller to adjust the ng-style attribute of another controller through a centralized global controller

What makes 'Parsing JSON with jQuery' unnecessary?

Making a div equal in height to an image

Clear all CSS styles applied to a targeted division

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

Backbone "recalling" stored data in attributes

Tips for retrieving the xpath of elements within a div using python selenium

What is the correct way to maintain focus on a nested scrolling div over another scrolling div with jQuery?

Implementing form validations using JavaScript for a form that is created dynamically

When the dropdown form options in HTML are clicked, they appear disproportionately large compared to the initial select box

Acquiring the underlying code of websites within the local network

What is the best way to dynamically change the content of a div based on user selection?

Using the identical code, Wicked PDF generates distinct reports on separate computers

techniques for utilizing dynamic variables with the limitTo filter in AngularJS