Question

我将导航停靠在视口顶部的特定文档高度，当它停靠时，它有一个下拉动画。

vsprintf

  $(document).scroll(function(){
    var x = $(window).scrollTop();

    if(x>=700){
      $("header").addClass("fix");
      if($("header").hasClass("fix")){
        $("header").animate({top: '0'},500);
      }
      $("main").css("padding-top", "100px");
    }

    if(x<=300){
      if($("header").hasClass("fix")){
            $("main").removeAttr("style");
            $("header").removeClass("fix");

      }}
  });

header{background:green}
main{height:2000px;background:yellow;}
#header{padding:20px; display: inline-flex;}
.fix{
  width:100%;
  position:fixed;
  top:-100px;
}

我的问题是，在我向上滚动到页面顶部并再次向下滚动页面后，弹出导航。它没有下拉（显示动画），我该如何解决这个问题？

https://jsfiddle.net/DamianToczek/rc05odu8/

（我自己编写了代码，不是复制粘贴）

Answer 1

你可以用普通的CSS做到这一点：

header {  
  top: -100px;
  transition: top .5s;
}

header.fix{
  width:100%;
  position:fixed; 
  top: 0;
}

只需从您的js

中删除animate来电即可

编辑：这是fiddle

Answer 2

由于使用CSS转换的@ sklingler93的答案似乎是最好的方法，OP的答案是：

因为滚动事件会触发很多次函数，你应该这样做在.stop()之前使用.animate(...)以确保不对动画进行排队。
您忘记删除if <300声明中标题的样式属性。

以下是您的代码清理的答案，因为有一些无用的说明：https://jsfiddle.net/rc05odu8/2/

或者只是代码的修复程序是：

  $(document).scroll(function() {
    var x = $(window).scrollTop();

    if (x >= 700) {
      $("header").addClass("fix");
      $("header").stop().animate({
        top: '0'
      }, 500);

      $("main").css("padding-top", "100px");
    }

    if (x <= 300) {
      $("main").removeAttr("style");
      $('header').removeAttr('style');
      $("header").removeClass("fix");

    }
  });

Answer 3

我想在这个片段中......

if(x>=(a-100)){
  $("header").addClass("fix");
  if($("header").hasClass("fix")){
    $("header").animate({top: '0'},500);
  }
  $("main").css("padding-top", "100px");
}

$("header").addClass("fix");应位于if($("header").hasClass("fix"));
可能$("main").css("padding-top", "100px");也应该在if内;
你应该否定if表达;

这样你就可以：

if(x>=(a-100))
{
  if(!$("header").hasClass("fix"))
  {
    $("header").addClass("fix");
    $("header").animate({top: '0'},500);
    $("main").css("padding-top", "100px");
  }
}

对我来说更有意义。

此外，当滚动条回到顶部时，您必须清除所有动画应用的样式。

希望它有所帮助。

为什么我的Jquery“动画”只触发一次，而不是每次触发该函数？

3 个答案: