Jquery顶部导航在滚动时消失

Question

大家好，我有一个带有 .header-top 的标题，我想隐藏在滚动条上，我使用下面的代码进行了管理，但是，当 .header-top 出现时，我希望导航向上滑动到顶部淡出，而不仅仅是跳到顶部。有什么想法吗？

我尝试在我的 css 中添加一个过渡到 * 但这不起作用，我不确定什么是最好的方法

<header>
<div class="header-top">
<img class="logo" src="img/Logo long colour.png" alt="Accountancy Wise Logo">
<a href=""><i class="fa fa-envelope" aria-hidden="true"></i> email@accountancywise.com</a>
<a href=""><i class="fa fa-envelope" aria-hidden="true"></i> 07554007114</a>
<form action="subscribe">
<label for="field_email" class="email">
<input class="email-input" id="field_email" name="email" value="" placeholder="Your full email" required="" type="email">

</label>
<div id="submit">
<input class="" name="submit" value="SUBMIT" id="button" type="submit">
    </div>
  </form>
  </div>
  <nav>
  <div class="menu-button">
    <img src="img/Menu.png" alt="">
  </div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Software Savy</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>
</header>


$(window).scroll(function() {
if ($(this).scrollTop()>0)
{
$('.header-top').fadeOut(400);
}
else
{
$('.header-top').fadeIn(400);
}
});




header {
position: fixed;
top: 0;
width: 100%;
background: white;
}

.header-top {
@include container;
display: flex;
flex-direction: column;
justify-content: space-between;


@include desktop {
@include container ($width:80%);
}

.logo {
max-width: 40%;
margin: 0 auto;
margin: 10px auto;
}

a {
display: inline-block;
width: 100%;
text-align: left;
color: $brand-blue;
text-decoration: none;
padding: 10px 0;

&:hover {
  color: darken($brand-blue, 20%);
}
}

form {
display: flex;
flex-direction: row;

.email-input {
padding: 5px;
margin-right: 10px;
border-radius: 5px;
}
#submit {
#button {
background:$brand-blue;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;

&:hover {
background: darken($brand-blue, 20%);
}
}
}
}
}

nav {
background:$brand-blue;
position: relative;
top: 0px;
min-height: 60px;
-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
transition: all .2s linear;
.menu-button {
position: absolute;
top: 4px;
left: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: none;
li {
display:block;

a {
color: white;
display: block;
padding: 10px;
text-align: center;
text-decoration: none;
}
}
}
}

Answer 1

我通过这样做解决了这个问题

$(window).scroll(function() {

if ($(this).scrollTop()>0)
 {
    $('.header-top').addClass('header-top-hide');
 }
else
 {
  $('.header-top').removeClass('header-top-hide');
 }
});

然后添加 css 以匹配添加的类

.header-top-hide {
height: 0px !important;
margin: 0;
padding: 0;

.logo {
display: none;
}

a{
display: none;
}

form {
display: none;
}
}

Answer 2

如果你移出页面导航栏应该隐藏它对吗？ 这里 jquery 隐藏导航栏

$(window).scroll(function () {
      //if you hard code, then use console
      //.log to determine when you want the 
      //nav bar to stick.  
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 280) {
      $('nav').hide();
    }
    if ($(window).scrollTop() < 281) {
      $('nav').show();
    }
  });

如果您向下滚动，这会隐藏导航栏。根据您的情况更改IF 条件中的值。

setTimeout(function() {
$('#myModal').modal();}, 2000);

将隐藏导航栏的代码放在第一个参数中