如何在导航栏下制作阴影？

Question

I am trying to make this https://www.hackerrank.com/ front page using Html and CSS. But their nav bar has a very nice shadow when it slides down. I don't know how to make it, please need some help

Answer 1

use

--tw-shadow-color: #000;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

or use boxshadow property in css

Answer 2

for this scrolling effect, you need to use javascript for adding or removing classes on page scroll and add the basis of the classes you can add any CSS you want to add

for example, your HTML is like

<!-- no scroll -->
<nav class="navigation sticky">
    <!-- code -->
</nav>

<!-- after scrolling -->
<nav class="navigation sticky nav-sticky">
    <!-- code -->
</nav>

or add some CSS like

 .nav-sticky {
        background-color: #ffffff ;
        -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
    }

use this javascript code to add or remove class

Note: Make sure you should include the javascript library

! function($) {
    "use strict";
    // Menu
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 50) {
            $(".sticky").addClass("nav-sticky");
        } else {
            $(".sticky").removeClass("nav-sticky");
        }
    });
}(jQuery)