jquery - 粘性 header 在断点处留下大空间

Question

我的代码有点卡在粘性 header 上。

如果达到 770px 点，标题将缩小。但是当我尝试在浏览器上进行测试时，这会给我带来一些问题。尝试在全尺寸浏览器中加载页面(>770)并将其缩小到(<770)然后滚动，它会给我留出空间。

有什么办法可以消除吗？

如果您以小尺寸(<770)打开并在滚动时放大(>770)，内容将被 headbar 覆盖。

如何修改我的脚本以在我停止时缩小，以及当我向下滚动时它再次缩小。 (就像 facebook 应用程序的状态栏)

我的 HTML

<div id="head"></div>
<div id="content"></div>

我的 CSS

        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();

    }
  });

Answer 1

部分 1) 和 2) 可以用以下方法解决:

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

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

你可以在这里查看 jsFiddle http://jsfiddle.net/k7utG/

然而，由于某些浏览器会在调整大小事件期间触发用户更改的每个像素，或许可以考虑在其中放置某种限制器，例如 Ben Alman 的 throttle /去抖动插件 http://benalman.com/projects/jquery-throttle-debounce-plugin/

至于第3部分中的收缩/不收缩

我建议使用超时来触发这个

看看这个扩展的 fiddle http://jsfiddle.net/k7utG/2/