通过 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;

    }

});

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

如果您在移动设备（或使用 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;
}

Answer 2

借助一个名为smoothwheel (Get it here) 的非常小的插件，我有另一种方法。我扩展了@Rohith Murali 的答案并创建了一个示例。看看这里：

https://codepen.io/anon/pen/NMBdpx

插件本身使您可以平滑滚动，对性能的影响很小。这符合您的需求吗？