化妝格出現在另一格上滾動

-3

首先對不起，有可能是一個非常簡單的方法來做到這一點，但我是JavaScript的業餘等，這些我想你需要的。這是我想要做的：化妝格出現在另一格上滾動

我有一個基本的'視差'網站（東西沿線this），但我想添加一個頁腳，其中包括一半的底部幻燈片，當你向下滾動，底部幻燈片中的內容保持不變。

正如此刻，在當你向下滾動到頁尾，但我希望它停止在第五滑動各五次進行滑動移動的內容，與頁腳滑動在上面。

任何幫助將不勝感激！

對不起：這裏的的Lorem ipsumed代碼：

//I have no idea what javascript i should be using.

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    min-height: 15px; 
 
} 
 
.page { 
 
    height: 100vh; 
 
    position: relative; 
 
} 
 
.page-title { 
 
    font-family: 'Quattrocento Sans'; 
 
    font-size: 2.5em; 
 
    transform: translateY(100%); 
 
    margin-left: 50px; 
 
    margin-right: 50px; 
 
} 
 
.page-sub { 
 
    font-family: 'Coming Soon'; 
 
    font-size: 1.5em; 
 
    text-align: center; 
 
    margin: 50px; 
 
} 
 
.page-para { 
 
    font-family: 'Quattrocento Sans'; 
 
    font-size: 1.2em; 
 
    line-height: 1.5; 
 
    margin-top: 50px; 
 
    margin-bottom: 50px; 
 
    margin-right: 50px; 
 
    margin-left: 50%; 
 
    position: relative; 
 
} 
 
.page-link { 
 
    text-decoration: none; 
 
    color: #F0C808; 
 
} 
 
.page-link:hover { 
 
    color: #F0C808; 
 
    font-weight: bold; 
 
} 
 
.link-box { 
 
    color: #F0C808; 
 
    background-color: #07A0C3; 
 
    border: 1px solid #07A0C3; 
 
    font-family: 'Coming Soon'; 
 
    font-size: 1.5em; 
 
    text-align: center; 
 
    height: 3em; 
 
    width: 8em; 
 
    line-height: 3em; 
 
    bottom: 100px; 
 
    right: 150px; 
 
    position: absolute; 
 
} 
 

 
#page-one { 
 
    background: url('img/page-one.jpg') no-repeat fixed; 
 
    background-size: 100%; 
 
} 
 
.main-title { 
 
    font-family: 'Quattrocento Sans'; 
 
    font-size: 3em; 
 
    text-align: center; 
 
    padding: auto; 
 
    align-items: center; 
 
    width: 35%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    position: relative; 
 
    top: 50%; 
 
    transform: translateY(-100%); 
 
} 
 
#page-two { 
 
    background: url(img/page-two.png) no-repeat; 
 
    background-size: 100%; 
 
    background-color: #E2E2E2; 
 
} 
 
#page-three { 
 
    background: url(img/page-three.jpg) no-repeat fixed; 
 
    background-size: 100%; 
 
} 
 
#page-four { 
 
    background: url(img/page-four.jpg) no-repeat; 
 
    background-size: 100%; 
 
    background-color: #E2E2E2; 
 
} 
 
#page-five { 
 
    background: url(img/page-five.jpg) no-repeat fixed; 
 
    background-size: 100%; 
 
} 
 
.page-five-para { 
 
    margin: 0; 
 
} 
 
.page-five-bold { 
 
    font-family: 'Coming Soon'; 
 
    font-size: 1.2em; 
 
    margin: 0; 
 
} 
 
#footer { 
 
    background-color: #E2E2E2; 
 
} 
 
.foot { 
 
    margin: 0; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 33%; 
 
    height: 50vh; 
 
} 
 
h5 { 
 
    font-family: 'Coming Soon'; 
 
    font-size: 1.5em; 
 
    margin: 15px; 
 
    padding-left: 15px; 
 
} 
 
.right-foot-spacer { 
 
    height: 2.41em; 
 
    margin: 15px; 
 
    padding-left: 15px; 
 
} 
 
.foot-content { 
 
    font-family: 'Quattrocento Sans'; 
 
    font-size: 1.2em; 
 
    margin: 20px; 
 
} 
 
.foot-list { 
 
    list-style: none; 
 
} 
 
.foot-link { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 
blockquote { 
 
    margin: 0px; 
 
    margin-bottom: 15px; 
 
} 
 
.right-footer p { 
 
    text-align: right; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans|Coming+Soon' rel='stylesheet' type='text/css'> 
 
</head> 
 

 
<body> 
 
    <div class="page" id="page-one"> 
 
    <h1 class="main-title">Title</h1> 
 
    </div> 
 

 
    <div class="page" id="page-two"> 
 
    <h2 class="page-title">Page two title</h2> 
 
    <h4 class="page-sub">subtitle</h4> 
 
    <p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis 
 
     metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p> 
 
    </div> 
 

 
    <div class="page" id="page-three"> 
 
    <h2 class="page-title">Page three title</h2> 
 
    <h4 class="page-sub">subtitle</h4> 
 
    <p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis 
 
     metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p> 
 
    <a href="http://www.google.com" class="page-link"> 
 
     <div class="link-box">Link</div> 
 
    </a> 
 
    </div> 
 

 
    <div class="page" id="page-four"> 
 
    <h2 class="page-title">Page title</h2> 
 
    <h4 class="page-sub">subtitle</h4> 
 
    <p class="page-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida. Phasellus bibendum leo ut tortor semper, vitae euismod arcu mattis. Proin sagittis risus sollicitudin eros finibus, et semper ex varius. In nec sagittis 
 
     metus. Aliquam in sem eu diam pretium vulputate. Sed pretium ante id sem posuere mollis. Suspendisse sed massa purus. Donec et nulla rhoncus, gravida lectus ac, pretium quam.</p> 
 
    <a href="http://www.bing.com" class="page-link"> 
 
     <div class="link-box">Link</div> 
 
    </a> 
 
    </div> 
 

 
    <div class="page page-five" id="page-five"> 
 
    <h2 class="page-title">Page title</h2> 
 
    <h4 class="page-sub">Lorem ipsum dolor</h4> 
 
    <div class="page-para"> 
 
     <p class="page-five-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor mi sit amet porta gravida.</p> 
 
     <h6 class="page-five-bold">Lorem ipsum dolor</h6> 
 
     <p class="page-five-para">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
 
    </div> 
 
    </div> 
 

 
    <div id="footer"> 
 
    <div class="foot left-footer"> 
 
     <h5>Lorem Ipsum</h5> 
 
     <p class="foot-content email">[email protected]</p> 
 
    </div> 
 

 
    <div class="foot center-footer"> 
 
     <h5>Footer</h5> 
 
     <ul class="foot-content"> 
 
     <li class="foot-list"><a href="http://www.google.com" class="foot-link">Google</a> 
 
     </li> 
 
     <li class="foot-list"><a href="http://www.bing.com" class="foot-link">Bing</a> 
 
     </li> 
 
     <li class="foot-list"><a href="http://www.yahoo.com" class="foot-link">Yahoo</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    <div class="foot right-footer"> 
 
     <div class="right-foot-spacer"></div> 
 
     <div class="foot-content quote"> 
 
     <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> 
 
     <p>-Lorem Ipsum</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-02-01 marcellothearcane

你嘗試過什麼？如果是這樣，你的代碼是什麼樣的？ –

嘗試更具體。這是非常普遍的問題。告訴我們你已經嘗試了什麼（例如代碼，代碼和代碼）。通用問題的問題是有很多方法可以解決同樣的問題，並且會有無用的討論。 – tanjir

如果我理解正確的問題，以達到你所尋找的效果的一種方法是通過監測getBoundingClientRect().top財產最後<div>和倒數第二<div>的getBoundingClientRect().bottom財產。

當最後<div>的getBoundingClientRect().top財產命中視口的頂部，您可以更改元素的樣式規則來解決它在那個位置;
當倒數第二個<div>的getBoundingClientRect().bottom屬性重新回到視口頂部的視圖中時，您可以取消修復最終的<div>，以便它再次以正常方式開始滾動。

例子：

function fixPage5() { 
 
\t var footer = document.getElementsByTagName('footer')[0]; 
 
    var pages = document.getElementsByClassName('page'); 
 

 
    if (pages[(pages.length - 1)].getBoundingClientRect().top < 1) { 
 
     pages[(pages.length - 1)].classList.add('fixed'); 
 
     footer.style.marginTop = '424px'; 
 
    } 
 

 
    if (pages[(pages.length - 2)].getBoundingClientRect().bottom > -1) { 
 
     footer.style.marginTop = '0'; 
 
     pages[(pages.length - 1)].classList.remove('fixed'); 
 
    } 
 
} 
 

 
window.addEventListener('scroll',fixPage5,false);

body { 
 
margin: 0; 
 
padding: 0; 
 
} 
 

 
.page { 
 
position: relative; 
 
width: 100%; 
 
height: 400px; 
 
padding: 12px; 
 
font-size: 72px; 
 
} 
 

 
footer { 
 
position: relative; 
 
width: 100%; 
 
z-index: 12; 
 
height: 400px; 
 
font-size: 72px; 
 
color: rgb(255,255,255); 
 
background-color: rgb(31,31,31); 
 
} 
 

 
.page:nth-of-type(odd) { 
 
color: rgb(255,255,255); 
 
background-color: rgb(127,127,127); 
 
} 
 

 
.fixed { 
 
position: fixed; 
 
top: 0; 
 
left: 0; 
 
z-index: -12; 
 
}

<div class="page">Page One</div> 
 
<div class="page">Page Two</div> 
 
<div class="page">Page Three</div> 
 
<div class="page">Page Four</div> 
 
<div class="page">Page Five</div> 
 
<footer>Footer</footer>

來源

2016-02-01 23:31:37 Rounin

謝謝你。不幸的是我的頁面五個背景圖片縮小。（可能是由於「固定」屬性），當我嘗試用'background-size：100％'糾正這個問題時，它下面有空白區域。有什麼辦法糾正這個問題嗎？ – marcellothearcane

是的，會有一種方法來糾正它。一旦元件是'位置是：固定;'是對文件流的外側，以便將需要明確的'height'，'margin'，'padding'等 – Rounin

是的。用'寬度做到了100％'的'＃頁面five' ID ..還有一個問題（挑剔還是什麼..：P） - 頁腳出現了這樣的四分之一。有什麼方法可以改變它嗎？ – marcellothearcane

化妝格出現在另一格上滾動

回答

相關問題