Related
My aim is to have the images appear and slide horizontally in to place as I scroll down.
I have 4 floated images translated off the document and with opacity:0. I have tried to apply an intersersectionObserver to each of the images, but when I log the intersection ratio, it is under 0.1 for most of the images, even when they are fully within the viewport (I didn't set a root).
I tried to deal with this by tweaking the root margin, but that seemed to make no difference. My .active CSS class does get triggered for all of the images when I scroll down, but I don't know why. Also, the transition I set to my CSS classes seems not to be working.
I suspect I made a mistake in my use of intersectionObserver, but after reading the documentation, I cannot see where I have gone wrong.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="site-wrap">
<h1>Slide in on Scroll</h1>
<p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos.</p>
<p>Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
<p>Adipisicing elit. Tempore tempora rerum..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
<img src="http://unsplash.it/400/400" class= "slide-in">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt</p>
<img src="http://unsplash.it/400/401" class="slide-in">
<p> at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.</p>
<img src="http://unsplash.it/200/500" class="slide-in">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet <img src="http://unsplash.it/200/200" class="align-right slide-in"> temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis</p>
<p>laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
<img src="http://unsplash.it/400/400" class="slide-in">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
</div>
<script>
const myImages = document.querySelectorAll('img');
const myObserver = new IntersectionObserver(function(entries) {
if (myImages[0].isIntersecting) {
myImages[0].classList.add('align-left');
}
if (myImages[1].isIntersecting) {
myImages[1].classList.add('align-right')
// repeat the above for myImages[2] and myImages[3]
}
entries.forEach(e => {
console.log(e.intersectionRatio)
if (e.isIntersecting) {
console.log(e.target)
e.target.classList.remove('slide-in')
e.target.classList.add('active')
}
}),
{ threshold: 0.7,
rootMargin: "0px 200px 0px -200px"}
});
for (var e of myImages) {
myObserver.observe(e);
}
</script>
<style>
html {
box-sizing: border-box;
background: #ffc600;
font-family: 'helvetica neue';
font-size: 20px;
font-weight: 200;
}
body {
margin: 0;
}
*, *:before, *:after {
box-sizing: inherit;
}
h1 {
margin-top: 0;
}
.site-wrap {
max-width: 700px;
margin: 100px auto;
background: white;
padding: 40px;
text-align: justify;
}
.align-left {
float: left;
margin-right: 20px;
transition: all 0.5s;
}
.align-right {
float: right;
margin-left: 20px;
transition: all 0.5s;
}
.slide-in {
opacity: 0;
transition: all 0.5s;
}
.align-left.slide-in {
transform: translateX(-30%) scale(0.95);
transition: all 0.5s;
}
.align-right.slide-in {
transform: translateX(30%) scale(0.95);
transition: all 0.5s;
}
.slide-in.active {
opacity: 1;
transform: translateX(0%) scale(1);
transition: all 0.5s;
}
</style>
</body>
</html>
$(function(){
$(window).scroll(function () {
var scrollVal = $(this).scrollTop();
var adscrtop =$(".header").offset().top
// 在 RWD 767以下不作動
if(window.screen.width>767){
if(scrollVal> adscrtop){
$(".banner").css({"position":"fixed","top":"60px"});
}else{
$(".banner").css({"position": "static"});
}
}
});
});
.header{
max-width:768px;
margin: 0 auto;
}
.nav{
position: sticky;
top:0px;
width: 100%;
height: 60px;
background-color: #f55c47;
z-index:99;
}
.container{
display: flex;
justify-content:space-between;
}
.main{
position: sticky;
top:60px;
flex:2;
background-color: #9fe6a0;
padding:10px;
}
.banner{
flex:1;
width: 200px;
height: 100px;
background-color: #564a4a;
}
.img{
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="nav"></div>
<div class="container">
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem quae maiores, quibusdam doloribus eum excepturi ab fugit dolor vel, est molestiae magni tenetur nihil, non architecto aperiam. Consectetur tempore atque doloribus exercitationem veniam. Quibusdam, odio nisi at similique magnam nobis, voluptates non iste laudantium in quo harum soluta voluptatibus vitae labore modi ullam minima enim placeat nesciunt assumenda perspiciatis cumque! A modi delectus assumenda totam, pariatur harum! Odio adipisci maxime expedita beatae hic vero natus necessitatibus! Error earum at natus nemo! Quae aliquid minima quasi exercitationem eum, iure rerum consequatur ipsa. Optio repellendus quibusdam quia incidunt accusamus beatae ex? Accusantium nam, enim esse fugit repellendus dignissimos amet reiciendis nulla porro quo quis facere unde nesciunt culpa molestias sunt a beatae non ad. Voluptatibus, velit numquam. Adipisci molestiae in commodi non officiis facilis repellendus, doloremque cupiditate dolorum nostrum neque magnam aut asperiores quo nam id optio facere nesciunt praesentium. Repellat provident vero rem, tempore ad possimus accusantium perferendis! Architecto repellendus, error numquam necessitatibus voluptatibus asperiores dolorem eius quos beatae a doloremque velit suscipit perspiciatis nisi in tempora illum quidem? In totam fugit mollitia libero sequi voluptates soluta praesentium dolor nihil! Magnam sunt animi omnis in repudiandae cum laudantium nemo unde nulla necessitatibus mollitia nihil accusantium hic voluptas ab facilis aperiam ipsum, natus suscipit corporis. Alias quidem beatae, dolore et recusandae nisi optio error laboriosam temporibus minima voluptatibus reiciendis ipsam officia expedita totam asperiores at provident? Rerum illo provident vitae asperiores optio. Quas est obcaecati consequuntur accusantium quasi possimus soluta architecto adipisci quisquam. Magni, suscipit, quisquam quasi iure architecto expedita reiciendis vitae nulla consequuntur ex illo. Nobis accusantium et eveniet animi, quibusdam sunt beatae consequatur error, qui impedit rerum exercitationem, nulla cupiditate distinctio? Repudiandae fuga excepturi hic ex unde sequi labore, nulla sapiente, distinctio tempora et, dignissimos fugiat inventore a nemo rerum maiores nihil soluta laudantium eius ipsa accusantium explicabo similique! Atque, iusto ipsam! Sequi, nam, laborum velit repellat perferendis voluptatem reprehenderit, odio commodi blanditiis doloremque corrupti quam in nesciunt! Culpa quam iure vero. Labore error, iure assumenda aliquam ea possimus! Amet aliquam eos maxime? Quos numquam quas similique ex eos tempora magni repellendus praesentium? Ad quae vel labore quisquam quidem aliquam, molestias dolorum pariatur minus cupiditate odio, velit mollitia, deleniti corrupti eius nam, optio ullam impedit amet ducimus dolores architecto, id, quaerat ratione sed quas. Qui eius labore quia maiores adipisci, quos quod omnis veritatis modi fugiat. Et, cupiditate, cumque laudantium rem praesentium error odio veniam, repellat
</div>
<div class="banner">
<img class"photo"src="https://images.unsplash.com/photo-1620706857370-e1b9770e8bb1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="">
</div>
</div>
</div>
Tonight try using jQuery to fix the brown block under the red block. When scrolling up, only the green block will go up!
The brown area is fixed below the red area, but there are some problems As I scroll up, the brown block goes to the left and goes behind the red block Would you like to help me see which side of my code I have written wrong? Which side did I get wrong? Thank you for watching my question.
PS. My English is not very good, please let me know if there is something wrong with my expression. Thank you. Below is my code`
There is a small mistake here.
Inside your scroll listener, you have written "position": "fixed".
Whereas it should've been "position": "sticky".
$(".banner").css({
"position": "sticky",
"top": "60px"
});
"position": "sticky" automatically makes the element stick at the given position while scrolling.
For more info on CSS Positioning, check this out.
Check the updated snippet
$(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
var adscrtop = $(".header").offset().top
// 在 RWD 767以下不作動
if (window.screen.width > 767) {
if (scrollVal > adscrtop) {
$(".banner").css({
"position": "sticky",
"top": "60px"
});
} else {
$(".banner").css({
"position": "static"
});
}
}
});
});
.header {
max-width: 768px;
margin: 0 auto;
}
.nav {
position: sticky;
top: 0px;
width: 100%;
height: 60px;
background-color: #f55c47;
z-index: 99;
}
.container {
display: flex;
justify-content: space-between;
}
.main {
position: sticky;
top: 60px;
flex: 2;
background-color: #9fe6a0;
padding: 10px;
}
.banner {
flex: 1;
width: 200px;
height: 100px;
background-color: #564a4a;
}
.img {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<div class="nav"></div>
<div class="container">
<div class="main">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem quae maiores, quibusdam doloribus eum excepturi ab fugit dolor vel, est molestiae magni tenetur nihil, non architecto aperiam. Consectetur tempore atque doloribus exercitationem veniam.
Quibusdam, odio nisi at similique magnam nobis, voluptates non iste laudantium in quo harum soluta voluptatibus vitae labore modi ullam minima enim placeat nesciunt assumenda perspiciatis cumque! A modi delectus assumenda totam, pariatur harum!
Odio adipisci maxime expedita beatae hic vero natus necessitatibus! Error earum at natus nemo! Quae aliquid minima quasi exercitationem eum, iure rerum consequatur ipsa. Optio repellendus quibusdam quia incidunt accusamus beatae ex? Accusantium
nam, enim esse fugit repellendus dignissimos amet reiciendis nulla porro quo quis facere unde nesciunt culpa molestias sunt a beatae non ad. Voluptatibus, velit numquam. Adipisci molestiae in commodi non officiis facilis repellendus, doloremque
cupiditate dolorum nostrum neque magnam aut asperiores quo nam id optio facere nesciunt praesentium. Repellat provident vero rem, tempore ad possimus accusantium perferendis! Architecto repellendus, error numquam necessitatibus voluptatibus asperiores
dolorem eius quos beatae a doloremque velit suscipit perspiciatis nisi in tempora illum quidem? In totam fugit mollitia libero sequi voluptates soluta praesentium dolor nihil! Magnam sunt animi omnis in repudiandae cum laudantium nemo unde nulla
necessitatibus mollitia nihil accusantium hic voluptas ab facilis aperiam ipsum, natus suscipit corporis. Alias quidem beatae, dolore et recusandae nisi optio error laboriosam temporibus minima voluptatibus reiciendis ipsam officia expedita totam
asperiores at provident? Rerum illo provident vitae asperiores optio. Quas est obcaecati consequuntur accusantium quasi possimus soluta architecto adipisci quisquam. Magni, suscipit, quisquam quasi iure architecto expedita reiciendis vitae nulla
consequuntur ex illo. Nobis accusantium et eveniet animi, quibusdam sunt beatae consequatur error, qui impedit rerum exercitationem, nulla cupiditate distinctio? Repudiandae fuga excepturi hic ex unde sequi labore, nulla sapiente, distinctio tempora
et, dignissimos fugiat inventore a nemo rerum maiores nihil soluta laudantium eius ipsa accusantium explicabo similique! Atque, iusto ipsam! Sequi, nam, laborum velit repellat perferendis voluptatem reprehenderit, odio commodi blanditiis doloremque
corrupti quam in nesciunt! Culpa quam iure vero. Labore error, iure assumenda aliquam ea possimus! Amet aliquam eos maxime? Quos numquam quas similique ex eos tempora magni repellendus praesentium? Ad quae vel labore quisquam quidem aliquam, molestias
dolorum pariatur minus cupiditate odio, velit mollitia, deleniti corrupti eius nam, optio ullam impedit amet ducimus dolores architecto, id, quaerat ratione sed quas. Qui eius labore quia maiores adipisci, quos quod omnis veritatis modi fugiat.
Et, cupiditate, cumque laudantium rem praesentium error odio veniam, repellat
</div>
<div class="banner">
<img class "photo"src="https://images.unsplash.com/photo-1620706857370-e1b9770e8bb1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="">
</div>
</div>
</div>
Taking an intro web design class so my knowledge is very limited. I'm working on a page that is supposed to display modals after clicking on an image. It seems to be working fine except for when they scroll down first then click the modal. When that happens the modal is cut off and doesn't display in the whole page. After some searching, I know Height 100% doesn't work if the user scrolls so is there any way to solve that? Here is my code, apologies if it's not written well, modals haven't been taught in class yet so I had watch some videos on youtube to make this.
Use the main model wrapper position: fixed; height: 100%; width: 100%; and for stopping the scrolling makes body overflow: hidden; as you already did. After close the modal make the body overflow: auto/scroll.
For better understanding use this guideline [ similar to bootstrap 4 ]
document.getElementById('modal-btn').addEventListener('click', function(){
document.querySelector('.modal').classList.add('active');
document.body.classList.add('modal-has-opened');
});
document.getElementById('modal-hide').addEventListener('click', function(){
document.querySelector('.modal').classList.remove('active');
document.body.classList.remove('modal-has-opened');
})
.modal{
position: fixed;
top: 0;
left: 0;
z-index: 9999999999;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
overflow-y: auto;
display: none;
}
.modal.active{
display: block;
}
.modal-content{
width: 80%;
background-color: #fff;
padding: 50px;
border: 1px solid #000;
margin: 1rem auto;
box-sizing: border-box;
}
body{
background-color: #f4f8ff;
font-family: segoe ui;
font-size: 1rem;
line-height: 1.5;
}
.wp{
width: 90%;
margin: 1rem auto;
background-color: #fff;
border: 1px solid #000;
padding: 20px;
box-sizing: border-box;
}
#modal-btn{
padding: .25rem 1.25rem;
font-family: segoe ui;
font-size: 1rem;
line-height: 1.5;
cursor: pointer;
}
#media(max-width: 442px){
.modal-content{
width: 98%;
}
}
.modal-has-opened{
overflow: hidden;
padding-right: 17px !important;
}
<div class="wp">
<div class="title">
I am fine
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa hic recusandae dolor. Cumque, ea. Fugiat ratione laudantium blanditiis dolore expedita? Adipisci inventore saepe minus quisquam natus officiis enim! Quia in explicabo aliquid illo voluptate nam laboriosam ad minus voluptas, repellendus provident. Temporibus voluptatum ut quia cum possimus inventore ratione?</p>
<button id="modal-btn">
Open Modal
</button>
</div>
<div class="wp">
<div class="title">
I am fine
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel ipsa hic recusandae dolor. Cumque, ea. Fugiat ratione laudantium blanditiis dolore expedita? Adipisci inventore saepe minus quisquam natus officiis enim! Quia in explicabo aliquid illo voluptate nam laboriosam ad minus voluptas, repellendus provident. Temporibus voluptatum ut quia cum possimus inventore ratione?</p>
</div>
<!-- Main Modal -->
<div class="modal">
<div class="modal-content">
I am the content
<button id="modal-hide">
Close Modal
</button>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus, fugit quo? Illo saepe magni molestias, accusantium molestiae, similique quibusdam officia fuga id adipisci suscipit architecto, omnis quo cum labore fugiat. Facere vel nulla blanditiis, voluptatem animi debitis, asperiores alias error sed tempora cum, architecto quia cumque distinctio sit ab nemo minima eveniet esse possimus deleniti omnis? Modi unde repellat quasi reiciendis suscipit corporis explicabo! Quaerat eveniet, ad iusto commodi officia ea quae dolor, quia architecto quibusdam voluptate autem vero. Eaque quasi temporibus recusandae. Quasi assumenda vero in odio sit neque modi deleniti quaerat laborum. Reiciendis dicta sunt laborum assumenda aliquid cumque sint recusandae temporibus itaque nisi, velit magnam officia inventore, id laboriosam! Aliquam expedita voluptate vel neque aspernatur obcaecati minus, tempora laudantium illum, eveniet totam eum incidunt. Quo consectetur dolorum, aliquid quas dicta quasi nisi soluta eaque earum nostrum exercitationem possimus tempore quisquam distinctio ducimus deleniti modi consequatur quod obcaecati maxime rem. Totam quos nisi natus laudantium nobis culpa fugit aspernatur quis voluptatum consequuntur perferendis incidunt fugiat alias quaerat architecto deserunt at, consequatur dolorum sequi sed, fuga quia! Officia dignissimos non id quam quibusdam ipsam cupiditate laborum blanditiis placeat minus cumque, harum expedita accusantium eligendi quo similique debitis fugiat eius natus? Placeat quis consectetur hic natus quam veritatis earum ipsam minima dolorem molestiae nemo fuga exercitationem vero repudiandae facere delectus autem iste at saepe sapiente, veniam doloremque! Error dolor dolorem cupiditate ab qui doloribus sapiente, cum eaque consectetur debitis aliquid maiores perspiciatis dignissimos officia ea possimus molestias? Earum rerum reiciendis possimus amet, voluptas qui minima velit veniam at consequuntur optio iusto repellat eveniet placeat autem ea, ipsam sunt ab commodi quos maiores. Ad a voluptatem quasi in molestiae expedita dolorem rerum eius id dignissimos neque sunt officia magnam et repellat suscipit, soluta fuga temporibus porro ab omnis nesciunt! Deleniti itaque quae, accusamus reprehenderit minus repellendus cupiditate nihil earum in, dolorem illum nobis excepturi velit ipsam modi dolores praesentium? Necessitatibus doloribus animi aut quos provident iusto reiciendis, asperiores corrupti voluptatem ipsa veniam libero ullam illo iure rem harum laborum porro at, neque, cum maxime tempora? Deleniti cupiditate omnis nesciunt error asperiores delectus quo architecto dolorem ut nostrum. Dolorem blanditiis quos est delectus quo soluta illo officiis, eum rem ad minus corporis optio minima cumque voluptates maiores ipsa quas! At numquam tempora explicabo soluta. Natus perferendis cumque fuga iusto nostrum porro nihil exercitationem incidunt suscipit voluptatum vero, rem molestias, commodi sit, corporis animi aliquid aperiam quam. Blanditiis, minima necessitatibus. Maxime, optio officiis quia commodi consectetur dignissimos omnis accusantium, nesciunt reiciendis illum voluptates id aspernatur officia suscipit, numquam earum recusandae voluptas voluptate eum illo nemo. Ea ipsam laboriosam similique veniam nesciunt labore esse laborum nulla. Laboriosam pariatur ex ipsa assumenda ad soluta alias, explicabo id accusamus nulla non reprehenderit perspiciatis quas nisi. Unde ad voluptatem quis, quo repellendus odit sint tempore non ex, similique architecto dolor. Eius quaerat enim accusamus nobis animi dignissimos earum eaque atque culpa optio esse iusto iure adipisci, deleniti qui voluptate. Dolor velit possimus placeat a quidem commodi quod?
</p>
</div>
</div>
I'm struggling to create a page layout that has: a header which will expand to match its content, a footer that has a fixed height (which will never change) and a content section that fills the distance between the two that will scroll when necessary.
The difference between this and many other 3 row questions asked on SO is that I need the header to be fluid not fixed.
Here's an example of what I am after. It works perfectly in Chrome, however 40% of the target demographic use IE7 and this doesn't work in any version of IE.
It's worth viewing it as a full page.
html,
body,
form {
height: 100%;
margin: 0;
overflow: hidden;
}
.table {
display: table;
width: 100%;
height: 100%;
}
.table .tr {
display: table-row;
}
.table .tr.header {
background: #ccc;
}
.table .tr.content {
height: 90%;
}
.table .tr.footer {
height: 50px;
background: #ccc;
}
.table .td {
display: table-cell;
}
.innerContent {
height: 100%;
background: #f0f0f0;
overflow: auto;
}
<div class="table">
<div class="tr header">
<div class="td">
<b>Header</b>
<br />expands to show all available content
<br />Other content
<br />Some more content
<br />Even more content
<br />Additional content
<br />Extended content
<br />Enhanced content
<br />Ya ya ya
</div>
</div>
<div class="tr content">
<div class="td">
<div class="innerContent">
<b>Content</b>
<br /> Will fill the remaining space and will scroll if necessary
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</div>
<div class="tr footer">
<div class="td">
<b>Footer</b>
<br/> Has fixed height and will never change.
</div>
</div>
</div>
Quirks
I can't use FlexBox because of IE7 although I would if there was a Polyfill available (I can't find one that supports IE7)
I can use HTML Tables (but would prefer not to).
I'm happy to use a JavaScript solution as long as its airtight, meaning if the content in the header changes the height, the content height needs to update as well; in fact, the version I am working with at the moment uses the following JavaScript to set the height of the content area:
function _makeContentScrollable() {
var $template = $(".table"),
$content = $template.children(".content");
$content.height(($(window).height()) - ($content.offset().top + $footer.outerHeight(true, true)));
}
This is re-called onresize but I'm unsure of the best way of calling this when the header height changes an example would be from an expanding/collapsing element in the header, short of calling a callback function on every script that might affect the height of the header which seems like a maintenance nightmare.
You don't need anything other than positioning. Check this out, which uses:
position: fixed
padding
This would give you a layout with fixed, scrolling (auto), fixed layout.
* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}
body {padding: 70px 0 50px;}
p {margin: 10px 0 0;}
p:first-child {margin: 0;}
.header, .footer {
position: fixed;
left: 0; right: 0;
top: 0;
background-color: #ccc;
padding: 5px;
max-height: 70px;
overflow: hidden;
}
.footer {
top: auto;
bottom: 0;
text-align: center;
}
.content {
position: fixed;
top: 75px; bottom: 35px;
left: 0; right: 0;
overflow: auto;
}
<div class="header">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus consequuntur tenetur amet quisquam, fuga nobis eligendi perspiciatis saepe inventore nam nihil, ducimus id soluta accusantium iusto! Modi itaque vel laudantium.</div>
<div class="content">
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iure id culpa provident autem dolor, ea sit excepturi accusamus deleniti maxime repudiandae minima expedita eligendi, quam iste ullam cumque. Nesciunt!</span>
<span>Itaque dolorem repudiandae qui repellendus error non inventore possimus cum! Praesentium nobis laboriosam illum voluptas quidem reiciendis incidunt, rem? Sapiente nemo, quam officia eveniet maiores sint. Culpa, modi eveniet vel.</span>
<span>Asperiores non, facilis ratione placeat culpa, saepe dicta obcaecati, nesciunt blanditiis iste nostrum! Rem, suscipit. Nesciunt voluptas aliquam deleniti autem vitae repudiandae, hic, similique vel. Eius omnis ex voluptatum at?</span>
<span>Enim facilis rem dolore tempore numquam iste sapiente id molestias cupiditate accusamus laborum eius consequatur magnam sequi iusto obcaecati officiis, nostrum? A eum error praesentium, in eos aperiam voluptatibus pariatur?</span>
<span>Ipsam cumque, ab sunt explicabo dolores voluptates repellat aspernatur, molestiae, corporis, impedit blanditiis minus praesentium facilis deserunt alias sequi adipisci a. Numquam explicabo, odit fugiat reprehenderit fugit dolor aliquam nulla.</span>
<span>Qui libero accusamus, eveniet quo ducimus temporibus quia consectetur nulla, dolores obcaecati fuga officiis excepturi sed error esse architecto necessitatibus assumenda aliquam at quidem quae illo! Blanditiis doloribus voluptatum, facilis.</span>
<span>Ipsa inventore beatae quibusdam praesentium sunt omnis nesciunt eos incidunt accusantium adipisci, vitae dicta, perspiciatis repellendus, laudantium quam eius consequatur minus, illum reprehenderit. Tempora culpa officiis itaque veritatis vitae rem.</span>
<span>Temporibus debitis repudiandae molestias praesentium expedita a aperiam quia veniam sequi delectus, harum atque incidunt consequatur tenetur exercitationem dolor at mollitia ea ad! Laborum, provident. Illum iste nam cumque dicta!</span>
<span>Est commodi tempore quos nisi voluptatem aperiam totam laudantium vero autem quisquam explicabo labore sapiente, ea quas tenetur doloremque pariatur iure excepturi repellendus quia harum sint, perspiciatis! Saepe asperiores, labore.</span>
<span>At quidem cum iusto pariatur dolor dolorem autem, corporis ipsum libero ipsa possimus fugiat aperiam dicta labore beatae ducimus veniam, molestiae nemo, cumque. Veniam mollitia itaque, aliquam porro hic enim!</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere perspiciatis magni iusto porro, nam quis, vel architecto rerum provident adipisci eveniet delectus deserunt, beatae dolore! Maxime quibusdam non, suscipit perspiciatis.</span>
<span>Id dolorem assumenda, minus repudiandae velit facere atque quam sunt sapiente cum? Explicabo necessitatibus ipsam pariatur? Consequuntur exercitationem, sequi porro temporibus architecto a est, similique distinctio harum dicta libero accusantium.</span>
<span>Ipsa corrupti repellat quaerat ratione sapiente unde dolor mollitia possimus at, voluptates architecto aliquid suscipit, natus porro, iusto perferendis. Optio error, aspernatur. Quaerat hic nobis soluta suscipit eveniet dignissimos, pariatur.</span>
<span>Nemo aspernatur vitae non assumenda, similique sapiente totam porro laborum iste saepe facilis, reiciendis placeat impedit natus, itaque ipsam voluptatibus fugit ratione optio, sit iusto. Delectus ipsa officia voluptatem minima.</span>
<span>Sequi vero vel cupiditate porro ipsam, voluptates ad deleniti sunt magni ex adipisci dicta error amet eveniet cum facilis perferendis nemo cumque. Eveniet similique quaerat voluptas ex velit, labore molestiae.</span>
<span>Quibusdam iusto provident, neque amet, explicabo corrupti quia tempore voluptatibus dolorem dolorum sequi ex quidem tempora reprehenderit praesentium quod dignissimos. Laudantium, praesentium consequuntur. Dolore sequi, quos. Nobis blanditiis, porro aperiam?</span>
<span>Natus eius ex ullam nam magnam, facere cupiditate facilis animi soluta maiores reprehenderit illum rem quae, sit velit mollitia excepturi at dolorum explicabo. Ducimus animi, aliquid voluptas cupiditate quos odio!</span>
<span>Quo magni nostrum, asperiores delectus numquam qui cum impedit minus laborum explicabo, ab repellat aliquid nihil rem sunt praesentium, quaerat dolore quibusdam aut? Temporibus itaque perferendis cumque reprehenderit, quis recusandae?</span>
<span>Aspernatur quod at neque quaerat quidem architecto earum facere nisi, fuga vero deserunt eaque necessitatibus officiis, tenetur iste? Expedita maxime dolorem blanditiis sed exercitationem praesentium facere, commodi amet quis nemo.</span>
<span>Dolor atque laboriosam, provident tempora. Fugit delectus quidem modi cum voluptates, vel obcaecati iure reiciendis. Sit ad, sed tempora nobis atque consequuntur dolore ducimus voluptas. Sint animi mollitia cumque id.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum dolorem libero blanditiis nobis consequuntur corporis excepturi laudantium ea explicabo facilis dolores fugit, est, voluptatum adipisci incidunt magni! Iure obcaecati, facere.</span>
<span>Ducimus quidem voluptate voluptas est fuga consequatur pariatur, accusamus, deserunt quisquam excepturi. Culpa autem quia veritatis cupiditate soluta, quisquam, corporis assumenda, minus esse odit expedita consequatur aut laboriosam incidunt dolorem.</span>
<span>Ipsa aliquam eos velit repudiandae, porro ipsum aliquid et tenetur autem minus quisquam officia deleniti ut reprehenderit commodi natus quis, ab dolor repellat nostrum nobis eaque quo. Nulla, veritatis aspernatur.</span>
<span>Odit quisquam nam, facere obcaecati neque, eligendi dicta quos esse veniam quasi dolore vitae voluptatum autem corrupti iure vero ipsum unde, iusto ipsam at optio doloremque. Cumque necessitatibus, quisquam mollitia.</span>
<span>Provident culpa inventore rerum nemo itaque reiciendis, architecto adipisci laudantium, error, quidem labore omnis cupiditate aspernatur blanditiis magnam doloribus eveniet quasi. Similique incidunt eius, placeat laudantium ipsa blanditiis error libero.</span>
<span>Illum reiciendis exercitationem, cumque corrupti quibusdam fugit sit perferendis adipisci sunt eos ut placeat sequi excepturi esse porro veritatis recusandae non iste magnam unde ea ab aliquam natus, explicabo. Sapiente.</span>
<span>Fuga velit autem, nemo facilis enim earum nam voluptas omnis adipisci laudantium dignissimos, sint ad quibusdam minima ipsa quaerat consequatur officiis repellat ut ab, eius, voluptate quos assumenda! Maiores, necessitatibus!</span>
<span>Voluptatum amet deserunt saepe est maiores laborum, in quas deleniti hic iure animi debitis cum earum, qui possimus quisquam porro doloremque, sed eaque nemo aliquam labore dicta voluptatibus? Quibusdam, animi.</span>
<span>Nam dolorem non illo alias minus quis ratione eveniet nesciunt, tempora aperiam placeat fuga iure quidem quia sed iste voluptate consequatur, ducimus assumenda maiores impedit, saepe. Fuga perspiciatis unde eum?</span>
<span>Nesciunt sapiente, fugit deserunt, repellendus velit, possimus nobis doloremque rerum magni beatae dicta eos, quaerat nam labore. Cupiditate commodi necessitatibus ipsam laudantium dolores, nihil nam totam similique, neque provident accusantium.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt asperiores recusandae corrupti quod magnam ea ratione eveniet excepturi, temporibus dolorem labore, impedit illo, debitis. Assumenda harum, consequatur obcaecati reiciendis. Aspernatur!</span>
<span>Sequi inventore blanditiis, non exercitationem saepe explicabo sapiente mollitia nam tempore enim, optio! Aliquam quam, magnam voluptates et laborum excepturi autem nostrum explicabo dolores harum vero cum fuga nesciunt, cumque.</span>
<span>Fugit, eligendi optio veniam, quo enim ipsum minus neque natus, vero eaque, consequatur corporis nesciunt quis quod mollitia sapiente recusandae suscipit doloribus possimus. Alias reprehenderit quod perferendis architecto ipsa, consequatur.</span>
<span>Nihil architecto minima, inventore, officiis itaque alias odio quibusdam amet? Minus quae aliquam, maxime. Nam pariatur aut quis, distinctio est, itaque. Blanditiis laboriosam molestiae deleniti commodi vel praesentium aperiam consequatur?</span>
<span>Qui a dolorum dicta, nihil perspiciatis reprehenderit rem esse voluptas porro, quod beatae error excepturi quam tempora, illo. Similique minus, unde fuga! Earum nesciunt maiores cumque quisquam quam iste numquam!</span>
<span>Nisi accusamus, nesciunt vel explicabo veniam laudantium sit delectus debitis id numquam mollitia accusantium itaque sed. Voluptatum, nostrum laborum illo labore veritatis, minima nesciunt repellat, a neque maiores est magnam!</span>
<span>Aspernatur ab reprehenderit doloribus ut hic deleniti eaque veritatis. Consequuntur non mollitia blanditiis vitae illo in cum rem minus a dicta optio dolorum facilis vero, at vel beatae earum. Corporis?</span>
<span>Ad quos expedita officiis odio autem! Neque non doloremque voluptatum, laudantium cupiditate voluptas voluptate earum explicabo dolores, nam nobis distinctio ad, aliquid recusandae deleniti doloribus architecto illo molestiae laboriosam odio?</span>
<span>Soluta, minima expedita, dolorem explicabo enim alias amet nam, sunt neque dolor saepe rerum dignissimos hic itaque accusamus atque provident. Ut at eum deserunt aspernatur ullam expedita tempora, exercitationem nemo.</span>
<span>Voluptatem, quae, praesentium? Maxime veritatis earum, autem quia minus quae asperiores dolor quo veniam non tenetur vero officiis beatae magnam ipsum aliquam odit rerum illum architecto provident voluptate. Architecto, aperiam.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet molestiae quibusdam officiis, sapiente maiores id cupiditate libero autem saepe magnam, quo necessitatibus dolorum iure fugiat perspiciatis praesentium tempora dolore ad.</span>
<span>Omnis et perspiciatis blanditiis nulla, non ipsam impedit dolore molestias eos nesciunt nam pariatur delectus temporibus tenetur esse, corrupti voluptatum commodi debitis! Maxime, doloribus hic reprehenderit in iusto provident optio.</span>
<span>Cupiditate amet, consequuntur neque esse architecto dolorum distinctio. Tenetur sapiente tempore possimus libero nam suscipit in commodi vitae, id eligendi cupiditate expedita facilis accusamus praesentium, a vero ipsum repellat explicabo?</span>
<span>Vero fuga dignissimos officiis. Voluptatum error iste, nihil pariatur odio voluptatem molestiae, sit ipsum officiis ex, sed modi ut doloremque provident expedita accusantium earum quidem eveniet ratione ea aperiam. Molestias!</span>
<span>Sed earum consequuntur ut ea quod officiis animi, nemo expedita sint ullam magni impedit dicta minima debitis, quidem, repudiandae architecto dolorem delectus? Aspernatur porro tenetur, quae quasi iusto earum, id.</span>
<span>Voluptas dolore voluptates enim cum quasi dicta atque vitae aliquid omnis incidunt possimus quis molestiae, necessitatibus porro molestias, recusandae autem consectetur, officiis dignissimos in. Quas incidunt odio obcaecati quod aspernatur.</span>
<span>Dolorum, temporibus adipisci dignissimos quod, modi ipsam voluptates ipsa autem necessitatibus perferendis magni, veritatis repudiandae maxime veniam repellendus quo minima quibusdam porro illo neque delectus molestiae facere ab. Reiciendis, sapiente.</span>
<span>Facere quam qui expedita tenetur optio reprehenderit odit aliquid, officia corrupti vel commodi deserunt nesciunt recusandae beatae quas assumenda iusto ex, quibusdam. Doloremque similique, sit nulla nemo tempora voluptates eum?</span>
<span>Magnam voluptas eveniet qui voluptatum cupiditate, natus blanditiis ipsam consequuntur, ex quia, odit. Velit maxime sint repellat totam, sit, nobis in temporibus quia pariatur praesentium magni ipsa harum eveniet, laudantium.</span>
<span>Dolorum amet laudantium maiores, modi fugit, harum sint ratione ex ad nihil at velit quam numquam corrupti, esse dolor praesentium laboriosam explicabo. In, itaque, suscipit adipisci nihil ab facilis praesentium.</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, autem ea nemo et provident, architecto minus deleniti laborum expedita earum omnis, voluptas officiis deserunt. Laudantium nesciunt fugit quae nulla reiciendis.</span>
<span>Officiis, vero magni aspernatur earum soluta qui animi optio nihil pariatur ad, molestiae possimus a omnis cum impedit ab atque ducimus, quas? Iste est alias voluptatem amet itaque assumenda obcaecati?</span>
<span>Reiciendis veniam laboriosam neque, vero odio nisi placeat vitae provident quia debitis omnis praesentium numquam dolores adipisci explicabo nihil recusandae, repudiandae velit esse expedita blanditiis! Rerum mollitia cum suscipit veniam!</span>
<span>Quaerat voluptatibus laborum, laudantium nisi dolorum officia id soluta cumque. Ex, voluptate doloremque placeat quo harum dignissimos architecto ipsam adipisci cum nisi repellendus quisquam ipsa dolorem odio aspernatur. Cum, distinctio.</span>
<span>Voluptates ut, quam earum non repellat sit aperiam facere id iste totam sint quidem nemo odit delectus ab culpa, sed voluptate ipsam quos commodi magnam. Ipsum quos reiciendis molestiae nesciunt.</span>
<span>Dolorum quis rerum architecto consectetur! Magni suscipit adipisci voluptates reiciendis eos et minus, inventore quod quisquam aliquid, molestiae, fuga nostrum ipsa! Velit debitis distinctio consectetur sed esse iste aspernatur, sit.</span>
<span>Dignissimos at, doloremque enim vero voluptatem mollitia fugit soluta corporis veniam similique sed temporibus deserunt quisquam eligendi, ducimus ut molestias sunt quibusdam. Perferendis officia, vero facere iste, libero voluptate numquam!</span>
<span>Repellat laboriosam eum magnam, nam explicabo assumenda fugit fugiat, cumque, laudantium a itaque repudiandae. Omnis, laudantium, expedita? Nisi iusto at aut, recusandae, non veniam harum tempora voluptates laboriosam sint laudantium.</span>
<span>Quasi quae rerum labore accusamus, optio est pariatur excepturi. Voluptatem tenetur fugit doloribus molestiae officiis fuga commodi voluptate, distinctio magni accusamus, labore sequi eligendi reprehenderit, id dicta ullam magnam ipsum.</span>
<span>Quidem dolor in reprehenderit, consectetur. Tempore consectetur provident aperiam ab ducimus obcaecati maiores illum voluptas ipsam beatae. Beatae porro magni, sint assumenda fugiat illum, consequuntur atque unde eligendi, quod id!</span>
</p>
<p>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ipsum illo, facere soluta, enim placeat repudiandae exercitationem sed numquam ratione maxime eligendi dignissimos, ex voluptatum eaque aperiam! Veritatis, pariatur, deleniti.</span>
<span>Pariatur nulla ducimus, labore saepe temporibus, doloremque, minima totam odit harum corporis omnis impedit quod iusto mollitia culpa aliquid aut laborum earum et magnam fugit vitae deserunt vel. Atque, dignissimos.</span>
<span>Fugiat accusamus aspernatur corrupti, porro? Reiciendis placeat cupiditate ea dolorem magnam eligendi molestias distinctio numquam consequuntur fuga ad, atque quaerat saepe beatae delectus explicabo laudantium suscipit porro sed corrupti accusantium.</span>
<span>Omnis dolor pariatur iure nulla quasi exercitationem eum obcaecati perferendis laudantium, alias voluptatem sunt, sapiente ducimus similique totam, architecto minus, culpa. Impedit, veritatis, vero. Error nesciunt nemo laudantium doloremque harum.</span>
<span>Tempora ipsum obcaecati, nemo, a exercitationem, modi commodi explicabo voluptates possimus in, suscipit corporis beatae ad alias veniam culpa ipsa? Optio, quas, enim! Omnis, non, reprehenderit est illum numquam doloribus!</span>
<span>Impedit reiciendis quia perferendis, odit natus unde qui explicabo laudantium ipsam dolorem eligendi veritatis. Neque, sapiente mollitia consectetur tenetur delectus repellendus nihil quae magnam suscipit amet voluptatibus itaque, magni possimus!</span>
<span>Perferendis impedit voluptas aliquid reiciendis, ipsam rem consectetur suscipit corrupti tenetur. Ducimus saepe, quibusdam debitis hic veniam aliquid laborum cumque rerum minima magnam itaque, quod, excepturi blanditiis illo officia aliquam?</span>
<span>Cupiditate quasi aut adipisci at sed eaque quo, nulla aperiam labore rem ducimus illum ut quaerat nemo earum fugit accusantium, doloribus soluta molestiae sequi, odit quis quam sapiente voluptates nostrum!</span>
<span>Impedit pariatur ab quod hic rem illo voluptatibus, ipsum ipsam ut magnam quasi amet quae ipsa quo maiores est suscipit non sint delectus inventore. Autem, quibusdam, odit! Odio, dolorum, quo.</span>
<span>Qui ipsum ipsa sit laudantium commodi eligendi itaque, beatae tempora tempore. Porro expedita nisi minus eaque magni, culpa quibusdam. Doloremque dolorum cupiditate hic! Voluptatem esse hic error sit ab nihil.</span>
</p>
</div>
<div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit!</div>
Updated according to comments.
Update: For dynamic height, you could consider using this JavaScript (jQuery) code:
$(function () {
var resizeWin = function () {
$(".content").css("top", $(".header").outerHeight());
};
resizeWin();
$(window).resize(resizeWin);
});
JSBin: http://output.jsbin.com/wikeketequ
I have a fixed top navbar that should slide up when the user scrolls past a certain point and be replaced with a slimmer navbar. I'm using velocity.js to animate the switch with .velocity("slideUp") / ("slideDown"). However, the animation doesn't stop looping. The switch works fine with jQuery slideUp() and slideDown() though.
Here's the velocity version:
var offsetPos = $( "h1" ).offset().top;
var navFull = $( ".navbar-full" );
var navShrink = $( ".navbar-shrink" );
navShrink.hide();
function navChange() {
var scrollPos = $( this ).scrollTop();
if ( scrollPos > offsetPos ) {
navFull.velocity("slideUp");
navShrink.velocity("slideDown");
} else {
navFull.velocity("slideDown");
navShrink.velocity("slideUp");
}
}
$( window ).on( "scroll", navChange );
html, body {
position: relative;
margin: 0;
}
.content {
width: 600px;
margin: 0 auto;
position: relative;
}
nav {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav p {
text-align: center;
}
.content h1 {
margin-top: 150px;
}
.navbar-full {
height: 100px;
background: blue;
}
.navbar-shrink {
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>
<nav class="navbar-full">
<p>Why doesn't this stop!</p>
</nav>
<nav class="navbar-shrink">
<p>Why doesn't this stop!</p>
</nav>
<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ducimus quia sed, iusto alias temporibus perspiciatis placeat omnis cupiditate laborum ex neque excepturi, ipsum. Quibusdam deleniti porro, assumenda possimus deserunt maiores ipsam non fuga est, voluptatem. Placeat beatae voluptatibus dolores id quis, sit ipsum vitae ducimus ab ipsam eos qui tempo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolorum maxime hic eaque mollitia autem laboriosam eveniet dolores voluptates, nisi quos minus voluptate est placeat maiores earum assumenda ducimus laudantium. Labore obcaecati ipsum, molestiae harum, ex tenetur enim, aut asperiot consequuntur magnam magni. Eaque quidem explicabo tempora, cum numquam sint totam corporis sunt, deleniti illum perspiciatis molestiasam numquam deserunt optio molestiae deleniti maiores molestias! Beatae et non fuga consequatur ea quisquam, iusto minima cum eligendi. Molestiae possimus ipsa pariatur facilis at. Repudiandae inventore quod quis neque cumque, tenetur, cum. Numquam quas illum nihils veniam rem fuga, fugit nesciunt asperiores at facilis ut amet, quo! Laudantium consequatur quis, incidunt accusantium assumenda harum velit, saepe molestias omnis eveniet iste vel ea, eaque. Magnam porro eligendi quasi aspernatur. Numquam quis, eius?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis voluptas, labore odio. Laboriosam fugit voluptate velit. Cupiditate fugit optio illum porro deserunt qui, eius corrupti, quod quia rerum, molestiae nostrum asperiores voluptates fuga animi perferendis. Perspiciatis nulla exercitationem quis aliquam fugit minus unde architecto vero nostrum quos, repellendus delectus aperiam porro, voluptatum accusamus eius. Facilis dolores culpa aliquid temporibus, inventore ad quisquam numquam, eum voluptas, harum consequuntur est deleniti! Sit odio repudiandae tempore tempora, ut eum nam rem error ipsum enim maxime fugit, laudantium quidem labore aliquam eligendi est magnam? Obcaecati qui cupiditate cum quis soluta ut quod consequuntur, iste impedit, placeat cumque excepturi optio, eligendi vel. Cupiditate ut ducimus perferendis, delectus molestias doloremque laboriosam praesentium aut nostrum reprehenderit nihil ea quam quos eligendi dignissimos cumque nulla! Quae, voluptas eius totam veniam nulla minus itaque cupiditate incidunt rem temporibus debitis suscipit iusto nemo molestiae dolorum magni excepturi minima officiis inventore repellat. Porro non cumque adipisci iusto, molestias ipsum error. Perferendis labore est, ab similique, corporis eaque facilis aliquid dolore. Deleniti ut nesciunt optio distinctio vitae placeat ipsa officiis, temporibus nemo perspiciatis magnam. Quaerat voluptatibus minus dolore iure, perspiciatis similique saepe sint at, nulla, minima voluptate commodi? Deleniti, quos mollitia fuga.</p>
</div>
And here it is working with jQuery:
CodePen
I've tried the stop() and stop(true,true) trick to no avail...
[Realise I didn't ask a question!]
So, my question is: Why does this work in jQuery and not Velocity? Is there a way to make the event fire only once, specifically, at the scroll position? - as it looks like it fires on all scroll events.
A caveat: I'm only a couple of months in to jQuery...
It doesn't exactly loop. It's just being executed a lot by the scrollEvent. jQuery is probably stateful, I'm not sure about velocity. You'll need a variable that checks if you are scrolled down enough and that it has already run once.
var offsetPos = $("h1").offset().top;
var navFull = $(".navbar-full");
var navShrink = $(".navbar-shrink");
navShrink.hide();
var animateUp = false;
var animateDown = true;
function navChange() {
var scrollPos = $(this).scrollTop();
if (scrollPos > offsetPos) {
if(animateUp === false){
animateDown = false;
animateUp = true;
navFull.velocity("slideUp");
navShrink.velocity("slideDown");
}
} else {
if(animateDown == false){
animateUp = false;
animateDown = true;
navFull.velocity("slideDown");
navShrink.velocity("slideUp");
}
}
}
$(window).on("scroll", navChange);
html,
body {
position: relative;
margin: 0;
}
.content {
width: 600px;
margin: 0 auto;
position: relative;
}
nav {
position: fixed;
top: 0;
width: 100%;
z-index: 1;
}
nav p {
text-align: center;
}
.content h1 {
margin-top: 150px;
}
.navbar-full {
height: 100px;
background: blue;
}
.navbar-shrink {
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>
<nav class="navbar-full">
<p>Why doesn't this stop!</p>
</nav>
<nav class="navbar-shrink">
<p>Why doesn't this stop!</p>
</nav>
<div class="content">
<h1>Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod ducimus quia sed, iusto alias temporibus perspiciatis placeat omnis cupiditate laborum ex neque excepturi, ipsum. Quibusdam deleniti porro, assumenda possimus deserunt maiores ipsam non
fuga est, voluptatem. Placeat beatae voluptatibus dolores id quis, sit ipsum vitae ducimus ab ipsam eos qui tempo Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur dolorum maxime hic eaque mollitia autem laboriosam eveniet dolores
voluptates, nisi quos minus voluptate est placeat maiores earum assumenda ducimus laudantium. Labore obcaecati ipsum, molestiae harum, ex tenetur enim, aut asperiot consequuntur magnam magni. Eaque quidem explicabo tempora, cum numquam sint totam
corporis sunt, deleniti illum perspiciatis molestiasam numquam deserunt optio molestiae deleniti maiores molestias! Beatae et non fuga consequatur ea quisquam, iusto minima cum eligendi. Molestiae possimus ipsa pariatur facilis at. Repudiandae inventore
quod quis neque cumque, tenetur, cum. Numquam quas illum nihils veniam rem fuga, fugit nesciunt asperiores at facilis ut amet, quo! Laudantium consequatur quis, incidunt accusantium assumenda harum velit, saepe molestias omnis eveniet iste vel ea,
eaque. Magnam porro eligendi quasi aspernatur. Numquam quis, eius?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis voluptas, labore odio. Laboriosam fugit voluptate velit. Cupiditate fugit optio illum porro deserunt qui, eius corrupti,
quod quia rerum, molestiae nostrum asperiores voluptates fuga animi perferendis. Perspiciatis nulla exercitationem quis aliquam fugit minus unde architecto vero nostrum quos, repellendus delectus aperiam porro, voluptatum accusamus eius. Facilis dolores
culpa aliquid temporibus, inventore ad quisquam numquam, eum voluptas, harum consequuntur est deleniti! Sit odio repudiandae tempore tempora, ut eum nam rem error ipsum enim maxime fugit, laudantium quidem labore aliquam eligendi est magnam? Obcaecati
qui cupiditate cum quis soluta ut quod consequuntur, iste impedit, placeat cumque excepturi optio, eligendi vel. Cupiditate ut ducimus perferendis, delectus molestias doloremque laboriosam praesentium aut nostrum reprehenderit nihil ea quam quos eligendi
dignissimos cumque nulla! Quae, voluptas eius totam veniam nulla minus itaque cupiditate incidunt rem temporibus debitis suscipit iusto nemo molestiae dolorum magni excepturi minima officiis inventore repellat. Porro non cumque adipisci iusto, molestias
ipsum error. Perferendis labore est, ab similique, corporis eaque facilis aliquid dolore. Deleniti ut nesciunt optio distinctio vitae placeat ipsa officiis, temporibus nemo perspiciatis magnam. Quaerat voluptatibus minus dolore iure, perspiciatis
similique saepe sint at, nulla, minima voluptate commodi? Deleniti, quos mollitia fuga.</p>
</div>