Announcement bar sticky when scrolling up

iHavPet
Excursionist
66 0 6

How to get announcement bar sticky if i scroll up.

Website: https://6a0203-f3.myshopify.com/

Replies 5 (5)

Hardik2903
Excursionist
55 6 7

Please go to
1) Online store
2) Themes -> Edit theme
3) Layout
4) theme.liquid and paste this code before </head>

<style>
 .announcement-bar-section.sticky-announcement-bar-section {
    position: sticky;
    top: 0;
 }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $(window).scroll(function(){
    if (!$('.section-header').hasClass('shopify-section-header-hidden') && $('.section-header').hasClass('shopify-section-header-sticky')) {
        $('.section-header').css('top', $(".announcement-bar-section").outerWidth() + 'px');
        $('.announcement-bar-section').addClass('sticky-announcement-bar-section');
    } else {
      $('.section-header').css('top', 0);
      $('.announcement-bar-section').removeClass('sticky-announcement-bar-section');
    }
  });
});
</script>

 

If it was helpful, then please like and accept it as a solution.

iHavPet
Excursionist
66 0 6

Didnt worked you can check by yourself https://6a0203-f3.myshopify.com/

iHavPet
Excursionist
66 0 6

It needs to move like header if im scrolling up then it will appear also

 

Hardik2903
Excursionist
55 6 7

Please replace with below code.

<style>
 .announcement-bar-section.sticky-announcement-bar-section {
    position: sticky;
    top: 0;
 }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
  $(window).scroll(function(){
    if (!$('.section-header').hasClass('shopify-section-header-hidden') && $('.section-header').hasClass('shopify-section-header-sticky')) {
        $('.section-header').css('top', $(".announcement-bar-section").outerHeight() + 'px');
        $('.announcement-bar-section').addClass('sticky-announcement-bar-section');
    } else {
      $('.section-header').css('top', 0);
      $('.announcement-bar-section').removeClass('sticky-announcement-bar-section');
    }
  });
});
</script>

Rishihuptech
Shopify Partner
490 84 94

@iHavPet Please Use This Code 

 

/* Please add the below css on the style Tag 
and removed all css Except Color on .announcement-bar class */
.announcement-bar { 
    width: 100%;
    background-color: #f0f0f0;
    padding: 10px 0;
    transition: top 0.3s, position 0.3s; /* Added transition for top and position */
    z-index: 1000;
}

.announcement-bar.sticky {
    position: fixed;
    top: 0;
}

// Please add the below JS on script Tag 
window.addEventListener("scroll", function() {
    let scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
    let announcementBar = document.querySelector('.announcement-bar');

    if (scrollPosition > 50) {
        announcementBar.classList.add('sticky');
    } else {
        announcementBar.classList.remove('sticky');
    }
});
​

 

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required