粘性標題在斷點上留下大空間

如果頭部達到770px點，頭部會縮小。但是當我嘗試在瀏覽器上進行測試時，這會導致一些問題。嘗試在全尺寸瀏覽器（> 770）中加載頁面並將其縮小到（< 770）然後滾動，這會給我留出空間。

有什麼辦法可以消除它嗎？

如果您在小尺寸（< 770）中打開並在您滾動時放大（> 770），內容將被頭條包含。

當我停下來的時候，如何修改我的腳本縮小，當我向下滾動時它會再次下降。（就像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(); 

    } 
    });

來源

2014-03-28 user3418336

@haxxxton不要在編輯問題中留下編輯摘要;這是編輯摘要字段的用途。總結你在問題主體中的編輯本身是亂拋垃圾的。 – doppelgreener

@JonathanHobbs編輯只需要添加一個換行符，並且stackexchange文章編輯需要至少6個字符才能更改..希望不用做任何更改就可以離開它 – haxxxton

@haxxxton那裏還有更多更多改進空間;這6個字符限制的想法是讓你看看還有哪些需要改進的地方。 – doppelgreener

部分1）和2）可以用得到解決以下：

you ne編輯更新窗口調整大小的頭部高度。

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

，你可以在這裏簽出的jsfiddle http://jsfiddle.net/k7utG/

然而

，某些瀏覽器觸發此，一個人resize事件期間發生變化的每一個像素，也許看把某種限制在那裏，像本Alman的油門/去抖動插件http://benalman.com/projects/jquery-throttle-debounce-plugin/

作爲用於收縮/部分3）

我建議使用超時觸發此

unshrink

看看這個擴大的小提琴http://jsfiddle.net/k7utG/2/

來源

2014-03-28 04:39:48 haxxxton

加入win.resize後不解決問題:( – user3418336

對不起，我剛剛閱讀你的第3部分）..我只解決了1）和2）..給我一秒 – haxxxton

@ user3418336更新瞭解決方案3） – haxxxton

粘性標題在斷點上留下大空間

回答

相關問題