删除课程后导航不返回原始位置

时间:2017-06-12 11:48:24

标签: jquery html css css3

代码控制我的导航。滚动300px时在屏幕上转换。滚动向上滚动屏幕(滚动内容<300px)

$(document).ready(function() {

  $(window).scroll(function() {

    if ($(window).scrollTop() > 300) {
      $('nav').addClass('stick');
      $('nav').css('top', '0');
    }

    if ($(window).scrollTop() < 300) {
      $('nav').removeClass('stick');
      $('nav').css('top', '100%'); // my suggestion but doesn't work
    }

  });

});
header {
  min-height: 100px;
  width: 100%;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: inherit;
  -webkit-transition: top 0.75s ease;
  -moz-transition: top 0.75s ease;
  -ms-transition: top 0.75s ease;
  -o-transition: top 0.75s ease;
  transition: top 0.75s ease;
}

nav.stick {
  position: fixed;
  min-height: 100px;
  top: -100%;
  z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav id="s-nav">
    ...
  </nav>
</header>

我需要它来启动屏幕外并仅在滚动时> gtpp(当应用.stick类时)向下转换。代码有效,但是当我向上滚动时(当删除.stick类时)导航仍然在屏幕外。

1 个答案:

答案 0 :(得分:0)

如果我正确地理解你,你想让元素回到原来的位置,那么它是从右边开始的吗?如果是这样;试试下面的调整;

&#13;
&#13;
$(document).ready(function() {

  $(window).scroll(function() {

    if ($(window).scrollTop() > 300) {
      $('nav').addClass('stick');
      $('nav').css('top', '0');
    }

    if ($(window).scrollTop() < 300) {
      $('nav').removeClass('stick');
      $('nav').css('top', '0'); // try this.
    }

  });

});
&#13;
header {
  min-height: 100px;
  width: 100%;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  min-height: inherit;
  -webkit-transition: top 0.75s ease;
  -moz-transition: top 0.75s ease;
  -ms-transition: top 0.75s ease;
  -o-transition: top 0.75s ease;
  transition: top 0.75s ease;
}

nav.stick {
  position: fixed;
  min-height: 100px;
  top: -100%;
  z-index: 999;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav id="s-nav">
    ...
  </nav>
</header>
&#13;
&#13;
&#13;