Question

我有一个＆＃34; Sticky＆＃34;标题和简单的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;
}

感谢!!!

JavaScript库移动带有粘性标题

1 个答案: