Javascript 优化

Question

我似乎无法弄清楚如何让这个 JS 工作。 scroll function 起作用但不能隐藏。还有没有办法用更少的代码行来做到这一点？我希望 .down-arrow 在 50px 之后 fade out 并在 50px 之后隐藏，这样它就不能被点击。它在我的网站和代码笔上工作，但后来随机停止工作。代码显然是错误的，但不知何故它正在工作......

JS:

$(window).scroll(function() {
  $(".down-arrow").css("opacity", 1 -
    $(window).scrollTop() / 50 );
});

$(window).scroll(function() {
  $(".down-arrow").hide(fast);
   $(window).scrollTop() > 50 );
});

[编辑]

这是我写的新 JS，其中包含关于明显语法错误的建议以及将它们全部放在一个主体中的建议，无论如何我都希望这样做:

$(window).scroll(function() {
  $(".down-arrow").hide("fast");
    $(".down-arrow").css("opacity", 1 -
      $(window).scrollTop() / 50 );
});

但现在我希望箭头在使用回到顶部时显示，在 50px 标记之上。

Answer 1

首先，一个函数不需要注册两次

var element = $(".down-arrow");
$(window).scroll(function() {
  if( $(window).scrollTop() > 50){
   element.css("opacity","0");
   if(!element.hasClass("hidden")){
     element.addClass("hidden");
   }
   }else{
   $('.down-arrow').removeClass("hidden") // if there is nothing, nothing to remove
   $(".down-arrow").css("opacity", 1 -$(window).scrollTop() / 50 );
   }
});

一些 CSS 更改:

.down-arrow.hidden{
  display:none;
}
.down-arrow:hover {
  //you have to overwrite inline opacity , which js makes..
  opacity: 1 !important;
}

现在它应该按预期工作了，试试 :)