javascript - 通过 jQuery 以编程方式设置滚动时不要阻止滚动动画

Question

这是我将在下面详细描述的情况的完整代码笔:https://codepen.io/Adam0410/full/MGXjaz/

codepen中包含的javascript(问题的核心)如下:

var collapsed = false;

$(window).scroll(function(){

     var scroll = window.pageYOffset || document.documentElement.scrollTop;

     if (scroll > 207 && !collapsed) {

      $("#header").css({
          position: "fixed",
          height: "50px",
          "line-height": "50px"
      });

       $("#content").css("margin-top", "207px");
        $(document).scrollTop(scroll - 50);

        collapsed = true;

    } else if (scroll < 155 && collapsed) {

        $("#header").css({
            position: "static",
            height: "257px",
            "line-height": "257px"
        });

        $("#content").css("margin-top", "0");
        $(document).scrollTop(scroll + 50);
        collapsed = false;

    }

});

我正在尝试制作一个大标题，它是文档流的一部分，然后当您向下滚动经过它时，它会变成一个较小的固定标题。我希望用户滚动的 Action 在此过程中流畅。

如果您在移动设备(或使用 chrome 的设备工具栏)上以流畅的滚动方式查看笔，并在标题更改的断点周围缓慢滚动，您会发现它是完全流畅的。

但是，如果您在桌面上查看它(再次使用 chrome 或任何其他浏览器)，则使用滚轮以 100 像素的增量滚动。出于这个原因，如果您再次滚动标题更改的断点，您会发现它并不平滑。

发生这种情况是因为 100 像素的滚动不会立即发生，并且在更改文档的 scrollTop 的过程中，100 像素的滚动动画被取消。一旦设置了 scrollTop 属性，是否有任何方法可以检测并恢复此滚动动画？

Answer 1

请查看https://codepen.io/anon/pen/PeabEL

将js改为

$(window).scroll(function(){
    var scroll = window.pageYOffset || document.documentElement.scrollTop;
  var newHeight = 50;
   if(257-scroll>50)
     newHeight = 257-scroll;
    $("#header").css({
        position: "fixed",
        height: newHeight+"px",
        "line-height": newHeight+"px",
      }); 
});

还添加了

#content {
...
  margin-top:257px;
}

和，

#header {
...
position: fixed;
}