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

scrollTop addclass会跳转

2 个答案: