逐漸顯現,我努力讓自己在一個項目隱藏頁腳上滾動
http://www.cera-groupecera.com/en/
喜歡這個頁面頁腳是隱藏的這種效果,並顯示爲您滾動。 頁面被包裝在一個頁面內容元素中,頁腳被固定到底部z索引0 當你到達窗口的末尾頁面時,會發生什麼事情?當你滾動頁面時,內容頁邊距就會增加。 我真的無法找到一種方法來處理它與j查詢
逐漸顯現,我努力讓自己在一個項目隱藏頁腳上滾動
http://www.cera-groupecera.com/en/
喜歡這個頁面頁腳是隱藏的這種效果,並顯示爲您滾動。 頁面被包裝在一個頁面內容元素中,頁腳被固定到底部z索引0 當你到達窗口的末尾頁面時,會發生什麼事情?當你滾動頁面時,內容頁邊距就會增加。 我真的無法找到一種方法來處理它與j查詢
這裏是一個例子,你只是將其放置在頁面的底部或任何其他你希望它留下的地方,以隱藏它,你可以使用z-index = -1;
//<br><br><br><br><br><br><br><br><br>
<h2><code>fixed</code></h2>
<div class="fixed"><div class="expand"></div></div>
<br><br><br><br><br><br><br><br>
CSS
@import "compass/css3";
h2 {
text-align: center;
margin-top: 48px;
}
div {
height: 200px;
width: 50%;
max-width: 600px;
margin: 32px auto;
overflow-x: hidden;
// overflow-y: scroll;
}
.fixed {
background: url('http://lorempixel.com/600/200/animals');
background-attachment: fixed;
overflow: hidden;
}
.expand {
height: 400px;
width: 100%;
}
我做了一個例子給你。
$(function(){
calcFooter();
function calcFooter() {
var footer = $('.footer').height();
var mainContent = $('.main-content');
mainContent.css('margin-bottom', footer);
}
$(window).resize(calcFooter);
});
body {
margin: 0;
}
.main-content {
position: relative;
z-index: 100;
height: 100vh;
background-color: grey;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
z-index: 10;
height: 200px;
width: 100%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<div class="main-content" style="margin-bottom: 200px;">
<h1>This is main content.</h1>
<p>Scroll down to reveal footer!</p>
</div>
<div class="footer">
<p>This footer.</p>
</div>
</div>
比方說,它出現在底部這個元素是頁腳標籤。 在這種情況下,它會是這樣的: HTML:
<footer></footer>
在你的CSS
:
footer {
position: fixed;
bottom: 0;
display: none;
}
然後,你必須要加個班,這將使頁腳出現
.active {
display: block;
}
和你的jQuery會是這樣的:
$(window).on('scroll', function() {
if ($(this).scrollTop() > 50) {
if (!$(footer).hasClass('active')) {
$(footer).addClass('active');
}
} else {
if ($(footer).hasClass('active')) {
$(footer).removeClass('active');
}
}
});