用DIV堅持頂頁面

Question

http://jsfiddle.net/j2qjgob5/

<div id="wrapper"> 
    <div id="new_country"> 
     <div id="new_country_text" > 
     New Country 
    </div> 
    </div> 
    </div> 
    <div id="space"><br><br>blablablablabballabla</div> 

#container { 
padding: 100px 0 2500px; 
} 

#wrapper { 
    width: 100%; 
    height: 57px; 
    border: solid; 
} 

#new_country { 
    width: 162px; 
    height: 42px; 
    position: relative; 
    background-color: #1abc9c; 
    border-radius: 5px; 
    top: 8px; 
} 

#new_country:hover { 
    opacity: 0.8; 
} 

#new_country:active { 
    box-shadow: 0px 0px 9px 4px #16a085 inset; 
} 

#new_country_text { 
    position: absolute; 
    width: inherit; 
    height: inherit; 
    top: 50%; 
    text-align: center; 
    line-height: 0; 
    display: table; 
    color: whitesmoke; 
} 

function fixDiv() { 
    var $div = $("#wrapper"); 
    if ($(window).scrollTop() > $div.data("top")) { 
     $('#wrapper').css({ 
      'position': 'fixed', 
       'top': '0', 
       'width': '100%' 
     }); 
    } else { 
     $('#wrapper').css({ 
      'position': 'static', 
       'top': 'auto', 
       'width': '100%' 
     }); 
    } 
} 

$("#wrapper").data("top", $("#wrapper").offset().top); // set original position on load 
$(window).scroll(fixDiv); 

每次包裝DIV枝頂端的小問題，它下面的div一種spazzes向上，然後包裝DIV抽搐。我怎樣才能讓div順利地粘貼到頂部，而不會影響其他div？謝謝。

Answer 1

對於一個你需要從文件清除默認保證金：

html,body{ 
    margin: 0; 
    padding: 0; 
} 

你的JS是改變寬度和高度上.wrapper到：

$('#wrapper').css({'position': 'static', 'width': '100%', 'height': '57px', }) 

但頁面上的CSS .wrapper負載爲：

#wrapper { 
    width: 50%; 
    height: 44px; 
    ... 
} 

使它們相同：

#wrapper { 
    width: 100%; 
    height: 57px; 
    ... 
} 

FIDDLE

更新2

所以，問題是.wrapper變得fixed從文檔流中刪除，引起#space部分只是跳轉到頂部該頁面（因爲標題不再被識別）。做這一切的一個簡單的方法是隻需添加/刪除類，像這樣：

if ($(window).scrollTop() > $div.data("top")) { 
    $('#wrapper').addClass("fixed"); 
} 
else { 
    $('#wrapper').removeClass("fixed"); 
} 

，然後在你的CSS，你可以添加自己的規則，也可以調整的#space填充，因爲它的兄弟姐妹：

.fixed{ 
    position: fixed; 
    top: 0; 
    //any other styles 
} 

.fixed + #space{ //target sibling #space 
    padding: 57px 0 0; //set padding to height of .wrapper 
} 

NEW FIDDLE