Jquery 粘性头在断点上留下大空间

我有点被粘头上的代码卡住了

如果达到770px点，收割台将收缩。但当我尝试在浏览器上进行测试时，这会给我带来一些问题。尝试在全尺寸浏览器（>770）中加载页面，并将其缩小到（$filter.offset（）.top）{ $filter.before（$filterSpacer）； $filter.addClass（“修复”）； }else if（$filter.hasClass（'fix'）&&$win.scrollTop（）<$filterSpacer.offset（）.top）{ $filter.removeClass（“修复”）； $filterSpacer.remove（）； } }); 第1）部分和第2）部分可以通过以下方法解决：

调整窗口大小时，您需要更新头部的高度

$win.resize(function(){
      $filterSpacer.outerHeight($filter.outerHeight());
});

您可以在这里查看JSFIDLE

然而，当一些浏览器在调整大小的过程中每改变一个像素都会触发这个事件时，也许可以考虑在其中加入某种限制，比如Ben Alman的节流/去盎司插件

对于第3部分中的收缩/非收缩）

我建议使用超时来触发此操作

---

看看这个扩展的小提琴

在添加win时并不能解决问题。resize：（抱歉，我刚刚读了你的第3部分）。。我只解决了1）和2）。。给我一秒钟1）2）不确定是否会赢。调整它的工作方式。添加到我的代码中，但空白仍然存在：（@user3418336请更新JSFIDLE以包含更多的工作代码，因为我提供的JSFIDLE似乎解决了这个问题，因为您当前提供的约束和代码我将相同的内容复制到我的页面中，问题仍然存在：（@haxxxton不要在问题中留下编辑摘要；这就是编辑摘要字段的作用。在问题正文中总结您的编辑内容本身就是垃圾。@JonathanHobbs编辑只需要添加一个换行符，stackexchange post编辑至少需要更改6个字符。如果没有mak，我很乐意留下它更多changes@haxxxton过去还有很多改进的余地，现在仍然有很多改进的余地；6个字符限制的想法是让你看看还有什么需要改进的地方。@JonathanHobbs这不是“改进”问题，而是让它在功能上更具可读性。（html代码未显示，这可能会提示问题，也可能会延迟答案）我完全理解这一限制。我只是解释了为什么我有必要在需要的内容之外添加一些内容。回想起来，我本可以重新编辑我的编辑以删除编辑摘要中的6个以上字符。但我正忙于提供实际答案。感谢您的警惕however@haxxxton当你在提问时像这样，你的一部分义务是找到进一步的方法来改进这个问题。这就是为什么我们对建议的编辑有一个“太小”的拒绝理由。我非常感谢提供缩进，但我要指出的是，你确实有其他方法可以达到最小编辑量。

        body
        {
            margin:0;
            padding:0;
        }
            #head
            {
                width:100%;
                height:100px;
                background:blue;
                opacity: 0.5;
                float:left;             

            }
            #content
            {
                width:100%;
                height:5000px;
                background:yellow;
                float:left;
            }
            .fix
            {
                position:fixed;
                top:0;
                margin:0;
                padding:0;
            }
            @media (max-width:770px)
            {
                #head
                {
                    height:50px;
                }
            }

var
    $win = $(window),
    $filter = $('#head'),
    $filterSpacer = $('<div />', {
      "class": "filter-drop-spacer",
      "height": $filter.outerHeight()
    });



  $win.scroll(function(){     
    if(!$filter.hasClass('fix') && $win.scrollTop() > $filter.offset().top){
      $filter.before($filterSpacer);
      $filter.addClass("fix");


    } else if ($filter.hasClass('fix')  && $win.scrollTop() < $filterSpacer.offset().top){
      $filter.removeClass("fix");
      $filterSpacer.remove();

    }
  });

$win.resize(function(){
      $filterSpacer.outerHeight($filter.outerHeight());
});