修复了滚动时导航栏隐藏的问题

Question

CSS出现问题，因为我使用的是固定的导航栏，应该随页面一起使用，但是在这种情况下，当我滚动时，它就像第二幅图像一样简单地隐藏了导航栏的一部分：

.main_nav{
    display:none;
    position:fixed;
    z-index:10;
    width:100%;
    height:90px;
    background:black;
    top:0 !important;
}

.main_nav ul{
    margin-top: 17px;
    text-decoration:none;
}

<script>
    $(document).ready(function(){
      $(window).scroll(function() {
        if ($(document).scrollTop() > 90) { 
            
                   $(".main_nav").slideDown();  

      
        } else {
            
                  $(".main_nav").slideUp(); 

        }
      });
    });
</script>

<nav class="main_nav">
	    <ul>
	        <li><img src="../img/logo.svg" style="height:50px;" alt="" /></li>
	    </ul>
</nav>

Answer 1

这是我的一个有效示例：http://jsfiddle.net/L3s8x96q/

position:fixed; top:0; z-index:100;

Answer 2

如果我对您的理解正确，那么我可以根据提供的小提琴回答您。首先，您需要在标题中添加一个ID

<div style="background-color: black; width: 100%; margin: 0px; position:fixed; top:0; width:100%; z-index:100" id="header">
    <button class="button button1">SOMETHING</button>
</div>

在Css中添加以下内容

#header {
   transition: top 0.3s;
}

并且javascript应该是以下

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
    if (prevScrollpos > currentScrollPos) {
        document.getElementById("header").style.top = "0";
    } 
    else {
        document.getElementById("header").style.top = "-50px";
    }
    prevScrollpos = currentScrollPos;
}

This following link could be useful

Answer 3

我的猜测是，这只是一个没有可行示例的猜测，这是与显示都不显示的奇怪交互。如果要使用向下滑动效果，则可以使用平移Y来隐藏和显示它。

window.addEventListener('scroll', () => {
  if(window.scrollY > 100) {
    document.querySelector('nav').classList.add('scroll')
  } else {
    document.querySelector('nav').classList.remove('scroll')
  }
})

body {
  margin: 0;
  padding: 0;
  height: 150vh;
  background: linear-gradient(blue, green);
}
nav {
  height: 90px;
  width: 100%;
  position: fixed;
  background: black;
  transform: translatey(-90px);
  transition: all ease-in-out .5s;
  z-index: 2;
}
.scroll {
  transform: translatey(0px);
}

<nav></nav>

您必须对代码段进行整页才能看到导航，或者您可以使用完全相同的代码打开此codepen。