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

The overlay only covers a portion of the page

Strange Safari 15 bug causing unexpected transformations

jQuery function fails to work on a list that has been dynamically generated

Utilize AngularJS to modify the appearance of text

Troubles with Conditional Application of CSS Styles to a Twitter-Bootstrap Table

The iframe content is not updating despite using jQuery

Discovering a specific element using jQuery

When an image is loaded, use Jquery to automatically open a new tab, instead of

Remove elements generated by the .after method with Jquery

When making an ajax call, I passed the data "itemShape" but on the URL page, an error appeared stating "Undefined index: itemShape"

A HTML List with Five Columns

Identify when a request is being executed using AJAX by checking the URL

The information window is malfunctioning on Google Maps

The current state of my DOM doesn't match the updated value in my model. The update is triggered by a function that is called when a button is clicked

Navigating through a PHP table, tracking your progress with a

What is causing the label's color to remain the same?

Using Ajax to Retrieve JSON Data with jQuery

Sending the complete data from an HTML table to a web method

Combining various formats within a single Ajax PHP webpage

Tips for adjusting the width of an HTML element that is set to position: fixed