How to make a shadow appear on the header when scrolling?

  • 0
    Hello, fixed the header with position fixed, width 100% and z-index. But in the layout - when you scroll down, a shadow appears at the header, which separates it a little from the content, but at the same time - when the header is in place and there is no scroll - there is no shadow either. Help, implement, please.
    JavaScript Anonymous, Dec 17, 2019

  • 2 Answers
  • 0
    $(window).scroll(function(){
    if ($(window).scrollTop() > 100){
    $('.header').addClass('scroll');
    } else {
    $('.header').removeClass('scroll');
    }
    });


    Accordingly, for the scroll class you give box-shadow

    And so that it disappears while standing still, I think to add a class only to the scroll event
    Anonymous

  • 0
    Use the sticky plugin stickyjs.com or write js by hand.
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!