javascript - 使用 javascript/css 流畅地导航栏

Question

我用 java 脚本创建了一个导航栏，问题是我的第一次滚动使 导航栏在没有漂亮动画的情况下消失。 漂亮的动画会在第一次滚动后消失。

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 之后添加到 .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>