圖像位置滾動

我想創造這樣的事情：Page 圖像位置滾動

我的意思是第一個圖像。如果我滾動img下的div來獲取圖片。我該如何創建？如果我給我的IMG的立場：固定的，一切都毀了^^ 而且位置absoulte也許是有用的，但div是旁邊的導航。這裏是我的嘗試：enter link description here

這裏是代碼：

*{ 
 
    font-family: "Open Sans"; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    font-size: 18px; 
 
} 
 
html { 
 
    height: 100%; 
 
} 
 
body{ 
 
    /*background: url("images/bg.png") repeat-x scroll left top #9EB5D6; 
 
    background: url("images/bg2.png"); */ 
 
    height: 100%; 
 
} 
 

 
nav{ 
 
    background: url("images/line-header.png") repeat-x scroll center bottom #4A525A; 
 
    padding: 15px; 
 
} 
 

 
nav > ul{ 
 
    margin: 0px; 
 
    padding: 0px; 
 
    text-align: center; 
 
} 
 

 
nav ul > li{ 
 
    margin-left: 25px; 
 
    display: inline-block; 
 
    list-style-type: none; 
 
} 
 

 
nav ul li > a{ 
 
    display: block; 
 
    text-decoration: none; 
 
    color: black; 
 
    color: #697683; 
 
    transition: color 0.5s; 
 
} 
 

 
nav ul li > a:hover{ 
 
    color: #FFF; 
 
} 
 

 
.pic1 { 
 
    background: url(images/banner.jpg); 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.text{ 
 
    height: 800px; 
 
    background-color: orange; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title></title> 
 
     <link rel="stylesheet" href="index.css" > 
 
     <!-- Open Sans --> 
 
     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
 
    </head> 
 
    <body> 
 

 
      <nav> 
 
       <ul> 
 
        <li><a href="#">Link 1</a></li> 
 
        <li><a href="#">Link 1</a></li> 
 
        <li><a href="#">Link 1</a></li> 
 
       </ul> 
 
      </nav> 
 

 
      <div class="pic1"> 
 
      </div> 
 
      <div class="text"> 
 
      </div> 
 

 
    </body> 
 
</html>

來源

2014-12-31 Skeptar

相信我，它是不是的'魔力位置：fixed'和'的z-index：999' –

這是關於選擇正確的方法。這種類型的滾動可以通過固定菜單（頂部有），下推div和背景圖像輕鬆完成。我添加了一個很好的可重複使用的貓圖像來顯示效果。

你幾乎到了那裏，只需要給導航定位。

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
body { 
 
    background: url(https://c1.staticflickr.com/9/8226/8557105873_a82c51f03f_z.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 
nav { 
 
    background-color: #555555; 
 
    text-align: center; 
 
    height: 20px; 
 
    position: fixed; 
 
    top: 0px; 
 
    width: 100%; 
 
} 
 
nav li { 
 
    display: inline; 
 
    list-style-type: none; 
 
    padding-right: 20px; 
 
} 
 
nav li a { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
.text { 
 
    background-color: orange; 
 
    margin-top: 500px; 
 
    min-height: 1000px; 
 
}

<html> 
 

 
<body> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#">Link 1</a> 
 
     </li> 
 
     <li><a href="#">Link 1</a> 
 
     </li> 
 
     <li><a href="#">Link 1</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 

 
    <div class="text"> 
 
    text 
 
    </div> 
 

 
</body> 
 

 
</html>

來源

2014-12-31 13:18:17

Thx的答案是完美的。我給你的綠鉤，因爲你更快:)謝謝！ – Skeptar

你要設置的CSS規則如下：

.pic1 { 
    background-attachment: fixed; 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: -1; 
} 

.text{ 
    margin-top: 792px; 
}

這將使div'.pic1'被固定，div'.text'能夠滾動div'.pic1'。這是解決方案。

額外的東西：

在這裏，我給 '的margin-top：792px' 到DIV '的.text'。但是，您可以使用jQuery來檢測視圖端口高度，並將該值指定爲div'.text'的'margin-top'，這將使其始終顯示在所有屏幕的摺疊下方。

這裏是如何通過jQuery做到這一點：

$(document).ready(function(){ 

var wH = $(window).height(); 
$('.text').css('margin-top',wH); 

})

在這種情況下，你必須刪除下面的CSS規則：

.text{ 
     margin-top: 792px; 
    }

請注意，您必須首先鏈接jQuery庫中你的網頁。這是整個jQuery代碼應該如下所示：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

<script> 
$(document).ready(function(){ 

    var wH = $(window).height(); 
    $('.text').css('margin-top',wH); 

    }) 

</script>

應該在關閉您的BODY標記之前添加標記。

來源

2014-12-31 13:14:27

THX它是完美的答案，並感謝多餘的！ :) – Skeptar

嗨Skeptar，謝謝你，很高興它適用於你:) –

圖像位置滾動

回答

相關問題