Header with Sticky Behavior and Smooth Slide Down Animation

Question

Header with Sticky Behavior and Smooth Slide Down Animation

I am trying to achieve a scroll effect on my page where the header will move up when scrolling up, but at position 150 it should smoothly slide down and stay fixed at the top. I have tried various methods but haven't been able to get it right. Can someone take a look at my code?

Something similar to this , although this script has some issues.

jQuery(document).ready(function ($) {
    $(window).scroll(function () {

        if ($(window).scrollTop() >= 100) {
            $('.navarea').addClass('fixed-header');

        } else {
            $('.navarea').removeClass('fixed-header');
        }
    });
});

Here is the CSS:

.navarea {

    z-index: 2;
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.5s ease-in-out;
}

.fixed-header {
    position: fixed;
    background: rgba(255, 255, 255, 0.9);
    text-shadow: none;
    padding-bottom: 0;
    top: 0;
    z-index: 5;
    transition: all 0.5s ease-in-out;
}

View live demo here: https://codepen.io/pagol/pen/XovvGJ

jquery css sticky

Answer 1

Answer №1

Here's an example showcasing:

Creating a deep clone of the navigation element with a successful outcome after extensive testing
Implementing CSS3 transition for the cloned navigation
Utilizing a debounce callback mechanism to optimize functions triggered on scroll events
Enhancing the effect by using position sticky and visibility for the original element

// https://github.com/micro-js/debounce/blob/master/lib/index.js
function debounce(fn, time) {
  var pending = null
  return function() {
    if (pending) clearTimeout(pending)
    pending = setTimeout(run, time)
    return function() {
      clearTimeout(pending)
      pending = null
    }
  }
  function run() {
    pending = null
    fn()
  }
}

function documentScrollTop() {
  const doc = document.documentElement;
  return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
}

const el_nav1 = document.getElementById("nav");
const el_nav2 = el_nav1.cloneNode(true);
el_nav1.parentNode.insertBefore(el_nav2, el_nav1);
el_nav2.style.cssText = `position:fixed; transform:translateY(-100%);`;

function animateNavigation() {
  const canShow = documentScrollTop() >= 150;
  el_nav2.style.transform = `translateY(${canShow?0:-100}%)`;
  el_nav1.style.cssText = `position:${canShow?'sticky':'relative'}; visibility:${canShow?'hidden':'visible'};`
}

window.addEventListener('scroll', debounce(animateNavigation, 99));
document.addEventListener('DOMContentLoaded', animateNavigation);

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
p {height:300vh;border:4px dashed #000;} /* force scrollbars */

#nav {
  position: relative;
  top: 0;
  width: 100%;
  padding: 20px;
  background: gold;
  transition: transform 0.6s;
}

<nav id="nav">NAVIGATION HERE</nav>
<p></p>

Areas for potential enhancement

Consider using only one element to simplify the implementation (challenging for scroll back to top functionality)
Add an extra condition inside the animateNavigation function to check if an action has already been executed (preventing redundant calls to style until canShow changes value)

Answer 2

Here's an example showcasing:

Creating a deep clone of the navigation element with a successful outcome after extensive testing
Implementing CSS3 transition for the cloned navigation
Utilizing a debounce callback mechanism to optimize functions triggered on scroll events
Enhancing the effect by using position sticky and visibility for the original element

// https://github.com/micro-js/debounce/blob/master/lib/index.js
function debounce(fn, time) {
  var pending = null
  return function() {
    if (pending) clearTimeout(pending)
    pending = setTimeout(run, time)
    return function() {
      clearTimeout(pending)
      pending = null
    }
  }
  function run() {
    pending = null
    fn()
  }
}

function documentScrollTop() {
  const doc = document.documentElement;
  return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
}

const el_nav1 = document.getElementById("nav");
const el_nav2 = el_nav1.cloneNode(true);
el_nav1.parentNode.insertBefore(el_nav2, el_nav1);
el_nav2.style.cssText = `position:fixed; transform:translateY(-100%);`;

function animateNavigation() {
  const canShow = documentScrollTop() >= 150;
  el_nav2.style.transform = `translateY(${canShow?0:-100}%)`;
  el_nav1.style.cssText = `position:${canShow?'sticky':'relative'}; visibility:${canShow?'hidden':'visible'};`
}

window.addEventListener('scroll', debounce(animateNavigation, 99));
document.addEventListener('DOMContentLoaded', animateNavigation);

/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
p {height:300vh;border:4px dashed #000;} /* force scrollbars */

#nav {
  position: relative;
  top: 0;
  width: 100%;
  padding: 20px;
  background: gold;
  transition: transform 0.6s;
}

<nav id="nav">NAVIGATION HERE</nav>
<p></p>

Areas for potential enhancement

Consider using only one element to simplify the implementation (challenging for scroll back to top functionality)
Add an extra condition inside the animateNavigation function to check if an action has already been executed (preventing redundant calls to style until canShow changes value)

Header with Sticky Behavior and Smooth Slide Down Animation

Answer №1

Similar questions

Overlap of sub menus

Is there a way to alter multiple classes using hover effect on a single class without the use of JavaScript, only employing

Resetting the Countdown Clock: A Transformation Process

allowing absolutely positioned region to expand

Issues with Google maps are causing multiple maps to malfunction

HTML makes column text wrapping automatic

Can CSS Grid be substituted for Material UI's grid component?

The request response was a JSON object that started with the keyword "POST"

The Excel document became corrupted after downloading through a ReactJs jQuery ajax post request

Tips for preventing overlap between two divs when utilizing position: absolute in CSS

Tips for preventing text wrapping in off-canvas design

Implementing a dynamic function with jQuery Tokenize's change event

The hover effect on the menu button is not covering the entire button when the screen is resized

Troubleshooting problem with media queries in CSS

What is the best way to ensure my image adjusts its width and height responsively?

Combining data from various JSON files to create dynamic charts with Highcharts

Eliminating the appearance of horizontal scroll bar by employing transform scale to zoom out

Issue with styling Icon Menu in material-ui

Trimming Picture on User's Device

Unsure about the jQuery val function