scrollTop addclass 跳转

Question

我几乎是编码方面的新手，我目前正在一家公司工作作为我学习的一部分。 他们给了我一个 html 和 css 文件来编辑，我必须根据滚动的距离使图像出现和消失。在从顶部到达具体距离后，我设法让班级消失了，但它发生了奇怪的跳跃。代码不是我的，我只是编辑了一些东西，如果缺少任何信息，请告诉我，以便我添加。

HTML 是这样的：

jQuery("document").ready(function($){ 

var nav = $('#feedback_form'); 

$(window).scroll(function () { 
    if ($(this).scrollTop() > 445 && $(this).scrollTop() < 1289 ) { 
        nav.addClass("f-nav");
    } else { 
        nav.removeClass("f-nav");
    } 

}); 

它在 css 中所指的“f-nav”类是这个：

.f-nav {
z-index: 9998!important;
position: fixed!important;
top: 0; 

-webkit-animation: fadeIn ease-in 1; /* Safari and Chrome */
-moz-animation: fadeIn ease-in 1; /* Firefox */
-ms-animation: fadeIn ease-in 1; /* Internet Explorer */
-o-animation: fadeIn ease-in 1; /* Opera */
animation: fadeIn ease-in 1;

-webkit-animation-duration:2s;
-moz-animation-duration:2s;
-ms-animation-duration:2s;
-o-animation-duration:2s;
animation-duration:2s;

}

addClass 也会发生跳跃，但不太明显。 就像我说的那样，我对此很陌生，所以我不知道问题可能出在哪里。

这是一个解决问题的方法：

https://gyazo.com/9b3e0a910c095fa3b180b9501eed9981

Answer 1

试试这个，它会起作用的

if ($(window).scrollTop() > 445 || $("html").scrollTop() > 289) {
  $("#feedback_form").fadeIn();
} else {
  $("#feedback_form").fadeOut();
};

您确定在您的代码中声明了 $(this) 吗？ 接受我的代码是否有效，或者让我知道是否有任何问题。我可以帮你。

Answer 2

不好意思在这里写代码我得再做一个回答： 关于$(this)，你必须知道什么是$(this)。例如：

$(".ex").click(function(){
      $(this).addClass("example");
})

$(this) 上面的意思是 $(".ex)。

并且图像没有跟随滚动，我认为这是因为 z-index（可能）。

所以试试这个：

if ($(window).scrollTop() > 445 || $("html").scrollTop() < 1289) {
  $("#feedback_form").fadeIn().addClass("myClass");
} else {
  $("#feedback_form").fadeOut();
};

与

.myClass{
   position: fixed; /*add !important if you need*/
   z-index: 9999; /*add !important if you need*/
   width: 100%;
}