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%;
}