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

如果您移出页面，导航栏应该隐藏多数民众赞成吗？ 这里的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);

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

Answer 2

我通过这样做解决了

$(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;
}
}