Start by defining a navigation bar

html

<div id="nav">The navigation bar</div>
Copy the code

css

#nav{
    background: #0aa0f5;
    height: 80px;
    position: fixed; /* "left", "top", "right", "bottom" */
    top: 0px;
    width: 100%;
}
Copy the code

Add enough simulation content below to allow the mouse wheel to slide down or drag the scroll bar

Static contour complete.

In order to have an action when sliding down, the first thing we think of is the scroll event. The onMouseWheel event is effective for the scroll wheel of the mouse, but not for dragging the right scroll bar of the mouse. Here we choose the OnScroll event that is effective for both ways.

window.onscroll = function (e) {
    console.log(e);
}
Copy the code

Gets the value of the property scrollTop from the console.

var scrollTop = e.target.scrollingElement.scrollTop;
Copy the code

Printing the value as we scroll helps us determine if the value supports the following animation.

Use the current value of scrollTop to determine whether to slide up or down, so first define a global variable, used to save the last scrollTop value.

scrollTopLast = 0;
Copy the code
if(scrollTop > scrollTopLast){
    console.log("Scroll down")}else{
    console.log("Scroll up")}Copy the code

Debug in the browser to see if it works, and then implement the style changes.

if(scrollTop > scrollTopLast){
    console.log("Scroll down"The $()"#nav").css("transition"."0.5 s"The $()"#nav").css("opacity"."0")}else{
    console.log("Scroll up"The $()"#nav").css("transition"."0.5 s"The $()"#nav").css("opacity"."1")}Copy the code

Jquery is used to set the style of div. Opacity indicates transparency, and the transition attribute is used to complete the transition from 0 to 1 and 1 to 0 in 0.5s, respectively.

Finally, update the value of the scrollTopLast in preparation for the next scroll.

scrollTopLast = scrollTop;
Copy the code

The complete code

<! DOCTYPE html> <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    </head>
    <style>
        #nav{
            text-align: center;
            background: #0aa0f5;height: 80px; position: fixed; /* Absolute location, available"left"."top"."right"."bottom"*/ width: 100%; top: 0px; } .content{ height: 500px; background:#1eae9e;
        }
    </style>

    <script>
        var scrollTopLast = 0;
        window.onscroll=function(e){
            var scrollTop = e.target.scrollingElement.scrollTop;
            if(scrollTop > scrollTopLast){
                console.log("Pulley rolls down.");
                $("#nav").css("transition"."0.5 s"The $()"#nav").css("opacity"."0")}else{
                console.log("Pulley rolls up.");
                $("#nav").css("transition"."0.5 s"The $()"#nav").css("opacity"."1")
            }
            console.log(e.target.scrollingElement.scrollTop);
            scrollTopLast = scrollTop;
        }
    </script>
    <body>
        <div id="nav"> Navigation </div> <div class="content"> Mock content </div> <div class="content"> Mock content </div> <div class="content"> Mock content </div> <div class="content"> Mock content </div> <div class="content"> Mock content </div> <div class="content"> Mock content </div> <div class="content"</div> </body> </ HTML >Copy the code

end