Sticky nav active state working on click instead of on scroll

Question

I have a navigation bar at the top of the page and I'm trying to get a box shadow to appear underneath it on scroll.

I've tried using .active and :active with no luck. I can force the shadow to appear in chrome devtools but can't get this to work otherwise on scroll.

.sidenav-breadcrumbs {
    height: 45px; 
    font-size: 16px; 
    font-weight: bold; 
    background: red;
}
.nav-fixed-top {
    position: fixed;
    top: 100px;
    right: 0;
    left: 0;
    z-index: 1020;
}
.shadow:active {
    box-shadow: 0 0 10px rgba(0,0,0,0.4)!important;
}

Shadow should appear under bar on scroll but seems to only appear when clicking the bar. Thank you if you can help.

Thank you @Shuvo, you pointed me in the right direction. I used this code and all working well: $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 0) { $(".sidenav-breadcrumbs").addClass("active"); } else { $(".sidenav-breadcrumbs").removeClass("active"); } }); — ryannewell, Jun 11 '19 at 09:08

score 0 · Answer 1 · answered Jun 10 '19 at 11:25

Active selector applies to clicked element, that's why the shadow appears when you click the bar. There is no selector for scroll, so you should be using JavaScript to add the shadow class while scrolling.

document.addEventListener("scroll", function(){
    addShadowClassToBar();
});

And since you probably want to remove the shadow after scrolling is finished you should also remove the class. Here is a previous question that deals with detecting scroll stop.

Sticky nav active state working on click instead of on scroll

1 Answers1