永久報頭使網站在高度

Question

崩潰這是我的代碼：

http://jsfiddle.net/KCb5z/8/embedded/result/ http://jsfiddle.net/KCb5z/8/

$(function() { 

    var $select = $('#select'); 
    var $window = $(window); 
    var isFixed = false; 
    var init = $select.length ? $select.offset().top : 0; 

    $window.scroll(function() { 
     var currentScrollTop = $window.scrollTop(); 
     if (currentScrollTop > init && isFixed === false) { 
      isFixed = true; 
      $select.css({ 
       top: 0, 
       position: 'fixed' 
      }); 
     } else if (currentScrollTop <= init && isFixed === true) { 
      isFixed = false; 
      $select.css('position', 'relative'); 
     } 
    }); 

    $(".nav").click(function (e) { 
     e.preventDefault(); 
     var divId = $(this).attr('href'); 
     $('body').animate({ 
      scrollTop: $(divId).offset().top - $select.height() 
     }, 500); 
    }); 

}); 

的問題是，當我滾動過去，從相對變化的CSS固定的黃條。這意味着該網站現在不再那麼高了，它拖拽了所有內容，造成了一種令人不快的效果。

這幾乎就像我需要一個包含div的黃色酒吧，仍然保持高度，或插入某種div來保持網站的高度相同，如果酒吧停靠或不。

任何人都可以告訴我，請問這可能如何實施？

Answer 1

當位置設置爲固定時，將填充添加到主體的頂部以適應它。類似地，取出填充在元素是未固定的：

if (currentScrollTop > init && isFixed === false) { 
    isFixed = true; 
    $select.css({ 
     top: 0, 
     position: 'fixed' 
    }); 
    $('body').css('padding-top', $select.height()); 
} 
else if (currentScrollTop <= init && isFixed === true) { 
    isFixed = false; 
    $select.css('position', 'relative'); 
    $('body').css('padding-top', 0); 
} 

Example fiddle

筆記，所述padding-top可以在一個以上的任何元件上設置在需要時被固定。我只是使用了body，因爲它是最方便的例子。