Question

所以这就是我想要做的事情：

我想要一个带有固定标题的目标网页。如果用户向下滚动页面y px，我想将标题大小调整为x px。如果用户再次向上滚动并滚动“线”，则应再次调整为原始尺寸。这是我的代码：

INSERT

    $(document).scroll(function(){
        if($(document).scrollTop() > 300) {
            $("#header").animate({height: "50px"}, 400);
        }
        else {
            $("#header").animate({height: "200px"}, 400);
        }
        console.log($(document).scrollTop());
    });

        #header {
            background-color: coral;
            display: flex;
            justify-content: space-around;
            height: 200px;
            align-items: center;
            position: fixed;
            width: 100%;
            z-index: 1337;
        }

现在，我的代码确实可以在向下滚动时缩小标题，当我向上滚动但是有一个巨大的延迟时也是如此。当我向上滚动并且我在scrollTop 0时，它需要几秒钟才能再次调整大小。我想可能是它必须计算所有其他scrollTop值才能获得一个使标题再次变大的值。我如何改进代码，以便它可以毫无延迟地工作？

Answer 1

正如@adeneo在评论中提到的那样..你可以使用另一个if语句

$(document).scroll(function(){
      if($(document).scrollTop() > 300) {
        if($("#header").height() == 200){
          $("#header").animate({height: "50px"}, 400);
        }
      }
      else {
        if($("#header").height() == 50){
          $("#header").animate({height: "200px"}, 400);
        }
      }
      console.log($(document).scrollTop());
});

Working Demo

jQuery scrollTop检测需要很长时间

1 个答案: