JavaScript库移动时带有粘性标题

JavaScript gallery moves with sticky header

本文关键字：有粘性 标题 移动 JavaScript      更新时间：2023-09-26

我有一个"Sticky"头和一个简单的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;
}

请检查此链接：演示

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;
}

谢谢！！！

相关文章：