使用javascript/ css平滑导航栏

Question

I created a navigation bar with java script and the problem is that my first scrolling make the navigation bar to disappear with out the nice animation. The nice animation fade up just after the first scrolling.

CSS:

    .navig {
      width: 100%;
      height: 75px;
      position: fixed;
      max-width: 100%;
      z-index: 50;
      transition: top 0.8s;
    }

javaScript:

    var prevS = window.pageYOffset;

    window.onscroll = function() {
    var currentScroll = window.pageYOffset

    if (prevS > currentScroll) {
    document.querySelector('.navig').style.top = '0'
    } else {
    document.querySelector('.navig').style.top = '-100px'
     }

    prevS = currentScroll
    }

You can watch it "live" here: https://jsfiddle.net/Benjamn89/rgxtb7en/345/

 var prevS = window.pageYOffset; window.onscroll = function() { var currentScroll = window.pageYOffset if (prevS > currentScroll) { document.querySelector('.navig').style.top = '0' } else { document.querySelector('.navig').style.top = '-100px' } prevS = currentScroll }

 body { margin: 0; } /* ################## First Section ################## */.first_section { background-image: url('https://cdn1.imggmi.com/uploads/2019/10/17/133545e7537a1782b5722a3359f8e935-full.jpg'); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; width: 100%; height: 800px; }.title_section_1 { position: relative; top: 30%; font-size: 4em; margin: 0; font-family: 'Modak', cursive; font-weight: lighter; color: #ffffe6; }.first_section h1 { color: #ffffe6; text-align: center; }.wrap_h_sec1 { text-align: center; position: relative; top: 40%; }.sec_1 { display: inline; font-size: 1.3em; margin: 0; border: solid 0.5px; padding: 1%; border-radius: 5%; transition: 0.8s; }.sec_1:hover { cursor: pointer; background-color: #22dbd6; } /* ############### All about the navigation BAR #################### */.navig { width: 100%; height: 75px; position: fixed; max-width: 100%; z-index: 50; transition: top 0.8s; }.navig p { margin: 0; color: white; display: inline-block; padding: 1.5%; font-family: 'Ubuntu Condensed', sans-serif; }.navig p:hover { border: solid 0.5px; cursor: pointer; border-color: #22dbd6; }.navig p { margin-left: 5%; } #n-three { border-top: none; background-color: #22dbd6; border-radius: 5%; color: #ffffe6; }.helper { display: inline-block; height: 100%; vertical-align: middle; }.navig img { max-height: 80%; border-radius: 50%; margin: 0 0 0 5%; vertical-align: middle; } /* ##################### All about the navigation BAR ################### */ /* ################## Second Section and so on ################## */.second_section { height: 500px; width: 100%; background-color: red; }.third_section { height: 500px; width: 100%; background-color: green; }.four_section { height: 500px; width: 100%; background-color: black; } /* The end of the regular screen style */

 <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Anton|Modak|Ubuntu+Condensed&display=swap" rel="stylesheet"> <:-- The Sticky navigation --> <div class='navig'> <span class="helper"></span><img class='profile_img' src='https.//cdn1.imggmi.com/uploads/2019/9/23/60e84f9d819b525f1a979e6e4c996ea0-full.jpg'> <p id='n-one'>Projects</p> <p id='n-two'>About</p> <p id='n-three'>Contact</p> </div> <!-- ################## navig ####################--> <!-- First Section with the background image of the office --> <div class='first_section'> <h1 class='title_section_1'>Web Designer</h1> <!-- Wraping the h1 element for centering --> <div class='wrap_h_sec1'> <h1 class='btn1 sec_1'>Projects</h1> <h1 class='btn2 sec_1'>Contact</h1> </div> </div> <!-- ################## END OF first_section ##################--> <div class='second_section'> </div> <!-- second_section --> <div class='third_section'> </div> <!-- third_section --> <div class='four_section'> </div> <!-- four_section -->

Thanks:)

Answer 1

Because of your default top value not defined. Adding after top:0 to.nav it will be fixed.

 var prevS = window.pageYOffset; window.onscroll = function() { var currentScroll = window.pageYOffset if (prevS > currentScroll) { document.querySelector('.navig').style.top = '0' } else { document.querySelector('.navig').style.top = '-100px' } prevS = currentScroll }

 body { margin: 0; } /* ################## First Section ################## */.first_section { background-image: url('https://cdn1.imggmi.com/uploads/2019/10/17/133545e7537a1782b5722a3359f8e935-full.jpg'); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; width: 100%; height: 800px; }.title_section_1 { position: relative; top: 30%; font-size: 4em; margin: 0; font-family: 'Modak', cursive; font-weight: lighter; color: #ffffe6; }.first_section h1 { color: #ffffe6; text-align: center; }.wrap_h_sec1 { text-align: center; position: relative; top: 40%; }.sec_1 { display: inline; font-size: 1.3em; margin: 0; border: solid 0.5px; padding: 1%; border-radius: 5%; transition: 0.8s; }.sec_1:hover { cursor: pointer; background-color: #22dbd6; } /* ############### All about the navigation BAR #################### */.navig { width: 100%; height: 75px; position: fixed; max-width: 100%; z-index: 50; transition: top 0.8s; top:0 }.navig p { margin: 0; color: white; display: inline-block; padding: 1.5%; font-family: 'Ubuntu Condensed', sans-serif; }.navig p:hover { border: solid 0.5px; cursor: pointer; border-color: #22dbd6; }.navig p { margin-left: 5%; } #n-three { border-top: none; background-color: #22dbd6; border-radius: 5%; color: #ffffe6; }.helper { display: inline-block; height: 100%; vertical-align: middle; }.navig img { max-height: 80%; border-radius: 50%; margin: 0 0 0 5%; vertical-align: middle; } /* ##################### All about the navigation BAR ################### */ /* ################## Second Section and so on ################## */.second_section { height: 500px; width: 100%; background-color: red; }.third_section { height: 500px; width: 100%; background-color: green; }.four_section { height: 500px; width: 100%; background-color: black; } /* The end of the regular screen style */

 <head> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <:-- Load fonts --> <link href="https.//fonts.googleapis?com/css:family=Abril+Fatface|Anton|Modak|Ubuntu+Condensed&display=swap" rel="stylesheet"> <title> My portFolio </title> </head> <body> <.-- The Sticky navigation --> <div class='navig'> <span class="helper"></span><img class='profile_img' src='https.//cdn1.imggmi.com/uploads/2019/9/23/60e84f9d819b525f1a979e6e4c996ea0-full.jpg'> <p id='n-one'>Projects</p> <p id='n-two'>About</p> <p id='n-three'>Contact</p> </div> <!-- ################## navig ####################--> <!-- First Section with the background image of the office --> <div class='first_section'> <h1 class='title_section_1'>Web Designer</h1> <!-- Wraping the h1 element for centering --> <div class='wrap_h_sec1'> <h1 class='btn1 sec_1'>Projects</h1> <h1 class='btn2 sec_1'>Contact</h1> </div> </div> <!-- ################## END OF first_section ##################--> <div class='second_section'> </div> <!-- second_section --> <div class='third_section'> </div> <!-- third_section --> <div class='four_section'> </div><!-- four_section --> </body>