Question

我对我的代码卡在一个粘性标题上。

如果达到770px点，标题将缩小。但是当我尝试在浏览器上进行测试时，这会引起一些问题。尝试在全尺寸浏览器中加载页面（＆gt; 770）并将其缩小到（＆lt; 770）然后滚动，它会给我留一个空格。

有没有办法消除它？

如果您在滚动时以小尺寸（＆lt; 770）打开并放大（> 770），则内容将被头条覆盖。

当我停止时，如何修改我的脚本以缩小，当我向下滚动时，它会再次下降。（就像facebook apps状态栏一样）

我的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的油门/去抖动插件http://benalman.com/projects/jquery-throttle-debounce-plugin/

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

我建议使用超时来触发此

看看这个扩展的小提琴http://jsfiddle.net/k7utG/2/

粘性标题在断点上留下大空间

1 个答案: