使用javascript/ css平滑導航欄

Question

我用 java 腳本創建了一個導航欄，問題是我的第一次滾動使導航欄在沒有漂亮的 animation 的情況下消失。 漂亮的 animation 在第一次滾動后就消失了。

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
    }

你可以在這里“現場”觀看： 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 -->

謝謝：）

Answer 1

由於未定義您的默認最高值。 在 top:0 to.nav 之后添加它將被修復。

 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>