JavaScript庫以粘滯標題移動

Question

我有一個「粘滯」標題和一個簡單的JavaScript圖庫。問題是，當我將頁面向下移動時，標題和圖庫都向下移動。

這裏是JavaScript的畫廊：

<script language="JavaScript"> 
var i = 0; var path = new Array(); 

path[0] = "photo1.png"; 
path[1] = "photo2.jpg"; 
path[2] = "photo3.jpg"; 
path[3] = "photo4.jpg"; 
path[4] = "photo5.jpg"; 
path[5] = "photo6.jpg"; 
path[6] = "photo7.jpg"; 

function swapImage() 
{ 
document.slide.src = path[i]; 
if(i < path.length - 1) i++; 
else i = 0; 
setTimeout("swapImage()",2000); 
} 
window.onload=swapImage; 
</script> 

，並在報頭中的CSS：

#header_container { 
background: #b8df50; 
background: -moz-linear-gradient(top, #b8df50 0%, #93ad4c 100%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8df50), color-stop(100%,#93ad4c)); 
background: -webkit-linear-gradient(top, #b8df50 0%,#93ad4c 100%); 
background: -o-linear-gradient(top, #b8df50 0%,#93ad4c 100%); 
background: -ms-linear-gradient(top, #b8df50 0%,#93ad4c 100%); 
background: linear-gradient(to bottom, #b8df50 0%,#93ad4c 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8df50', endColorstr='#93ad4c',GradientType=0); 
border:1px solid #666; 
height:120px; 
left:0; 
position:fixed; 
width:100%; 
top:0; 
} 

Answer 1

請檢查此鏈接： Demo

JavaScript代碼

(function(win){ 
    var i = 0, path = new Array(); 
    path[0] = "https://www.google.co.in/images/srpr/logo11w.png"; 
    path[1] = "http://www.findthatlogo.com/wp-content/gallery/microsoft-logos/microsoft-logo-icon.png"; 
    path[2] = "http://allenmeyerdesign.com/wp-content/uploads/2013/09/new-yahoo-logo.jpg"; 
    path[3] = "http://images2.fanpop.com/images/photos/4200000/old-apple-logo-apple-4235002-294-394.jpg"; 

    win.swapImage = function() 
    { 
     document.getElementById('slide').src = path[i]; 
     if(i < path.length - 1) { 
      i++; 
     } 
     else { 
      i = 0; 
     } 
     setTimeout(function() { 
      win.swapImage(); 
     },2000); 
    } 
    win.swapImage(); 
})(window); 

HTML

<div id="header_container"></div> 
<div class="slide-div"> 
    <img id="slide"/> 
</div> 

CSS

#header_container { 
    background: #b8df50; 
    background: -moz-linear-gradient(top, #b8df50 0%, #93ad4c 100%); 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8df50), color-stop(100%,#93ad4c)); 
    background: -webkit-linear-gradient(top, #b8df50 0%,#93ad4c 100%); 
    background: -o-linear-gradient(top, #b8df50 0%,#93ad4c 100%); 
    background: -ms-linear-gradient(top, #b8df50 0%,#93ad4c 100%); 
    background: linear-gradient(to bottom, #b8df50 0%,#93ad4c 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b8df50', endColorstr='#93ad4c',GradientType=0); 
    border:1px solid #666; 
    height:120px; 
    left:0; 
    position:fixed; 
    width:100%; 
    top:0; 
} 
div.slide-div { 
    margin: 150px auto 0; 
    height: 2000px; 
} 

謝謝！