How can I make a sticky header disappear while scrolling down?

Shopify Discussion
1

Hi all,

My sticky header is working fine and i managed to adjust the size to make it smaller. I want to make the header dissapear when scrolling down but reappear when you stop and scroll up. How can this be achieved?

2

To achieve a disappearing and reappearing sticky header on scroll, you can use JavaScript and CSS.

First, you can add a CSS class to your header that will set the header’s position to fixed, hide it, and reduce its height. For example:

CSS

.sticky-header {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #fff;
height: 50px;
display: none;
z-index: 9999;
}

Next, you can use JavaScript to detect when the user scrolls the page and show or hide the sticky header as needed. Here is an example of how you can achieve this using jQuery:

JS :

$(document).ready(function() {
var lastScrollTop = 0;
var headerHeight = $(‘.site-header’).outerHeight();

$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop && st > headerHeight){
$(‘.sticky-header’).slideUp(200);
} else {
$(‘.sticky-header’).slideDown(200);
}
lastScrollTop = st;
});
});

This code listens for the scroll event on the window and checks the current scroll position (st). If the current position is greater than the previous position and greater than the height of the header, it hides the sticky header using the jQuery slideUp() method. If the current position is less than the previous position, it shows the sticky header using the jQuery slideDown() method.

With this code, your sticky header should disappear when scrolling down and reappear when scrolling up. You can adjust the values in the code to suit your needs, such as the animation duration and the height of the sticky header.

 
3

Thanks for the response. And where do I actually place this code?

4

The code for making your sticky header disappear and reappear on scroll should be added to your theme’s JavaScript file. Here’s how to do it:

  1. From your Shopify admin, click on “Online Store” and then “Themes”.
  2. Click on “Actions” and then “Edit code” for the theme you want to modify.
  3. In the left-hand column of the code editor, click on the “Assets” folder to expand it.
  4. Locate the JavaScript file for your theme. This file will usually be named theme.js or theme.min.js.
  5. Click on the JavaScript file to open it in the editor.
  6. Copy and paste the JavaScript code I provided earlier into the file, at the bottom of the file but above any closing script tags (</script>).
  7. Click “Save” to save your changes.

Once you have added the code to your theme’s JavaScript file, your sticky header should disappear and reappear on scroll as expected. If you have any issues, double-check that the class names and jQuery selectors match the ones in your theme.

5

Thanks but did not manage to get it working.

6

PM me with store URL