How to make sticky header when scrolling up?

Solved
Nico38
Pathfinder
94 4 44

Hello everybody !

I followed this tutorial :

https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/td... 

it works, no problem but i'm only looking when i scroll up, possible ?

thx !

 

 

 
 
 
 
 
KetanKumar
Shopify Partner
20387 2111 7666

@Nico38 

Welcome to the Shopify community!
and Thanks for your question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nico38
Pathfinder
94 4 44
KetanKumar
Shopify Partner
20387 2111 7666

@Nico38 

Thanks please flow this step

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.js.liquid->paste below code at the bottom of the file.

$(window).scroll(function() {
if ($(this).scrollTop() > 35){  
    $('.site-header').addClass("sticky");
  }
  else{
    $('.site-header').removeClass("sticky");
  }
});

Step = 2

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.site-header.sticky {
   position: fixed;
    width: 100%;
    z-index: 1;
    top: 0;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nico38
Pathfinder
94 4 44

thx @KetanKumar 

it works, but i'm  looking only for it to work when I scroll up and not when I scroll down

KetanKumar
Shopify Partner
20387 2111 7666

@Nico38 

do you mean like this?

https://codepen.io/kittenlane/pen/gPNVgd

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nico38
Pathfinder
94 4 44

yes, i think @KetanKumar 

where to insert the code for htlm ?

KetanKumar
Shopify Partner
20387 2111 7666

This is an accepted solution.

@Nico38 

not just HTML code 

but can you try this script may work

remove first-script after this add

// Hide header on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If scrolled down and past the navbar, add class .nav-up.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('site-header').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('site-header');
        }
    }
  
    lastScrollTop = st;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nico38
Pathfinder
94 4 44

@KetanKumar 

I replaced theme.js with the last one but it doesn't work . 

just my logo and shopping cart logo, customer logo and search logo just moving when scroll up.

to give you an idea, here is an store exemple when scroll up.

https://www.laboutiqueofficielle.com/ 

 

KetanKumar
Shopify Partner
20387 2111 7666

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing