Announcement bar sticky when scrolling up

Store Design
, , ,
1

How to get announcement bar sticky if i scroll up.

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

2

Please go to

  1. Online store
  2. Themes → Edit theme
  3. Layout
  4. theme.liquid and paste this code before

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

3

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

4

@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');
    }
});
​
5

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

6

Please replace with below code.