I'm using bootstraps modal view pop-up to display a PDF for my Terms of Use. I'm wondering if there is a way to disable the "close" button which is on the bottom of my modal view, until the user has scrolled to the bottom of the PDF. Currently the close button can be pressed anytime.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>DisplayPDF</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<embed src="Terms of Use.pdf"
frameborder="0" width="100%" height="400px">
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I've actually tried to recreate your issue using a simple div. Here is an example.
By default i've added the disabled attribute to the button and after scrolling to the bottom i've just removed that.
Here is the js_bin_link
const btn = document.querySelector('.accept-btn');
const wrapper = document.querySelector('.wrapper');
wrapper.addEventListener('scroll', (e) => {
if(wrapper.scrollTop === wrapper.scrollHeight - wrapper.offsetHeight) {
btn.removeAttribute('disabled');
}
})
.wrapper {
overflow-y: scroll;
max-height: 200px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>DisplayPDF</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<!-- <embed src="http://keiba-kinki.jp/pdf/0510_11.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" frameborder="0" width="100%" height="400px"></embed> -->
<div class="wrapper"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates odio saepe sed esse, illum tempore, voluptatibus, quisquam incidunt nemo deserunt quasi quos sunt in laborum officiis ipsum dolor, fugiat. Doloribus.</span>
<span>Laborum placeat soluta aliquam sit laboriosam dolorem quis a impedit quos voluptas deleniti rerum, commodi numquam in ducimus ut voluptate modi laudantium! Tempore molestiae a cumque at odit dolores libero.</span>
<span>Error incidunt earum, sint aspernatur quisquam. Saepe, similique, voluptatibus! Unde est commodi placeat deserunt, expedita nemo. Placeat rem ipsam, minima aliquid rerum voluptatem neque maxime sed? Corporis autem, pariatur officia!</span>
<span>Beatae suscipit eligendi pariatur a labore quas nostrum blanditiis maiores nesciunt, repudiandae quo excepturi fugiat qui provident nisi. Quia saepe nemo, sapiente. Tenetur ipsa voluptate error, velit itaque fuga harum.</span>
<span>Fuga, nulla, repellendus! Sed explicabo a, ipsa consequuntur incidunt iusto neque nisi! Quo soluta eius officia error suscipit distinctio fugiat quaerat, consequatur doloribus perferendis, deleniti, nostrum vel repudiandae fuga! Ea!</span>
<span>Soluta ab consequuntur culpa magnam doloribus tenetur iste at error debitis eius saepe veniam mollitia odit dignissimos veritatis id expedita accusantium qui reprehenderit fugit itaque commodi ea temporibus, accusamus! A!</span>
<span>Quas quam voluptate dolorem eos voluptas odio, inventore esse nobis, deleniti ipsam iusto quia reprehenderit repellat perspiciatis, natus animi tenetur non temporibus porro dolores quasi illo. Nesciunt ab, cum sapiente.</span>
<span>Animi, possimus consequuntur nihil eius voluptate ullam id corrupti, tempore aliquid ex aspernatur voluptatibus dolorem optio nobis laboriosam deserunt quas perferendis, sequi sunt assumenda cupiditate suscipit, architecto magni quae. Dignissimos.</span>
<span>Iure ducimus debitis et minus? Quae, aut! Esse quia doloribus aspernatur ex, debitis reprehenderit eaque asperiores, ratione quos explicabo ab tempore eligendi, optio error adipisci neque rem nihil. Amet, exercitationem!</span>
<span>Nesciunt aliquid cupiditate impedit, aspernatur assumenda rem nemo voluptatum tempora cum asperiores. Temporibus dignissimos aspernatur porro illum. Placeat dolore ratione nobis, veniam error asperiores eum a! Corporis a rem ad.</span>
<span>Nemo mollitia vitae quis, nesciunt similique iste aspernatur perspiciatis error ipsum facere eum impedit vel quod vero dolorem cumque officiis deserunt, sed provident repudiandae asperiores. Voluptate, aspernatur! Aliquam, ex facilis!</span>
<span>Earum, quos dolores possimus aspernatur sunt qui, corporis blanditiis voluptatibus, odio quasi perspiciatis architecto tempora odit iusto. Nam nihil, eaque aut autem vero tempore neque assumenda reprehenderit aliquid a ipsam!</span>
<span>Eius minus maiores, id reiciendis consectetur commodi, cum qui alias, ipsam laborum illum, asperiores nihil eum fuga voluptatum velit corporis. Doloribus at quae, vero corporis. At magni dignissimos incidunt id!</span>
<span>Iure saepe praesentium laudantium enim perferendis beatae, nesciunt, obcaecati, unde repudiandae aut tenetur et, eaque a. Aspernatur illum, repellendus labore temporibus qui quia explicabo beatae, cupiditate odio, architecto culpa placeat!</span>
<span>Nostrum quo eligendi ad voluptates veritatis perferendis. Illum maxime, nesciunt aliquid quidem, ipsum vero fugiat earum alias dolorum architecto tempore. Accusamus nisi esse dolores voluptatibus, ipsum, iste reiciendis ipsam eligendi.</span>
<span>Veritatis doloremque, exercitationem quae aspernatur id nemo sit quas. Consequuntur, quod. Provident repellat rem, quo doloribus, similique quis tempore iure quasi, voluptatibus perspiciatis sunt nobis, aspernatur soluta odit quibusdam. Laboriosam!</span>
<span>Rem dolorem enim porro fugit, dignissimos nulla magni, sint tempora nemo recusandae vel animi veritatis veniam aliquid culpa repellat aperiam, adipisci atque hic consequatur! Debitis voluptates, quia. Rerum, illo vitae.</span>
<span>Natus odit aliquid voluptates ullam, quia quod quisquam saepe assumenda molestias, est dicta culpa officiis doloremque libero nam reiciendis corporis qui laudantium illo suscipit unde asperiores. Corporis dolores in, dolorum!</span>
<span>Iure eligendi dolor porro. Dignissimos, delectus doloribus, ullam architecto id ab quos perspiciatis tenetur eos omnis aliquam mollitia quia iusto quae tempora beatae, placeat autem blanditiis, quisquam! Minus, saepe, aspernatur!</span>
<span>Blanditiis, voluptates delectus reprehenderit odio quibusdam ut obcaecati, officia fugit minima! Animi eos quae eius, vitae, voluptate illum commodi porro debitis! Corrupti nostrum eaque, odio. Quasi perspiciatis quibusdam similique? Tempore!</span>
<span>Laudantium eius repellendus, vel cupiditate a, fugit blanditiis deleniti maiores sunt, est explicabo dolor sed culpa nemo eligendi incidunt cum aliquam dicta. Aperiam sunt similique deleniti quibusdam aliquam veniam officiis!</span>
<span>Tempora perferendis quo labore quis vel porro eligendi, accusamus in pariatur ullam tempore ad magni sequi et. Fugiat, eum? Harum fugiat cupiditate cum nesciunt nemo saepe laborum ipsa perferendis voluptatum!</span>
<span>At excepturi laborum modi nisi voluptatum tenetur labore quam dolore illum magni. Autem commodi, fugiat maiores velit quasi odit est. Obcaecati possimus id cumque assumenda fuga repellat dolores quia cupiditate.</span>
<span>Dolor minus soluta deserunt eaque, reiciendis enim, assumenda fugit laborum deleniti sed tenetur qui adipisci hic consectetur aliquid possimus temporibus cumque nihil fugiat, dolorem! Animi, ex perspiciatis quae quo veritatis.</span>
<span>Eaque provident esse architecto quis. Corporis necessitatibus eveniet, a praesentium illo ex exercitationem dolores esse, aspernatur sint nemo unde, facere excepturi iure repellendus delectus est! Beatae aspernatur, quis enim repellendus.</span>
<span>Atque tempore vel, hic, impedit odit consequatur ea eveniet. Hic doloremque, sapiente magni, accusantium qui quibusdam sed nulla quas enim modi quisquam laboriosam, beatae rem aliquam esse delectus molestiae dignissimos.</span>
<span>Doloremque eius id, totam nesciunt. Laudantium molestiae quasi nihil numquam quaerat fugit rerum sequi incidunt iure quibusdam, magni voluptatibus ea, perferendis officia tenetur autem at? Nobis, nesciunt. Mollitia quo, porro.</span>
<span>Quos quis dignissimos dolorem nihil ipsum facilis porro nulla nostrum molestiae, mollitia doloremque deserunt sunt labore magni, ab modi qui eius vel nisi! Accusamus veniam, odio tenetur. Libero, eligendi, quod?</span>
<span>Minus perspiciatis iste, ipsa odio neque maiores incidunt ducimus, quis et fugiat, officiis enim alias ipsam vel doloribus soluta quam mollitia. Amet, impedit cum illum quidem, nihil dolorem ratione ea!</span>
<span>Minima unde debitis qui corrupti, neque atque accusantium id porro dignissimos eligendi. Est iusto sed minus quibusdam similique et fugiat, vitae tempore. Accusantium a asperiores quaerat veniam incidunt debitis, facilis?</span>
<span>Eius voluptate odit beatae, earum eos ipsa, laudantium esse minus hic rem dolores quasi harum, quibusdam sit error nam, ea facilis sunt cupiditate qui voluptatem quidem possimus pariatur deleniti? Quaerat.</span>
<span>Nihil quidem consectetur, illum praesentium molestias minima eligendi id ipsam voluptatum cumque? Numquam dolorem, praesentium odio velit accusantium at error non blanditiis quo, consequuntur, dolor dignissimos vel voluptas inventore iusto!</span>
<span>Nesciunt ipsam cum magnam alias est, nemo doloremque sunt sapiente et! Unde deserunt itaque consequuntur architecto, debitis autem rerum, inventore aspernatur ea, perspiciatis ad quas tempore soluta, quo aut laboriosam.</span>
<span>Quia quo officia, nobis veritatis laborum magni dolor libero minus, voluptatem ut! Dolorem, vel possimus adipisci tenetur inventore, minima tempora neque officiis reiciendis nihil reprehenderit ab deserunt ipsam temporibus ipsa.</span>
<span>Dolore labore inventore consequuntur reiciendis doloribus nostrum facere sunt maiores culpa quasi, odit dignissimos saepe incidunt provident! Totam dignissimos, dolorem animi aspernatur nesciunt commodi! Autem quis repudiandae ipsa amet asperiores.</span>
<span>Harum laborum quisquam unde enim commodi temporibus corrupti nam nisi odit labore reiciendis impedit eos dolores eveniet excepturi asperiores sunt vel praesentium delectus, deleniti maiores deserunt! Ut corrupti molestias aliquid.</span>
<span>Natus vitae, quis perspiciatis in eos voluptate vel tempore molestiae, veniam, voluptas, repellendus debitis assumenda? Esse illo distinctio nobis nihil inventore, doloremque fuga adipisci itaque veritatis, dolor veniam. Quibusdam, omnis!</span>
<span>Explicabo tempora ipsum dolorum necessitatibus quasi doloribus blanditiis fugit tenetur, debitis laudantium quas odio commodi molestiae autem consequatur velit culpa voluptas corporis cupiditate architecto deleniti esse saepe optio id. Eum.</span>
<span>Atque magnam similique, voluptate neque quod iusto. Nam delectus, illum esse repellendus nulla. Delectus consequuntur eius quas officia ipsam unde debitis alias tempore ullam accusamus fugiat, ea tempora ducimus amet.</span>
<span>Dicta voluptatum vero, eaque fugiat mollitia dolore deserunt doloremque commodi inventore, esse consequuntur earum dolores officia tempora aspernatur et, quisquam repudiandae sint explicabo perferendis? Maiores, voluptates, officia. Accusamus, deleniti, excepturi.</span>
<span>Assumenda ea, excepturi eum aliquid. Corrupti ullam illum nulla consequatur maxime nisi dolorum saepe veritatis accusamus, magni ab laborum nesciunt quis reiciendis a tempora. Quos accusantium cum excepturi, eaque mollitia?</span>
<span>Quaerat amet dolorum distinctio, architecto quis voluptatem enim quo laudantium ipsa suscipit at, quae porro laboriosam voluptates veritatis unde magni laborum reprehenderit, dolor, nobis perferendis cum! Deleniti possimus, voluptates nihil?</span>
<span>Rem, eveniet, cupiditate. Quisquam nesciunt soluta perspiciatis quaerat mollitia possimus iure voluptatibus accusantium hic officiis quasi aut ea, iusto neque architecto temporibus qui maiores ducimus aliquam blanditiis dignissimos minima odit.</span>
<span>Ducimus facere animi, voluptatem quo, iure modi natus harum maxime distinctio fugit consequuntur accusamus sequi ex eos enim praesentium, debitis accusantium deleniti tenetur quis, culpa laboriosam soluta dolorum! Est, libero.</span>
<span>Ad voluptas odit, accusantium quisquam earum mollitia, perspiciatis temporibus laborum aperiam consequatur autem sequi dolores id itaque vel laboriosam at, fuga similique sit eum nemo deleniti nulla. Ex, iste, aperiam!</span>
<span>Debitis obcaecati et iste, nesciunt laborum beatae consequatur explicabo libero voluptatem porro fuga quis, labore inventore nemo odio ipsa illum. Voluptatem provident velit nam delectus architecto nulla iste aliquam necessitatibus.</span>
<span>Beatae repellat, voluptatem recusandae. Earum ad placeat minima recusandae. Dicta autem rem, rerum, vitae atque placeat quibusdam expedita laboriosam asperiores quod unde ipsa voluptatum cum consectetur voluptas neque voluptates quae.</span>
<span>Vero neque sint, quibusdam ad assumenda. Dolorum eligendi explicabo placeat a esse earum unde pariatur exercitationem sit numquam soluta blanditiis quam, optio neque recusandae beatae dolorem, perferendis dignissimos tempora doloribus.</span>
<span>Enim sed, iure repellendus sequi esse placeat quo quae voluptas optio dolores maiores perferendis fugiat porro ipsam asperiores, odit possimus? Inventore voluptas amet, omnis quod sit explicabo corporis tempore, quos?</span>
<span>Amet reiciendis veniam sapiente ducimus minus odit magni culpa aspernatur numquam, fuga dolorum velit cum deleniti delectus impedit natus quidem cumque et. Expedita tempore et, unde impedit alias? Deleniti, nihil.</span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default accept-btn" data-dismiss="modal" disabled>Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
var outBlockBtn = document.querySelector('.out-block__btn');
var outBlock = document.querySelector('.out-block');
var header = document.getElementById('header');
outBlockBtn.addEventListener('click', function() {
outBlock.classList.toggle('_show');
})
if (outBlock.classList.contains('_show')) {
header.style.marginBottom = '58px';
} else {
header.style.marginBottom = '32px';
}
header {
position: relative;
z-index: 1;
height: 100px;
background: grey;
}
.out-block {
display: flex;
flex-direction: column;
align-items: center;
padding: 100px 0 10px;
transform: translateY(-100%);
transition: all 500ms cubic-bezier(0.25, 0.25, 0.75, 0.75);
transition-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
}
.out-block._show {
background: green;
transform: translateY(0);
}
.out-block__content {
display: flex;
flex-direction: column;
align-items: center;
}
.out-block__content span {
display: inline-block;
padding: 0 0 200px;
}
.features {
background: yellow;
padding: 200px 0;
}
.out-block__btn {
width: 100px;
height: 20px;
background: red;
}
<div class="wrapper" id="wrapper">
<header class="header _lp" id="header">
</header>
<main class="page" id="main">
<section class="out-block">
<div class="out-block__show">
<div class="out-block__overflow">
<div class="out-block__container">
<div class="out-block__content">
<p>
rum, voluptates, iure voluptatibus consectetur tempora enim possimus
animi impedit, dolor asperiores aperiam mollitia consequuntur porro ipsum eveniet! Architecto adipisci, vel officia tenetur, minima repellendus distinctio tempore unde explicabo iure quam facere cum error ad! Veniam, ducimus sit ratione
facilis incidunt corrupti modi totam exercitationem laudantium sed a voluptatem, animi accusantium. Dolorum doloremque, recusandae tempore obcaecati neque qui illum ex fugit temporibus. Quam incidunt vero placeat maxime, fugit aspernatur
saepe molestias velit quos asperiores nemo. Assumenda tempore, eligendi tenetur totam numquam a qui voluptatem quam ratione natus tempora iure quia praesentium? Qui aliquam ducimus quo harum praesentium dicta, porro magni, autem, omnis
ratione enim! Quas at ipsa ipsum nam quisquam eligendi aliquid itaque est aspernatur aperiam? Dolore fugit sunt voluptatum ipsa, ea quia corrupti hic amet dolor sed, nam fugiat consequatur saepe error culpa laborum rerum? Iusto eius distinctio
ipsa et, eos eligendi, reiciendis magnam doloribus consectetur doloremque optio deserunt beatae aut sed nisi fugit sit ex nihil non itaque. Sint porro sapiente dolorem suscipit eius amet debitis pariatur error asperiores dolor fugit excepturi
quae ea ab eligendi deleniti unde voluptate obcaecati cumque, commodi est, nulla quod? Explicabo corporis at numquam illo laboriosam ut vero aspernatur amet non! Dolores eius temporibus accusamus, quas perspiciatis hic eum provident, aliquid
voluptas, totam cupiditate distinctio a similique ipsam eaque laborum odio voluptatem quis quam esse? Accusantium earum cumque reiciendis quidem modi dolores expedita dolorum harum voluptatum at error, fugiat est, qui, veritatis pariatur!
Doloribus aspernatur repellat rerum recusandae animi, mollitia cupiditate voluptates vero quia in minima adipisci voluptatem! Nisi, omnis maiores voluptatibus quis optio nostrum sunt rerum, consequuntur reiciendis porro suscipit ea harum
fugit laborum unde? Quis quas doloribus ipsam recusandae expedita illum vitae adipisci soluta quisquam ipsum atque consequatur laudantium nostrum itaque at dignissimos non ut debitis totam, iure enim laboriosam? Doloribus, eius nemo deserunt
alias esse, omnis aliquid eos labore quod assumenda corrupti dolorem vel qui. Vitae mollitia iure dolorem vel ab voluptate iusto, reiciendis possimus necessitatibus libero itaque tempore veritatis, minus soluta cum atque. Eaque corporis
quasi perferendis tempore. Sapiente dolores excepturi reprehenderit, nobis voluptates fugit ipsam culpa similique possimus illum, provident optio, beatae pariatur quasi. Veritatis enim a inventore exercitationem saepe, qui placeat rem
consequuntur, tempore, nihil sit laudantium molestias. Consectetur non, adipisci doloremque quaerat a ea optio molestias in animi facere corporis natus quisquam architecto amet id reprehenderit deserunt fugiat magni sapiente. Molestiae
quam soluta dicta culpa ea ipsum consequuntur hic aut dolor sed veniam temporibus, laborum reprehenderit libero, repudiandae iure, expedita ab commodi cumque? Quia repudiandae, error minus dignissimos omnis in accusantium quod. Autem qui
laboriosam ducimus id, officiis nulla alias iste deserunt illum veniam consequuntur iusto expedita asperiores ipsam, aliquam quisquam voluptates. Cum reprehenderit odit nemo, doloremque numquam quos eum cumque ab officia ipsam doloribus
consequuntur fugit quaerat beatae fuga quod. Aliquam minus assumenda nobis laborum necessitatibus quibusdam rerum! Reiciendis reprehenderit, aperiam blanditiis porro et voluptatem dolor quam consequuntur dolore veniam ad, quod recusandae
commodi. Ut exercitationem maiores sit ratione iure ad, impedit aliquid mollitia consequatur, architecto esse obcaecati necessitatibus tenetur sapiente nam, odit dolor atque? Repellat veritatis distinctio deleniti. Ab dolores veniam, cupiditate,
distinctio molestiae laborum similique architecto modi a harum nam sed unde explicabo, voluptate voluptates officiis blanditiis itaque at maiores atque alias voluptatibus. Excepturi sequi dolorum asperiores quod eaque perspiciatis non,
temporibus voluptatum nobis dolor ratione nemo, hic beatae delectus? Nam id earum eum ab voluptatibus soluta nostrum, perferendis eius quis fuga, quidem autem dolores ratione iste ea nisi neque commodi illum fugit vitae reprehenderit.
Sit dolor nam blanditiis tempore praesentium repellendus esse. Ad ipsam saepe aspernatur vitae totam aliquid harum iure veritatis consequuntur tempora laboriosam voluptatibus dolorum sit corporis quos vel inventore repudiandae ullam illo,
porro nam, cum assumenda? Voluptatibus eum, at incidunt minus dolorem nesciunt facilis libero est laborum voluptatem delectus excepturi sapiente earum quos pariatur amet? Voluptas, dicta a cumque, nulla saepe qui tenetur quis quos quae
inventore minus amet deserunt debitis accusantium magnam facilis? Facilis exercitationem reiciendis consequatur officia veritatis! Rerum illo labore consequuntur animi. Impedit assumenda perferendis optio rem explicabo a nesciunt repudiandae
tenetur dignissimos sapiente, maxime dicta. Quis, sint dolor consequuntur eveniet, sit cum eum sapiente nobis voluptate labore fuga quam repudiandae alias ipsam saepe et ea. Explicabo sapiente illo ea at maxime quibusdam accusamus officiis
consectetur hic aut, eveniet tenetur voluptatum itaque, iste, obcaecati sed perspiciatis ducimus fugit sit doloribus quaerat laboriosam? Odio quisquam id perspiciatis reprehenderit quam minima, distinctio obcaecati. Doloremque omnis incidunt
corrupti maiores totam iure odit debitis praesentium aspernatur aliquam? Doloremque ab delectus at. Quod, voluptate. Repudiandae, nemo aspernatur? Adipisci ea eveniet dolorem harum distinctio est dolore suscipit, nulla quaerat atque omnis
illum magnam quidem consectetur odio nemo repudiandae nam soluta aliquam esse dignissimos facilis cupiditate. Est, cumque! Inventore ea est vitae voluptates esse, dolorem reiciendis obcaecati, facere officiis eligendi odio maiores. Eaque
ut eum qui alias tempora reprehenderit molestiae nesciunt ab laudantium neque at fugiat dolores hic aliquam possimus, sed voluptates sint asperiores consectetur quos! Reiciendis, quisquam at. Nihil incidunt vel praesentium, cupiditate,
delectus quo maiores excepturi alias corrupti neque dignissimos exercitationem eveniet beatae veniam provident vitae esse harum, magni voluptates. Voluptate quo a iusto, omnis quod eveniet iste labore voluptates facere dolorum, architecto
eum repellat! Maiores libero similique in. Veritatis, nesciunt. A dignissimos exercitationem accusamus, praesentium possimus sapiente ipsum explicabo illo aperiam consectetur cupiditate ea dolorum placeat ipsam quae vero voluptatum dolorem,
officia ab eligendi, tempore quod quas quisquam? At rerum minima, aspernatur quibusdam ipsa atque. Sunt ipsam omnis quibusdam? Voluptatibus mollitia dicta voluptas? Velit, nesciunt veniam dicta, pariatur minus possimus quasi nemo in perferendis
omnis, iure quaerat hic! Eveniet tenetur asperiores ipsum dolores quam aperiam, dolore ab officia officiis quibusdam nemo et animi vero perferendis sunt exercitationem amet eligendi illo minima iure! Quos vitae fuga, voluptate sequi ratione
recusandae, maxime animi sunt officia esse tempore ab maiores dolore, doloremque ipsum eveniet nihil dignissimos. Animi ducimus eligendi deleniti eveniet beatae exercitationem iure laborum est recusandae enim sit ullam possimus omnis consectetur
ipsum architecto, harum saepe accusamus deserunt dolorum pariatur? Vel ex mollitia sunt molestiae vitae culpa nobis, quia beatae, accusantium impedit possimus, natus quo ipsum vero libero placeat voluptatibus esse ab ipsam itaque minus
pariatur tempore quidem. Tempore, blanditiis a ad fugit ex iure ut consequuntur quaerat, qui dolores, dicta animi molestias. Reprehenderit facere tempore doloremque asperiores sunt, deserunt molestias minima eligendi similique doloribus.
Suscipit hic harum quas error! Quidem id possimus fugiat ullam sit maxime natus architecto fuga nostrum expedita ab, repellendus ipsam magni suscipit modi debitis officia perspiciatis, beatae et cumque nulla. Maiores cumque velit hic quam
nam delectus vero, magnam repellendus quod impedit a voluptatum voluptates architecto quidem ratione dolores commodi labore, ipsa fugit molestias facere sunt. Ea maiores excepturi doloribus animi id minus debitis veniam aperiam impedit.
Adipisci, voluptas magnam. Nulla reprehenderit deleniti magnam, dolores sunt ullam dolore, commodi facilis ut ex eveniet voluptatem molestias quis blanditiis, similique ab maxime consectetur sequi! Est ducimus eveniet consequuntur, optio
modi numquam fugiat et blanditiis dicta quae pariatur veritatis, ex ratione itaque officiis ab magnam iure consectetur voluptates saepe ad eligendi reiciendis assumenda? Sunt dolore quos, molestias est ratione nulla deserunt officia ex
voluptatum, quis at soluta repudiandae dolor qui accusamus iste nobis ipsum eaque voluptates, illo id libero cupiditate. Eaque aut quidem natus facere ullam quasi tenetur omnis repellendus quia recusandae, harum quo veniam, ipsa velit
optio ipsam provident, magni obcaecati deserunt dolor reprehenderit architecto qui. Eaque dolores ab quis minima minus facere eligendi unde obcaecati perspiciatis inventore! Eveniet officia beatae corrupti voluptates, reiciendis provident
nam repellat aliquam molestiae doloremque placeat nobis pariatur repudiandae! Exercitationem error, quos sequi aspernatur iure illo labore odit necessitatibus! Ipsam minima reprehenderit repellendus accusamus dolor consectetur vero eaque
illo cum voluptatibus officia aliquam nemo praesentium dolore, quae perferendis doloribus rem recusandae esse voluptatum corrupti inventore aut! Optio alias saepe nisi nostrum! Consequuntur labore exercitationem minima, soluta blanditiis
quas explicabo fugiat ad corporis. Soluta architecto odit nihil nostrum harum amet sapiente quis ex quos molestias ducimus ipsa nisi doloremque, illo non fugit repellendus fugiat laborum minus. Officia, repudiandae cupiditate! Nisi quam
a magni quidem ea, cumque voluptates maxime, necessitatibus id odit aperiam obcaecati distinctio molestias facere voluptas animi cupiditate officia perferendis in autem quibusdam porro repudiandae eum pariatur? Debitis, dolor culpa vero
beatae eius ullam architecto placeat iste tempore voluptatem sapiente aperiam praesentium eos soluta dolores veniam rem consequatur numquam neque recusandae corrupti? Deserunt aliquid adipisci, iure perspiciatis facere incidunt harum aspernatur
cupiditate ab reprehenderit ea ut similique et, quia tempora nostrum fugiat atque amet minus. Omnis quasi sed illum aliquam excepturi quae magni incidunt, corporis repellat saepe? Fugiat atque nam possimus aut iusto maxime saepe quae iure
expedita! Commodi praesentium dolores temporibus molestiae consequuntur quis, eaque obcaecati officiis maxime voluptate optio asperiores fuga consequatur dolorem ea laudantium dolor nemo possimus fugit beatae fugiat libero voluptatibus?
Dolorem, unde eaque et ipsum quasi quo repellendus pariatur corporis eum saepe qui quisquam amet, vitae consectetur, tenetur veritatis? Explicabo tempore quidem eius, molestias aspernatur mollitia quas amet dolor id rem totam dolorum ut
reprehenderit, aut, sunt a rerum excepturi perspiciatis consectetur qui iste magni libero? Maiores quasi harum nostrum, ea voluptatem ab? Est quisquam cupiditate excepturi alias enim nostrum facere sit illum dolorum. Incidunt quia molestias
soluta voluptatem doloribus non molestiae nihil distinctio ratione. Repudiandae totam amet unde dolore? Architecto soluta saepe iste atque explicabo necessitatibus amet perspiciatis unde, earum dolor quasi aliquid doloribus esse eius molestias
cumque veniam voluptate, cum fugiat. Sint deserunt harum voluptatum delectus quis, doloribus illum at odit dicta, fugiat sequi, quidem quasi! Delectus nihil nesciunt officiis, animi possimus maxime similique, cumque sed necessitatibus
mollitia quisquam. Quaerat, placeat. Dolorem quis delectus, quia accusamus impedit ab, voluptatibus ad recusandae sint dolore, aliquid mollitia beatae modi? Maxime porro magni perspiciatis magnam quam nihil quod fuga expedita, pariatur
ut unde optio molestiae fugiat autem voluptas tempora, earum itaque labore, hic quibusdam libero ratione culpa. Magnam consequuntur provident harum aspernatur obcaecati alias, quaerat cum iusto libero quod sapiente eos sint nisi nobis
dolorum similique ad incidunt reprehenderit ratione laudantium? Quia cum accusantium tenetur accusamus incidunt deserunt soluta nostrum, pariatur vitae quasi delectus porro facilis amet quam reiciendis placeat ipsum necessitatibus earum?
Voluptatum, corrupti tenetur! Consectetur delectus eaque velit. Minus voluptates itaque quam, eum porro quasi quos veniam amet vitae omnis voluptate, consequuntur sequi est optio? Blanditiis quis magni quos id aperiam pariatur non porro
aliquam ea est. Autem nihil, optio minus cupiditate veniam laborum, ratione necessitatibus atque officia velit delectus! Nam minima est nemo placeat ad sit at nobis ratione soluta! Sit tenetur sint dicta excepturi ut perspiciatis voluptatibus.
Praesentium consequatur ullam nam voluptatibus rerum inventore, placeat soluta enim magni libero repellendus, ab laudantium dicta hic. Blanditiis omnis, nihil animi dolorum magni similique esse ipsum recusandae perspiciatis est maiores,
soluta culpa autem nulla! Consequatur eligendi debitis quaerat enim corrupti cum quia rem quod assumenda reprehenderit, dolore blanditiis sed atque, perspiciatis eos dolores voluptates explicabo esse iusto officia doloribus ipsa. Deserunt
minima provident voluptatibus aspernatur porro, sint pariatur consequatur quis facere. Perferendis quasi, ad ducimus maiores facilis aliquam odio officia inventore. Debitis, non! Saepe, necessitatibus ab. Magnam quisquam recusandae, laudantium
repellat temporibus saepe neque deserunt! Ducimus corrupti magnam nesciunt doloremque ad pariatur porro dignissimos optio! Earum quam veritatis est eveniet optio minima odio eaque porro nulla similique in assumenda nihil delectus quae
esse, illo incidunt sequi, temporibus perspiciatis explicabo, eum ex dolorem! Corporis fugit saepe asperiores hic harum. Delectus laboriosam cupiditate voluptatibus ipsam, ipsa dolores voluptate sequi officiis modi architecto molestiae,
accusamus excepturi. Molestias perferendis at soluta repellat nostrum reprehenderit similique nisi, laboriosam rerum libero voluptatem minus minima necessitatibus obcaecati nam cum fugit accusamus sint praesentium quo mollitia quasi. Atque
repellendus, iure ratione quis rerum facilis culpa libero! Voluptatem labore accusamus inventore distinctio dolore soluta repudiandae autem est eaque earum, cupiditate asperiores tenetur qui nostrum nulla a ex tempore accusantium expedita
et reiciendis corrupti sed pariatur! Iure modi explicabo repellat consequatur! Pariatur corporis suscipit at corrupti vero quo cupiditate expedita natus molestias sed cum dignissimos voluptatem explicabo nobis ullam, voluptate facilis
repellendus quia repudiandae officiis facere perferendis exercitationem harum? Sapiente molestiae, distinctio animi minus magni ratione sequi. Hic deleniti qui ipsa atque iure. Mollitia quidem nobis fugit quis porro molestiae culpa optio
vitae quisquam architecto voluptatum, voluptates inventore magnam atque quibusdam eum! Porro totam facere ducimus rem perferendis. Error sequi quia ipsa, eligendi sed iste necessitatibus iusto culpa fuga sunt fugit esse iure earum accusamus
nihil officia velit alias? Error aspernatur, cupiditate magnam libero minima expedita ullam ducimus, temporibus, sint quas asperiores hic voluptates molestiae eos unde? Illum, libero nulla quasi iusto, deleniti consequuntur minus possimus,
ad nihil odio obcaecati doloremque. Rerum eaque pariatur molestiae, deleniti, labore doloremque alias quia asperiores odit debitis veritatis delectus rem hic, fuga nesciunt explicabo. Vero, consequatur suscipit facere tenetur officiis
a consectetur necessitatibus saepe. Veritatis temporibus vero nobis repudiandae amet voluptatem expedita adipisci sit aperiam optio harum nulla architecto, sint nostrum quo, totam inventore eveniet. Deleniti quaerat officiis esse quo odio
ab minus eius cupiditate nostrum ea rerum rem amet deserunt laboriosam iure aliquam, explicabo dignissimos dolore, natus quidem placeat. Sint quibusdam eos alias consequuntur facere assumenda, porro asperiores aliquid itaque a modi obcaecati
vitae eveniet qui nesciunt unde. Esse soluta in dolores, nihil vel perspiciatis sunt odit officia vitae saepe exercitationem facilis veniam nobis consequuntur iste non laborum adipisci quos, voluptatibus nulla? Praesentium neque, dignissimos
quasi, non enim exercitationem quibusdam nesciunt repudiandae odio placeat accusantium consectetur labore distinctio? Voluptate officiis a voluptas quos molestias cupiditate, quaerat maiores voluptates alias neque numquam labore eveniet
ex dolore quod commodi quasi rerum iure sapiente id. In, ea facilis. Tempora qui cumque dolorem incidunt possimus, autem voluptatem reiciendis, labore officia, quaerat ea neque. Nam asperiores aperiam voluptatem cum vero rerum quos natus
temporibus ut! Molestias ducimus iusto ut quo aut ab tempora necessitatibus veritatis tempore facere minus dignissimos iste corrupti at voluptas cupiditate eaque provident quae hic neque modi autem, voluptates, sequi repellendus. Earum,
eius officiis, nostrum tempora, rerum esse iusto officia itaque eveniet mollitia omnis odit eos rem fugiat? A molestiae voluptates tempora nostrum est neque, nemo voluptatem illo praesentium ea omnis voluptate vel quam, aperiam mollitia
sint eaque perspiciatis cupiditate nesciunt consequatur possimus qui rerum, facilis ducimus! Ipsa nostrum doloribus quis ut accusantium aperiam excepturi architecto similique dolores dolorum, ipsum non amet qui expedita aut modi impedit
voluptatem dolor iure alias hic laborum quos. Non impedit accusamus tenetur blanditiis saepe magni, eveniet ipsa quo ea eligendi. Facilis molestiae magni sequi culpa perferendis quibusdam tempora alias, nam eius labore id voluptatibus
saepe modi consectetur dolore libero cumque omnis et blanditiis, suscipit atque veniam aspernatur odit! Consectetur earum blanditiis vel, nobis neque laborum expedita ratione quo possimus ut architecto amet vitae cumque fugiat eveniet
deserunt temporibus mollitia perferendis, repellendus esse magnam aperiam pariatur. Omnis, necessitatibus sapiente reprehenderit pariatur facilis et placeat adipisci earum possimus? Fugit tempore excepturi delectus temporibus est, possimus
sit deleniti dolorum et ad, minus suscipit obcaecati, dicta sapiente. Rem deserunt unde eligendi consequuntur illo fuga commodi impedit, et nobis, illum voluptatum aut error aliquam nisi itaque, ex dicta est! Deserunt qui sit et, nisi
quidem officiis ratione voluptatem dolores nihil in quibusdam quas commodi cupiditate molestias temporibus eius, dolorum consectetur consequatur odio id labore possimus illo! Fugiat dolore quod at, dignissimos sequi nobis earum officia
vitae minus, soluta quaerat ab nesciunt recusandae debitis itaque nostrum explicabo harum beatae incidunt voluptas a iure non est. Eius corporis nemo ex recusandae voluptate repellendus corrupti ipsum dolorum assumenda dolorem rem, eum
pariatur? Quis officia asperiores expedita illum consequatur est facere quidem culpa libero error quo pariatur cum, neque laborum quam accusamus debitis voluptate animi! Nemo iusto similique officia modi nisi ex magni, asperiores nulla,
tempore alias distinctio dolorem. Explicabo asperiores, assumenda, corporis illum fuga optio at qui rem obcaecati beatae fugiat quam nobis molestiae voluptates distinctio tempora maiores voluptate. Praesentium quam, dolorum iusto nemo
minima, cumque alias perspiciatis inventore doloremque fugiat obcaecati reiciendis ut quia odio dignissimos consectetur. Nisi animi doloribus commodi minus, provident eum voluptas deleniti ipsa earum? Perspiciatis possimus reiciendis ea,
totam vel eum earum voluptatem animi ut exercitationem, eaque corrupti cumque, sapiente illo unde qui ex dicta fuga fugiat voluptates doloribus dolorem veritatis iure. Quidem nihil deserunt veniam nemo ex vero iusto repudiandae voluptates
repellendus! Sint, officia vitae! Debitis architecto necessitatibus tenetur pariatur placeat reiciendis fugit doloribus vero tempora inventore officiis quod dolorum deserunt repudiandae sunt, facilis corrupti cupiditate laudantium saepe
quam culpa iste soluta ipsam laboriosam? Dolor soluta tenetur iure sed. Consectetur ex facilis labore excepturi atque, beatae fuga iste illum veritatis nobis debitis accusantium modi aspernatur est provident laborum voluptatum eius, quos
corporis? Quibusdam eligendi temporibus id velit natus harum, maiores fuga necessitatibus ipsam possimus, quos optio dolor neque tempore illum nisi officia sapiente! Aut doloremque quasi velit unde, libero sequi reiciendis expedita nisi
magnam quam ipsam aperiam eius. Est eos molestias nulla, sapiente laboriosam illo consectetur fuga aliquid veritatis facere temporibus culpa dolorem laborum quisquam optio qui labore excepturi ex nobis! Modi harum quaerat soluta eveniet
necessitatibus nulla at facere. Fugit omnis, consectetur ipsum maiores tempora ut officiis in ipsam neque ratione corporis iure, sunt, eligendi iusto praesentium facilis? Voluptatum nemo quos adipisci. Dignissimos exercitationem ad tenetur
qui, cumque eligendi voluptatum rem deserunt doloribus nam eveniet quia dolorem, itaque, provident molestias? Facere incidunt consequuntur molestias distinctio! Qui, aperiam. Itaque autem odit labore, consequuntur sed voluptate eius repudiandae
id, voluptatum consectetur neque velit delectus vel iusto nobis, totam facilis aspernatur ratione inventore dolor laborum rerum omnis non laudantium. Ab excepturi mollitia, illo id est ratione voluptatem perferendis. Accusamus inventore
perferendis possimus labore. Vero unde placeat quaerat amet. Id iste aliquam nam sint, dolorem, dicta reprehenderit at quod iure totam earum atque. Recusandae repellendus cupiditate consequuntur? Eveniet, excepturi accusamus. Minima veritatis
aut porro natus, soluta eveniet sunt harum, totam repellendus quibusdam enim, iure fuga saepe. Beatae ullam repellendus aut consequatur reprehenderit doloremque eius mollitia laboriosam commodi? Quam dicta officia doloremque repudiandae,
animi illum dignissimos harum beatae quas impedit corporis quisquam temporibus assumenda architecto nostrum nisi voluptatibus obcaecati suscipit. Quibusdam dolore, delectus excepturi dolores quo dolor enim, nisi exercitationem doloremque
ratione eos omnis minima accusamus non voluptatibus ex modi, inventore pariatur iste. Repellendus porro amet vero consequuntur dolorem cum obcaecati. Reprehenderit recusandae at quod ab, illum repellat praesentium laboriosam necessitatibus
alias debitis deleniti harum sapiente. Aut pariatur nisi quas distinctio, soluta inventore praesentium voluptas voluptatibus totam veniam corrupti rerum, ad sapiente maiores. Dicta tempora itaque voluptas obcaecati. Saepe molestias ipsum
expedita corrupti impedit inventore aperiam asperiores pariatur similique voluptatibus tempora doloribus delectus, voluptatum provident, quod cupiditate? Libero hic eius ex error nisi qui sint eum aliquid perferendis quae similique ipsa
velit aspernatur illo labore autem omnis fugit quaerat recusandae dolor dolore, voluptatum iusto expedita. Consectetur impedit obcaecati mollitia consequuntur possimus a ad deleniti esse placeat vero quo quisquam amet repellat, illo in!
Voluptatibus, aut? Nobis, ea illum. Soluta sint, vel possimus odio nostrum exercitationem illum, ea autem quia placeat corrupti numquam ratione, assumenda quisquam ab iusto fugiat maxime delectus debitis ut laborum? Dolores optio nostrum
ipsum ad. Similique unde quis molestiae molestias dolorem? Aspernatur quos ullam commodi asperiores non adipisci. Ad culpa ipsum distinctio temporibus? Error aperiam doloremque repudiandae. Officia, distinctio? Unde molestias officiis,
repellendus illum, totam veniam enim minus sint repudiandae odio quidem, odit voluptatum ipsa accusamus dolores ducimus. Quidem dolores non minus adipisci soluta, eos saepe quae voluptatem repellendus. Nobis ipsum optio voluptas. Doloremque
atque tempore, praesentium at natus aperiam dolorem aut placeat! Mollitia odio explicabo molestias, qui quo nulla ipsam temporibus voluptas omnis odit voluptates?</p>
<span></span>
<button class="out-block__btn" type="button">
</button>
</div>
</div>
</div>
</div>
</section>
<section class="features">
<div class="features__container">
<div class="features__content">
</div>
</div>
</section>
</main>
<footer class="footer" id="footer">
<div class="footer__container">
<div class="footer__content"></div>
</div>
</footer>
Gentlemen, help me figure it out!!! It is necessary that a modal window type block appears on click, but the bottom line is that this modal window should, as it were, shift the content down and fix itself so that the rest of the content cannot be seen only what is in the modal window. If you click the modal goes up and the content follows it and already in this state everything will scroll further. I hope it's clear)) P.S. When the green window is active, it should be fixed and scroll only inside this window.
[enter image description here](https://i.stack.imgur.com/kej8L.png)
I want the green block to be at the top at the start and when the user pressed the button, it shifted down along with the yellow one. When the green one is open it is fixed together with the cap.
I tried using height and position fixed it looked really bad
Materialize scrollspy (https://materializecss.com/scrollspy.html) is changing the URL and refreshing the page.
I have used the same code mentioned in the Materialize document in my Vue.js project for scrolling to particular position, but the page is getting refreshed with changing the URL by appending the selected div's Id at the end of the URL, instead of scroll.
In Template
<div class="row">
<div class="col s12 m9 l10">
<div id="introduction" class="section scrollspy">
<p>Content</p>
</div>
<div id="structure" class="section scrollspy">
<p>Content</p>
</div>
<div id="initialization" class="section scrollspy">
<p>Content</p>
</div>
</div>
<div class="col hide-on-small-only m3 l2">
<ul class="section table-of-contents">
<li>Introduction</li>
<li>Structure</li>
<li>Intialization</li>
</ul>
</div>
</div>
Mounted:
$(document).ready(function(){
$('.scrollspy').scrollSpy();
});
For using ScrollSpy of materializecss, first I added it in main.js file:
import 'materialize-css/dist/css/materialize.min.css'
import 'materialize-css/dist/js/materialize.min.js'
Then in the component that I want to use ScrollSpy, I have this code:
ScrollSpy.vue:
<template>
<div class="row">
<div class="col s12 m9 l10">
<div id="introduction" class="section scrollspy">
<p class="heightLong">Accusamus aliquam amet aperiam, aspernatur, atque commodi consequuntur dignissimos doloremque ea eaque earum error est fuga inventore iste mollitia nobis obcaecati, odit perspiciatis quam quibusdam recusandae repellat saepe sapiente sint! Adipisci alias aliquam aliquid dignissimos dolorum enim excepturi illo minima, pariatur perferendis repellendus suscipit totam veniam. Aperiam asperiores atque consequatur deleniti eum ex excepturi facilis mollitia pariatur, quisquam repudiandae saepe, similique ullam ut vitae voluptate voluptates. Aspernatur cumque distinctio ducimus enim et, facilis ipsa ipsum maxime neque odio omnis, recusandae repellat sapiente sunt totam unde, veritatis? Beatae distinctio ducimus ea eius est ex, fuga illum incidunt iste labore nam nihil porro provident tempore unde voluptate voluptatum. Aliquid beatae, consequuntur ea et neque nesciunt quis similique suscipit veniam voluptatum! Aliquam, aliquid cum esse fugiat ipsa perferendis placeat possimus quae unde velit! A asperiores at aut consequatur corporis delectus deleniti dignissimos dolor doloribus dolorum ducimus enim excepturi illum ipsum iste iusto libero minima, minus natus necessitatibus neque nihil odio officiis omnis pariatur perferendis quae quas, repellendus rerum saepe sed sunt tempora temporibus ullam veritatis voluptate voluptates? Aliquam amet dignissimos dolorem ea eaque enim esse est eum fugit hic illo inventore labore, laboriosam molestiae natus necessitatibus nisi odit officia optio, quae quam ratione, rem repellendus sequi tempora ullam unde! Eum eveniet hic praesentium voluptatibus! Alias, aliquam consequatur deleniti dicta exercitationem labore, laudantium magnam omnis optio perferendis possimus praesentium quidem, quos suscipit veritatis vitae voluptate voluptatum! Adipisci aliquam at atque aut dolor eaque eveniet explicabo fugit id in iste libero magni molestias nihil officia quas quibusdam, suscipit tenetur totam ut velit veniam veritatis, voluptatum. A aliquam animi asperiores atque blanditiis consectetur deleniti dolorum est ex id illum impedit incidunt iste libero maiores maxime mollitia neque nihil nisi nobis odio odit omnis perferendis possimus praesentium quae rerum, tempora ut, veritatis vero. Animi dolore est ex fuga laborum nobis suscipit! Ab ad animi asperiores autem blanditiis consequatur delectus enim ex exercitationem facere illum incidunt inventore modi molestiae necessitatibus nihil optio possimus quas quia, recusandae repellat repellendus similique soluta tempore vitae. Commodi labore saepe sequi soluta. Adipisci beatae consequatur, distinctio eos id illum ipsa iste nesciunt, nostrum perspiciatis quas quibusdam quod recusandae</p>
</div>
<div id="structure" class="section scrollspy">
<p class="heightLong">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque ipsum laboriosam necessitatibus! Atque ducimus earum eligendi nulla numquam, voluptates voluptatibus. A ab animi asperiores culpa debitis deserunt dolore, dolorem doloremque earum esse explicabo fugiat hic impedit iste labore minus molestias neque nobis porro quasi, quia quis, quod repellendus vel velit? Ab architecto, aspernatur atque dolores eligendi ex fuga illo in incidunt laboriosam magnam molestiae nam neque nostrum quidem vel velit, vero voluptatibus. Corporis dolor eaque et inventore, ullam voluptatibus? Architecto atque dolor error in, nesciunt numquam quisquam quo ratione reiciendis voluptatem. Accusamus animi architecto at aut beatae corporis culpa distinctio doloremque earum eum exercitationem expedita in ipsam molestiae molestias necessitatibus, nemo neque nobis optio placeat porro quaerat ullam ut! Ab aliquid architecto asperiores delectus deleniti dolor dolore doloremque esse est expedita fugiat fugit itaque minima minus natus nemo neque perferendis possimus quibusdam recusandae reiciendis, sequi sunt suscipit totam vero vitae?</p>
</div>
<div id="initialization" class="section scrollspy">
<p class="heightLong">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, assumenda deserunt dicta expedita hic ipsam laudantium libero odit praesentium provident quaerat repudiandae, rerum sapiente sequi sint ullam vero? Autem commodi, consequatur corporis cupiditate doloribus earum est incidunt iste iure minus pariatur porro rem tempore! Aspernatur autem, dignissimos dolorum ducimus necessitatibus nulla pariatur temporibus velit. Hic modi repellendus reprehenderit tempore voluptate? Assumenda atque dignissimos distinctio dolor doloremque et fuga molestiae totam vitae! Ad amet blanditiis consequuntur culpa deserunt doloremque dolores eaque eligendi enim eos explicabo fuga hic id in ipsum iusto labore libero magnam maxime minima minus molestias natus nisi non omnis porro, possimus praesentium, saepe sit soluta tempora totam voluptas voluptatum. Atque autem dolores vitae. Blanditiis commodi corporis dicta eligendi nulla ratione tempore, totam velit? A alias blanditiis, commodi consectetur cum cumque cupiditate delectus dolor dolorum error ex excepturi harum impedit iure magnam maiores modi molestias neque nisi odio, placeat provident qui recusandae rerum sit sunt temporibus tenetur vel vero, vitae. Aliquam animi aperiam, culpa cupiditate dicta distinctio eos et excepturi exercitationem explicabo harum hic impedit labore libero magnam, maiores minus molestiae mollitia nam necessitatibus nostrum officia quia repudiandae sunt suscipit temporibus unde veritatis vero voluptatibus voluptatum. Atque delectus distinctio eum, incidunt, itaque maxime nesciunt nisi quasi quis ratione repellat sunt vero voluptatum? Aliquid dolor ipsa labore nam nulla omnis pariatur saepe. Amet culpa explicabo facilis id incidunt ipsa ipsam labore maxime modi nam necessitatibus nostrum officia perspiciatis, quasi totam unde voluptates? Accusantium atque blanditiis, corporis eaque, est fugit inventore molestias omnis possimus quas quis quod sapiente tenetur, vel voluptas?</p>
</div>
</div>
<div class="col hide-on-small-only m3 l2">
<ul class="section table-of-contents">
<li>Introduction</li>
<li>Structure</li>
<li>Intialization</li>
</ul>
</div>
</div>
</template>
<script>
import M from 'materialize-css';
export default {
name: "ScrollSpy",
mounted() {
let elems = document.querySelectorAll('.scrollspy');
M.ScrollSpy.init(elems);
}
}
</script>
<style scoped>
.heightLong {
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 2px solid red;
}
</style>
I added some extra text and a CSS class for better view of "scrollspy" functionality. It works fine for me and does not change the url or refreshing the page.
I built a website where every page scrolls very smooth with parrallax, except for the home page.
The used code is the same, so I don't get why it differs so much.
I tried everything, but don't know why it keeps happening.
Necessary code below. Live preview: https://www.watwiljij.nu
CSS
.homeIllustration {
width: 100%;
height: auto;
position: absolute;
transition: none;
}
.rightSide {
display: inline-block;
position: absolute;
width: 70%;
margin-left: 70px;
}
Javascript
if ($(window).width() > 800){
window.addEventListener('scroll', () => {
let parent = document.getElementById('illustrationContainer');
let children = parent.getElementsByTagName('img');
// document.getElementById("illustrationContainer").style.transform = 'translateY('+ window.pageYOffset* 1 + 'px)';
for(let i = 0; i < children.length; i++) {
// children[i].style.transform = 'translateY(' + (window.pageYOffset / (2 + 0.3*i) * children.length / 32) + 'px)';
children[i].style.transform = 'translateY(' + (window.pageYOffset - ((window.pageYOffset / i)/5)) + 'px)';
}
}, false);
}
You can try this code but I am not sure why you are not using css transition. Without transition, your css transformY will flicker or you can use any JS library for this kind of effect.
window.addEventListener('scroll', () => {
const distance = window.pageYOffset;
let parent = document.getElementById('illustrationContainer');
let children = parent.getElementsByTagName('img');
for(let i = 0; i < children.length; i++) {
children[i].style.transform = `translateY(${distance * 1}px)`;
}
}, false);
.homeIllustration {
width: 100%;
height: auto;
position: absolute;
transition: transform .1s linear;
}
.rightSide {
display: inline-block;
position: absolute;
width: 70%;
margin-left: 70px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="illustrationContainer">
<img class="homeIllustration" id="homeIllustration5" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Planet.svg" style="opacity: 0;">
<img class="homeIllustration" id="homeIllustration5" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Planet.svg" style="transform: translateY(0px);">
<img class="homeIllustration" id="homeIllustration1" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Square.svg" style="transform: translateY(0px);">
<img class="homeIllustration" id="homeIllustration2" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Mountains.svg" style="transform: translateY(0px);">
<img class="homeIllustration" id="homeIllustration3" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Man.svg" style="transform: translateY(0px);">
<img class="homeIllustration" id="homeIllustration4" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Splashes.svg" style="transform: translateY(0px);">
<img class="homeIllustration" id="homeIllustration5" src="https://watwiljij.nu/wp-content/themes/generatepress/assets/WWJ_Home_Illustration_Plane.svg" style="transform: translateY(0px);">
</div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum, eum voluptate voluptas quaerat sequi, ipsa adipisci aliquam aspernatur, inventore consectetur beatae? Voluptates necessitatibus a labore. Quae debitis maiores asperiores officia dolorem suscipit dolorum, praesentium cupiditate quis, culpa ullam ipsam perferendis quam cum. Natus asperiores, beatae accusamus dolore soluta odio itaque ipsum perspiciatis repellendus exercitationem laboriosam, at obcaecati dolores cumque incidunt saepe, dolorem dicta? Doloribus deleniti, rerum mollitia minima exercitationem dolorum architecto ex asperiores impedit? Unde, perspiciatis deserunt. Molestiae sint, neque, voluptatem dignissimos sapiente nemo magni optio quo voluptate inventore quam laboriosam debitis? Nemo ex optio ipsam et iusto velit vero voluptas provident labore iste mollitia culpa excepturi possimus deserunt illo pariatur esse totam, quaerat fugit. Aut pariatur cupiditate aliquid ut quo et adipisci, ipsam facere earum commodi dicta qui sequi rerum error, porro consequuntur alias nisi perspiciatis nihil animi mollitia dolor ducimus! Eligendi rerum autem impedit debitis facilis et odit ut ducimus temporibus nemo repellendus, facere optio eum sunt libero ad atque architecto pariatur dicta harum laboriosam aliquid. Tenetur voluptatibus ut esse minus nobis voluptatem in, consequuntur nesciunt, alias voluptate eveniet inventore mollitia. Cupiditate non voluptatum dolorum sint praesentium! Sit vitae dignissimos, doloribus quam modi aperiam, inventore tempore dolores magnam maxime sequi vel reprehenderit! Consequuntur, inventore. Aut doloribus corporis natus tenetur! Corporis fugiat adipisci nam cum, tempore qui nostrum saepe quo a quia nulla dolorem repellat, iusto dolorum magnam tenetur vel veritatis laborum enim consequuntur cumque quae! Laboriosam odio ea expedita mollitia. Iure expedita atque placeat cupiditate, laudantium ab. Quo ipsa eius cum, nam ad enim est provident quae aut blanditiis nostrum, necessitatibus iste. Unde doloribus aliquam delectus magni quisquam officia dolor fugiat, magnam ipsum hic earum quaerat rerum tempora dolores maiores, laborum corporis? Temporibus facilis id error veritatis, repudiandae quis ab blanditiis enim, adipisci aliquid esse eos debitis reprehenderit?
</body>
</html>
I'm trying to test out a function in jquery where I have a vertical progress bar next to some text. The ideal function is that the value of the progress bar fills as the user scrolls down. I've got it to work perfectly except that the progress bar fills from the bottom to the top. I want it to fill from the top to the bottom, so the color drips down the progress bar.
Can someone help? Here's my code.
$(window).scroll(function() {
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
scrollPercent = (s / (d - c)) * 100;
var position = scrollPercent;
$("#progressbar").attr('value', position);
});
progress {
position: fixed;
top: 15px;
}
.vertical {
margin-top: 200px;
display: inline-block;
width: 20%;
height: 40px;
-webkit-transform: rotate(-90deg);
/* Chrome, Safari, Opera */
transform: rotate(-90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container mt-5">
<div class="row">
<div class="col-2">
<progress class="vertical" id="progressbar" value="0" max="100"></progress>
</div>
<div class="col-10">
<p class="card-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga obcaecati iusto, commodi hic doloremque cumque consequatur! Iste, quaerat. Officiis voluptas modi cupiditate similique quos obcaecati exercitationem saepe. Neque, molestias voluptatum. Nobis
illo commodi temporibus hic soluta quas odit aperiam dicta mollitia? Dolor neque similique delectus tenetur, officiis id consequatur molestias quaerat! Iste aspernatur laborum animi rem molestiae possimus eligendi laudantium! Tempore asperiores
repellendus dolore corrupti, deleniti, aperiam culpa vitae repellat, hic quaerat cum facilis laborum! Dignissimos sapiente temporibus quas beatae natus placeat error dolor, praesentium assumenda voluptatum adipisci blanditiis reprehenderit. Pariatur
ipsum eum molestiae non. Nisi a id voluptas? Iste, ad cum autem amet magni aut quidem neque laboriosam, cumque quaerat itaque necessitatibus velit dolores architecto optio reiciendis pariatur animi. Doloremque nemo quia cupiditate asperiores obcaecati,
nobis iure labore in deleniti perspiciatis necessitatibus accusamus ad cum provident libero. Repellendus et suscipit quaerat pariatur sed corporis dolores laborum voluptate odit ullam! Cum, quis voluptatum obcaecati quibusdam illum dolores dolor
nihil velit, officia nisi, harum est perferendis impedit laudantium optio. Hic ipsam dolorem eos sit assumenda veritatis quia quis accusamus molestiae soluta? Deserunt, beatae placeat! Quidem porro ipsam aspernatur facere tempore incidunt nisi
consequatur veritatis, tempora laborum a est asperiores adipisci. Asperiores eius sapiente quisquam, vero voluptatibus quae fugiat dicta maxime natus. Excepturi commodi quidem magnam ullam repudiandae, sapiente nesciunt iste veritatis iure ea
velit facere pariatur voluptas tempora assumenda! Magni provident voluptates quam voluptatem vel fugit illum eius nam praesentium accusamus! Suscipit reiciendis atque magnam. Laudantium exercitationem suscipit facilis nemo tempora consectetur
facere ipsam quo, incidunt voluptatibus est earum atque culpa nobis modi voluptatum vero nulla sed impedit error! Cum, dolores! Molestias vitae velit, nam amet magni eveniet et minus odio accusamus nulla nisi vel unde similique voluptatem consectetur
laborum enim magnam mollitia aspernatur? Ab eligendi soluta accusantium, laboriosam numquam nam?
</p>
<p class="card-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro velit, ullam sequi expedita neque tenetur aspernatur quisquam explicabo placeat, facilis eos inventore mollitia in iure dicta id sint hic perferendis. Reprehenderit fugit distinctio consequatur
quibusdam. Rerum perspiciatis natus ad, necessitatibus beatae minus nemo molestias sit, corporis quo dolor magnam sed totam dicta eveniet aperiam quia voluptas labore voluptatem quibusdam soluta? Porro dicta distinctio odio maxime tempora! Illum
repudiandae, quod eum obcaecati quae voluptates tempore ea ullam, earum assumenda, rem veniam amet beatae ratione magnam fugiat sapiente asperiores recusandae facere quos. Enim, est dolorum! Repellat perspiciatis explicabo ducimus quo iste vel,
deserunt quia eaque, dignissimos corrupti, in non eveniet minima voluptates delectus temporibus rem libero ad excepturi sunt accusamus unde ipsam. Laboriosam blanditiis dolor voluptatum tenetur. Quae maiores dignissimos molestias dolore beatae
fugiat veniam mollitia eius illo enim nesciunt est qui possimus cupiditate laboriosam, rerum minima. Sequi dolorem eius aliquam quia. Magnam eos quas molestiae unde beatae consequuntur maiores itaque aperiam, totam labore quidem dicta sunt pariatur
inventore recusandae ea! Eius eaque molestiae sunt, hic sed possimus? Tenetur commodi laborum necessitatibus. Unde debitis harum facere ab at! Quod accusantium explicabo, atque laboriosam rerum voluptatum. Tempore iusto distinctio hic est a, mollitia
ad explicabo. Veritatis, commodi! Corporis sint provident natus impedit nihil! Porro labore voluptates veniam ducimus! Culpa sint eos distinctio itaque tenetur esse expedita libero at dolorem assumenda vero molestiae repellat, provident laboriosam
tempore, earum placeat perferendis consequatur praesentium. Repellendus, laboriosam? Repellat, expedita sequi. Doloribus quod, magnam consequatur, numquam vel omnis iure doloremque obcaecati deleniti ullam adipisci perspiciatis aliquam, ratione
distinctio non expedita aperiam? A, saepe! Itaque nam at recusandae doloremque? Ipsa et aut dicta, obcaecati eligendi, tempore soluta aspernatur culpa hic sed, rem a voluptatum assumenda unde illum perspiciatis velit reprehenderit ratione distinctio
mollitia. Eligendi, assumenda iusto. Reiciendis, accusamus quam.
</p>
</div>
</div>
</div>
Use transform: rotate(90deg) instead of transform: rotate(-90deg)
rotate(-90deg) rotate your progress bar into anti-clockwise
0 to 180 is clockwise, 0 to -180 is counterclockwise. So, positive number rotates clockwise, negative - other way around.
More help on rotate()
$(window).scroll(function() {
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
scrollPercent = (s / (d - c)) * 100;
var position = scrollPercent;
$("#progressbar").attr('value', position);
});
progress {
position: fixed;
top: 15px;
}
.vertical {
margin-top: 200px;
display: inline-block;
width: 20%;
height: 40px;
-webkit-transform: rotate(90deg);
/* Chrome, Safari, Opera */
transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container mt-5">
<div class="row">
<div class="col-2">
<progress class="vertical" id="progressbar" value="0" max="100"></progress>
</div>
<div class="col-10">
<p class="card-text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga obcaecati iusto, commodi hic doloremque cumque consequatur! Iste, quaerat. Officiis voluptas modi cupiditate similique quos obcaecati exercitationem saepe. Neque, molestias voluptatum. Nobis
illo commodi temporibus hic soluta quas odit aperiam dicta mollitia? Dolor neque similique delectus tenetur, officiis id consequatur molestias quaerat! Iste aspernatur laborum animi rem molestiae possimus eligendi laudantium! Tempore asperiores
repellendus dolore corrupti, deleniti, aperiam culpa vitae repellat, hic quaerat cum facilis laborum! Dignissimos sapiente temporibus quas beatae natus placeat error dolor, praesentium assumenda voluptatum adipisci blanditiis reprehenderit. Pariatur
ipsum eum molestiae non. Nisi a id voluptas? Iste, ad cum autem amet magni aut quidem neque laboriosam, cumque quaerat itaque necessitatibus velit dolores architecto optio reiciendis pariatur animi. Doloremque nemo quia cupiditate asperiores obcaecati,
nobis iure labore in deleniti perspiciatis necessitatibus accusamus ad cum provident libero. Repellendus et suscipit quaerat pariatur sed corporis dolores laborum voluptate odit ullam! Cum, quis voluptatum obcaecati quibusdam illum dolores dolor
nihil velit, officia nisi, harum est perferendis impedit laudantium optio. Hic ipsam dolorem eos sit assumenda veritatis quia quis accusamus molestiae soluta? Deserunt, beatae placeat! Quidem porro ipsam aspernatur facere tempore incidunt nisi
consequatur veritatis, tempora laborum a est asperiores adipisci. Asperiores eius sapiente quisquam, vero voluptatibus quae fugiat dicta maxime natus. Excepturi commodi quidem magnam ullam repudiandae, sapiente nesciunt iste veritatis iure ea
velit facere pariatur voluptas tempora assumenda! Magni provident voluptates quam voluptatem vel fugit illum eius nam praesentium accusamus! Suscipit reiciendis atque magnam. Laudantium exercitationem suscipit facilis nemo tempora consectetur
facere ipsam quo, incidunt voluptatibus est earum atque culpa nobis modi voluptatum vero nulla sed impedit error! Cum, dolores! Molestias vitae velit, nam amet magni eveniet et minus odio accusamus nulla nisi vel unde similique voluptatem consectetur
laborum enim magnam mollitia aspernatur? Ab eligendi soluta accusantium, laboriosam numquam nam?
</p>
<p class="card-text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro velit, ullam sequi expedita neque tenetur aspernatur quisquam explicabo placeat, facilis eos inventore mollitia in iure dicta id sint hic perferendis. Reprehenderit fugit distinctio consequatur
quibusdam. Rerum perspiciatis natus ad, necessitatibus beatae minus nemo molestias sit, corporis quo dolor magnam sed totam dicta eveniet aperiam quia voluptas labore voluptatem quibusdam soluta? Porro dicta distinctio odio maxime tempora! Illum
repudiandae, quod eum obcaecati quae voluptates tempore ea ullam, earum assumenda, rem veniam amet beatae ratione magnam fugiat sapiente asperiores recusandae facere quos. Enim, est dolorum! Repellat perspiciatis explicabo ducimus quo iste vel,
deserunt quia eaque, dignissimos corrupti, in non eveniet minima voluptates delectus temporibus rem libero ad excepturi sunt accusamus unde ipsam. Laboriosam blanditiis dolor voluptatum tenetur. Quae maiores dignissimos molestias dolore beatae
fugiat veniam mollitia eius illo enim nesciunt est qui possimus cupiditate laboriosam, rerum minima. Sequi dolorem eius aliquam quia. Magnam eos quas molestiae unde beatae consequuntur maiores itaque aperiam, totam labore quidem dicta sunt pariatur
inventore recusandae ea! Eius eaque molestiae sunt, hic sed possimus? Tenetur commodi laborum necessitatibus. Unde debitis harum facere ab at! Quod accusantium explicabo, atque laboriosam rerum voluptatum. Tempore iusto distinctio hic est a, mollitia
ad explicabo. Veritatis, commodi! Corporis sint provident natus impedit nihil! Porro labore voluptates veniam ducimus! Culpa sint eos distinctio itaque tenetur esse expedita libero at dolorem assumenda vero molestiae repellat, provident laboriosam
tempore, earum placeat perferendis consequatur praesentium. Repellendus, laboriosam? Repellat, expedita sequi. Doloribus quod, magnam consequatur, numquam vel omnis iure doloremque obcaecati deleniti ullam adipisci perspiciatis aliquam, ratione
distinctio non expedita aperiam? A, saepe! Itaque nam at recusandae doloremque? Ipsa et aut dicta, obcaecati eligendi, tempore soluta aspernatur culpa hic sed, rem a voluptatum assumenda unde illum perspiciatis velit reprehenderit ratione distinctio
mollitia. Eligendi, assumenda iusto. Reiciendis, accusamus quam.
</p>
</div>
</div>
</div>
I've this code :
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('header span').animate({
top: '0'
}, 400, function() {
// Animation complete.
});
} else {
$('header span').animate({
top: '-90px'
}, 400, function() {
// Animation complete.
});
}
});
body {
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
padding: 50px 0;
background: lightblue;
text-align: center;
}
header span {
position: relative;
top: -90px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<span>TEST</span>
</header>
<main>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor soluta officia repudiandae inventore itaque reprehenderit consequuntur possimus quam aliquam sit neque quis provident, beatae cupiditate non vero, aliquid velit veniam.</div>
<div>Temporibus quo aut quidem molestiae odit mollitia nulla ratione, repellat itaque facilis quos, aspernatur illo, impedit perferendis qui soluta. Dicta perferendis, suscipit maiores iure aspernatur ab officiis, architecto a consequuntur.</div>
<div>Autem, quisquam eos aut! Totam mollitia rem maxime, error quo quam eos. Nisi quam vero quasi! Eius ab quis dicta aperiam, illum id, iste, ratione ducimus facilis, delectus dolorum aspernatur.</div>
<div>Enim sed illo animi culpa veniam excepturi, accusamus, voluptates nulla vitae impedit atque doloribus. Et, esse aperiam, dolorem quae odio quos quaerat repellendus numquam saepe error asperiores. Maiores, tenetur neque!</div>
<div>Perferendis et dicta, expedita esse accusamus voluptates nam, fugit id. Consequatur quos ipsam magnam cupiditate impedit, nemo, aut voluptatibus vel quae perspiciatis soluta sit laboriosam fugit illo, voluptate earum eveniet!</div>
<div>Ex quam modi rerum non doloribus, suscipit dolorum, at beatae, voluptatem odit illo deleniti nostrum veritatis saepe. Consequatur dolor consequuntur ea eum, aut omnis quidem, dignissimos quam! Perspiciatis, ratione, incidunt!</div>
<div>Laboriosam ipsam vel recusandae quia corporis cum a animi nulla ipsum amet! Maiores aperiam, iusto eum suscipit molestiae eveniet molestias blanditiis ut, sunt odio quibusdam sit eius ratione qui illum!</div>
<div>Voluptatum aspernatur necessitatibus eius inventore. Quod illo odio nostrum id sapiente quidem ad blanditiis minima cumque fuga aliquid repellendus omnis saepe reiciendis, repellat harum suscipit nemo nesciunt incidunt maiores beatae!</div>
<div>Sint alias culpa nostrum, velit praesentium veniam labore aliquam libero fuga, in nihil maxime. Sunt aut quidem ut deserunt iure assumenda optio, delectus laborum esse alias sed velit iste ullam!</div>
<div>Debitis odit quod, mollitia optio dolorum, quo eos similique dolor in, eius doloribus accusantium esse voluptate a ipsum? Ipsam cum voluptatem deserunt expedita molestiae itaque placeat adipisci reiciendis perferendis obcaecati.</div>
<div>Iste quas eius beatae illo impedit consectetur, vero, perspiciatis sit non, perferendis quasi. Necessitatibus expedita, totam libero, perferendis fuga ipsam et illo modi, sit iusto dolore quo, atque error reprehenderit?</div>
<div>Cum eligendi aliquid ea, sequi perferendis quibusdam magni eum, tenetur quia alias inventore quidem minima. Ad ipsum cumque voluptas incidunt culpa nobis officiis natus nam, ut, vitae excepturi possimus quibusdam?</div>
<div>Praesentium inventore officia, soluta laudantium rerum quia earum. Doloribus dignissimos suscipit soluta veniam facere ab exercitationem ad corrupti, pariatur eos ut maxime deleniti cum qui enim, similique accusantium quam officia!</div>
<div>Sit nobis, tenetur quod distinctio beatae blanditiis suscipit delectus ea molestiae? Eveniet, doloribus aliquam saepe voluptatem exercitationem incidunt, ad quaerat beatae sint dolores in quibusdam illo, ducimus omnis nemo magni.</div>
<div>Culpa perspiciatis, sapiente quis ipsam quisquam. Enim dolorum at maiores tempora commodi veniam officiis incidunt sapiente rerum, possimus, voluptates temporibus sit nulla autem deserunt cumque aspernatur nostrum doloremque minima. Vel.</div>
<div>Corporis, recusandae eaque qui quae. Corrupti cum, rem distinctio eligendi dolorum dignissimos culpa, error deserunt, amet iure repellat sint cupiditate, dicta molestias perferendis. Pariatur quas ipsum quis suscipit ipsam excepturi.</div>
<div>Nisi magni odit animi illo et ea earum nemo assumenda quod accusamus, asperiores tempora omnis dicta ab dolorum veritatis doloremque exercitationem iste sit nostrum. Cumque non quasi deleniti, rem deserunt!</div>
<div>Doloremque quasi et ab aliquid ullam ipsum, laboriosam molestiae natus iure architecto, repudiandae, deleniti enim explicabo quas optio sunt provident pariatur autem laborum rerum. Ab ipsam nostrum et qui natus!</div>
<div>Accusamus nobis eligendi labore dignissimos minus, ad in, dicta rem magnam facilis adipisci et aut, eos possimus ab quaerat ex quisquam atque quos molestiae. Velit minus voluptatum praesentium, et accusantium!</div>
<div>Minus, dolores, expedita eligendi maiores perspiciatis molestias assumenda nostrum beatae odit ratione optio iure id at commodi! Deleniti commodi ipsam at temporibus, corrupti qui atque esse tempore incidunt! Fugit, delectus.</div>
<div>Tempora consectetur laboriosam sint quas architecto itaque perspiciatis, necessitatibus, quibusdam nesciunt nobis hic accusamus, molestias nisi. Animi minima, soluta expedita nostrum, facilis, molestias aliquam voluptate adipisci doloribus, tenetur
sed? Repudiandae.</div>
<div>Atque voluptas animi possimus hic molestiae adipisci, fugiat autem recusandae, consequatur cumque aliquid, voluptatibus commodi labore vel porro explicabo iure quam harum assumenda praesentium. Ullam ducimus fugit iusto animi qui.</div>
<div>Itaque nihil quam architecto, cumque similique quo sed eaque ab. Quibusdam deleniti dignissimos soluta eligendi, in incidunt magnam iure magni neque cupiditate porro molestias facere, impedit, atque culpa alias ea!</div>
<div>Maiores magni reiciendis, tempore, consectetur unde quibusdam atque sequi natus deleniti officia quos incidunt, expedita ipsa dolorem deserunt molestiae quo eius accusantium laboriosam rem repudiandae. Ratione, voluptates cumque mollitia nisi.</div>
<div>Magni reiciendis pariatur est rerum quidem corrupti, dolorem error suscipit et dolores. Adipisci, id, nam. Deleniti totam perferendis doloremque, et id hic. Natus voluptas, neque optio ullam accusantium nobis non.</div>
<div>Aperiam dicta enim, amet numquam dolor in reiciendis, earum iure deserunt placeat, asperiores! Cupiditate amet ut, in labore sunt quibusdam eligendi distinctio at doloremque magni, fuga, vitae placeat reiciendis optio.</div>
<div>Neque molestias rem, mollitia hic suscipit expedita. Modi vitae itaque, cum magni, laboriosam mollitia dolorem eaque ex ipsa eos. Dicta dolorum necessitatibus eligendi molestiae nemo quia ipsa! Corrupti, architecto, reprehenderit.</div>
<div>Nam iste quas unde distinctio maiores voluptas laudantium deleniti laboriosam quaerat cumque, non totam architecto accusamus, omnis adipisci deserunt optio animi accusantium quis et repudiandae dolorum enim quod officiis. Eveniet?</div>
<div>Dolores odit reprehenderit cum nisi voluptate dolorum officiis debitis hic, minima iure, sunt doloribus. Molestias dolorum sequi suscipit tenetur repellendus eum nulla eaque iure magnam, doloribus quo fugiat repudiandae in!</div>
<div>Fugiat nulla, dolor atque voluptate ad debitis voluptates neque saepe, quam dicta. Ipsam quo dolore dignissimos alias at aut deserunt obcaecati fugiat quod! Deserunt nihil dolorem id at sed cum.</div>
<div>Magni nesciunt eaque, quas, vero similique maxime perspiciatis, odit sit dignissimos dolores quod voluptatem velit quisquam doloremque ad molestias distinctio commodi optio! Veniam, vero, debitis natus sit deserunt enim mollitia.</div>
<div>Obcaecati beatae quaerat, ad mollitia ullam nisi error? Qui non dolor sit tenetur ratione ipsam consequatur id similique velit harum. Nesciunt eos, vitae aut debitis iste, accusantium repudiandae ratione at.</div>
<div>Sequi consequuntur, quos veritatis, consectetur aspernatur, sunt, sit at repellat eveniet molestias odit dignissimos esse laborum distinctio inventore ratione nesciunt incidunt officia dolore fugit. Natus doloremque ex neque veniam quam?</div>
<div>Quisquam, eum blanditiis mollitia expedita, natus similique amet molestiae, explicabo fugit quasi aspernatur sed porro, placeat debitis fuga sapiente quidem animi maiores quod cumque eligendi corrupti iusto. Ut, voluptates, totam.</div>
<div>Minima voluptas officiis atque quos velit deleniti veniam error, cum ullam aspernatur non quidem voluptatibus illo doloribus dolorum autem. Atque possimus voluptas quod quaerat distinctio perferendis omnis cumque culpa beatae.</div>
<div>Perspiciatis numquam consequuntur fuga tenetur perferendis aperiam asperiores dolorem dolorum consequatur repudiandae, voluptate explicabo, tempora eaque, omnis maxime blanditiis fugiat molestias quam est consectetur illum officiis voluptatibus quo.
Veritatis, sint!</div>
<div>Dolores asperiores, fugiat ipsa ratione provident soluta. Ratione quibusdam earum maiores deleniti explicabo praesentium nemo itaque, laboriosam laborum vel quo quam ad pariatur eos atque nam! Obcaecati aliquam praesentium repellat.</div>
<div>Corporis iusto provident voluptatem sed voluptates, perferendis praesentium quo non nostrum ipsum sit, adipisci odit odio esse ducimus illo, qui in dolorum. Assumenda possimus consequuntur iure, vitae natus, ab adipisci?</div>
<div>Pariatur, nobis, nostrum ducimus quaerat officia maxime vel nisi illum aspernatur ab voluptatibus rerum at adipisci distinctio, deleniti facere quo fugit? Ipsum ut quod sunt sit voluptatem at, cumque quasi?</div>
<div>Nulla perspiciatis obcaecati necessitatibus dignissimos minus eligendi quae illum magnam quo inventore vero minima, distinctio accusantium aliquam, quam fugiat maiores. Voluptate fugit, excepturi doloribus tempora aperiam esse reiciendis, autem ab?</div>
<div>Error vitae dicta quis et cumque esse, voluptatibus doloremque incidunt ad quam rem quos numquam impedit. Iste enim eius, nesciunt laudantium deleniti amet commodi possimus aperiam et impedit, aliquam expedita?</div>
<div>Esse labore iusto atque commodi, aliquid aut! Excepturi repellat nisi pariatur animi tenetur labore quos deleniti maiores, ratione temporibus cumque et eveniet, perspiciatis, voluptas illo dolorem cum aliquam earum autem!</div>
<div>Officia dolorem esse eos adipisci atque, laudantium neque dicta dignissimos sapiente dolorum ipsum ut magnam aspernatur rerum, minus sunt vitae eum laborum animi maiores quaerat similique illo itaque repellat? Dicta.</div>
<div>Deleniti laudantium unde nam ipsum aliquid earum odio blanditiis praesentium laborum inventore. Natus aspernatur perferendis, doloribus fugit tenetur beatae corporis unde maiores nemo dolorem sint numquam, eligendi, eius sit earum?</div>
<div>Repellendus fugit molestias voluptatum, earum odit numquam alias, nemo debitis sequi nisi velit, esse veniam ea praesentium quas. Facilis consequuntur beatae aut, repellat laudantium molestias maxime dolor vitae ut cum.</div>
<div>Neque cumque possimus odit porro architecto vero ex, nihil repellat, mollitia suscipit nam nisi atque pariatur, eos voluptates. Sed reiciendis hic assumenda doloremque fuga, rem eos itaque voluptatum ea atque.</div>
<div>Dolorem inventore porro magni quis, incidunt ex enim beatae, repudiandae perspiciatis omnis maxime id harum voluptas minima excepturi vel nostrum labore aperiam rem, nemo praesentium. Dolore unde beatae aliquid tempora!</div>
<div>Non, tempora accusamus sit. Est iste necessitatibus fugit rerum, nobis. Aperiam vero ullam delectus a, nobis impedit sequi. Ipsum non sequi perferendis labore repudiandae quisquam quidem iure, fugiat corrupti! Adipisci.</div>
<div>Laboriosam vel atque quaerat facere doloribus saepe accusantium cum eligendi facilis, aperiam voluptatum, corrupti ipsam quam omnis molestias illum magni quis. Quidem porro mollitia maiores provident fugiat sunt eos quas?</div>
<div>Deserunt numquam, dolore quidem. Odit dolorem laboriosam deleniti maiores. Fuga reiciendis quis maxime eius aliquam, itaque impedit asperiores voluptas odit! Praesentium, blanditiis. Dignissimos harum, necessitatibus, illum molestiae distinctio cupiditate
fugit.</div>
</main>
When I scroll, the <span>Test</span> appears from top to bottom as I want.
But when I scroll to the top of the page, I want that span to move from bottom to top like its initial state.
Thanks for your help !
You have to stop the currently-running animation on the matched elements.
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header span').stop().animate({
top: '0'
}, 400, function() {
// Animation complete.
});
} else {
$('header span').stop().animate({
top: '-90px'
}, 400, function() {
// Animation complete.
});
}
});
body {
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
padding: 50px 0;
background: lightblue;
text-align: center;
}
header span {
position: relative;
top: -90px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<span>TEST</span>
</header>
<main>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor soluta officia repudiandae inventore itaque reprehenderit consequuntur possimus quam aliquam sit neque quis provident, beatae cupiditate non vero, aliquid velit veniam.</div>
<div>Temporibus quo aut quidem molestiae odit mollitia nulla ratione, repellat itaque facilis quos, aspernatur illo, impedit perferendis qui soluta. Dicta perferendis, suscipit maiores iure aspernatur ab officiis, architecto a consequuntur.</div>
<div>Autem, quisquam eos aut! Totam mollitia rem maxime, error quo quam eos. Nisi quam vero quasi! Eius ab quis dicta aperiam, illum id, iste, ratione ducimus facilis, delectus dolorum aspernatur.</div>
<div>Enim sed illo animi culpa veniam excepturi, accusamus, voluptates nulla vitae impedit atque doloribus. Et, esse aperiam, dolorem quae odio quos quaerat repellendus numquam saepe error asperiores. Maiores, tenetur neque!</div>
<div>Perferendis et dicta, expedita esse accusamus voluptates nam, fugit id. Consequatur quos ipsam magnam cupiditate impedit, nemo, aut voluptatibus vel quae perspiciatis soluta sit laboriosam fugit illo, voluptate earum eveniet!</div>
<div>Ex quam modi rerum non doloribus, suscipit dolorum, at beatae, voluptatem odit illo deleniti nostrum veritatis saepe. Consequatur dolor consequuntur ea eum, aut omnis quidem, dignissimos quam! Perspiciatis, ratione, incidunt!</div>
<div>Laboriosam ipsam vel recusandae quia corporis cum a animi nulla ipsum amet! Maiores aperiam, iusto eum suscipit molestiae eveniet molestias blanditiis ut, sunt odio quibusdam sit eius ratione qui illum!</div>
<div>Voluptatum aspernatur necessitatibus eius inventore. Quod illo odio nostrum id sapiente quidem ad blanditiis minima cumque fuga aliquid repellendus omnis saepe reiciendis, repellat harum suscipit nemo nesciunt incidunt maiores beatae!</div>
<div>Sint alias culpa nostrum, velit praesentium veniam labore aliquam libero fuga, in nihil maxime. Sunt aut quidem ut deserunt iure assumenda optio, delectus laborum esse alias sed velit iste ullam!</div>
<div>Debitis odit quod, mollitia optio dolorum, quo eos similique dolor in, eius doloribus accusantium esse voluptate a ipsum? Ipsam cum voluptatem deserunt expedita molestiae itaque placeat adipisci reiciendis perferendis obcaecati.</div>
<div>Iste quas eius beatae illo impedit consectetur, vero, perspiciatis sit non, perferendis quasi. Necessitatibus expedita, totam libero, perferendis fuga ipsam et illo modi, sit iusto dolore quo, atque error reprehenderit?</div>
<div>Cum eligendi aliquid ea, sequi perferendis quibusdam magni eum, tenetur quia alias inventore quidem minima. Ad ipsum cumque voluptas incidunt culpa nobis officiis natus nam, ut, vitae excepturi possimus quibusdam?</div>
<div>Praesentium inventore officia, soluta laudantium rerum quia earum. Doloribus dignissimos suscipit soluta veniam facere ab exercitationem ad corrupti, pariatur eos ut maxime deleniti cum qui enim, similique accusantium quam officia!</div>
<div>Sit nobis, tenetur quod distinctio beatae blanditiis suscipit delectus ea molestiae? Eveniet, doloribus aliquam saepe voluptatem exercitationem incidunt, ad quaerat beatae sint dolores in quibusdam illo, ducimus omnis nemo magni.</div>
<div>Culpa perspiciatis, sapiente quis ipsam quisquam. Enim dolorum at maiores tempora commodi veniam officiis incidunt sapiente rerum, possimus, voluptates temporibus sit nulla autem deserunt cumque aspernatur nostrum doloremque minima. Vel.</div>
<div>Corporis, recusandae eaque qui quae. Corrupti cum, rem distinctio eligendi dolorum dignissimos culpa, error deserunt, amet iure repellat sint cupiditate, dicta molestias perferendis. Pariatur quas ipsum quis suscipit ipsam excepturi.</div>
<div>Nisi magni odit animi illo et ea earum nemo assumenda quod accusamus, asperiores tempora omnis dicta ab dolorum veritatis doloremque exercitationem iste sit nostrum. Cumque non quasi deleniti, rem deserunt!</div>
<div>Doloremque quasi et ab aliquid ullam ipsum, laboriosam molestiae natus iure architecto, repudiandae, deleniti enim explicabo quas optio sunt provident pariatur autem laborum rerum. Ab ipsam nostrum et qui natus!</div>
<div>Accusamus nobis eligendi labore dignissimos minus, ad in, dicta rem magnam facilis adipisci et aut, eos possimus ab quaerat ex quisquam atque quos molestiae. Velit minus voluptatum praesentium, et accusantium!</div>
<div>Minus, dolores, expedita eligendi maiores perspiciatis molestias assumenda nostrum beatae odit ratione optio iure id at commodi! Deleniti commodi ipsam at temporibus, corrupti qui atque esse tempore incidunt! Fugit, delectus.</div>
<div>Tempora consectetur laboriosam sint quas architecto itaque perspiciatis, necessitatibus, quibusdam nesciunt nobis hic accusamus, molestias nisi. Animi minima, soluta expedita nostrum, facilis, molestias aliquam voluptate adipisci doloribus, tenetur sed? Repudiandae.</div>
<div>Atque voluptas animi possimus hic molestiae adipisci, fugiat autem recusandae, consequatur cumque aliquid, voluptatibus commodi labore vel porro explicabo iure quam harum assumenda praesentium. Ullam ducimus fugit iusto animi qui.</div>
<div>Itaque nihil quam architecto, cumque similique quo sed eaque ab. Quibusdam deleniti dignissimos soluta eligendi, in incidunt magnam iure magni neque cupiditate porro molestias facere, impedit, atque culpa alias ea!</div>
<div>Maiores magni reiciendis, tempore, consectetur unde quibusdam atque sequi natus deleniti officia quos incidunt, expedita ipsa dolorem deserunt molestiae quo eius accusantium laboriosam rem repudiandae. Ratione, voluptates cumque mollitia nisi.</div>
<div>Magni reiciendis pariatur est rerum quidem corrupti, dolorem error suscipit et dolores. Adipisci, id, nam. Deleniti totam perferendis doloremque, et id hic. Natus voluptas, neque optio ullam accusantium nobis non.</div>
<div>Aperiam dicta enim, amet numquam dolor in reiciendis, earum iure deserunt placeat, asperiores! Cupiditate amet ut, in labore sunt quibusdam eligendi distinctio at doloremque magni, fuga, vitae placeat reiciendis optio.</div>
<div>Neque molestias rem, mollitia hic suscipit expedita. Modi vitae itaque, cum magni, laboriosam mollitia dolorem eaque ex ipsa eos. Dicta dolorum necessitatibus eligendi molestiae nemo quia ipsa! Corrupti, architecto, reprehenderit.</div>
<div>Nam iste quas unde distinctio maiores voluptas laudantium deleniti laboriosam quaerat cumque, non totam architecto accusamus, omnis adipisci deserunt optio animi accusantium quis et repudiandae dolorum enim quod officiis. Eveniet?</div>
<div>Dolores odit reprehenderit cum nisi voluptate dolorum officiis debitis hic, minima iure, sunt doloribus. Molestias dolorum sequi suscipit tenetur repellendus eum nulla eaque iure magnam, doloribus quo fugiat repudiandae in!</div>
<div>Fugiat nulla, dolor atque voluptate ad debitis voluptates neque saepe, quam dicta. Ipsam quo dolore dignissimos alias at aut deserunt obcaecati fugiat quod! Deserunt nihil dolorem id at sed cum.</div>
<div>Magni nesciunt eaque, quas, vero similique maxime perspiciatis, odit sit dignissimos dolores quod voluptatem velit quisquam doloremque ad molestias distinctio commodi optio! Veniam, vero, debitis natus sit deserunt enim mollitia.</div>
<div>Obcaecati beatae quaerat, ad mollitia ullam nisi error? Qui non dolor sit tenetur ratione ipsam consequatur id similique velit harum. Nesciunt eos, vitae aut debitis iste, accusantium repudiandae ratione at.</div>
<div>Sequi consequuntur, quos veritatis, consectetur aspernatur, sunt, sit at repellat eveniet molestias odit dignissimos esse laborum distinctio inventore ratione nesciunt incidunt officia dolore fugit. Natus doloremque ex neque veniam quam?</div>
<div>Quisquam, eum blanditiis mollitia expedita, natus similique amet molestiae, explicabo fugit quasi aspernatur sed porro, placeat debitis fuga sapiente quidem animi maiores quod cumque eligendi corrupti iusto. Ut, voluptates, totam.</div>
<div>Minima voluptas officiis atque quos velit deleniti veniam error, cum ullam aspernatur non quidem voluptatibus illo doloribus dolorum autem. Atque possimus voluptas quod quaerat distinctio perferendis omnis cumque culpa beatae.</div>
<div>Perspiciatis numquam consequuntur fuga tenetur perferendis aperiam asperiores dolorem dolorum consequatur repudiandae, voluptate explicabo, tempora eaque, omnis maxime blanditiis fugiat molestias quam est consectetur illum officiis voluptatibus quo. Veritatis, sint!</div>
<div>Dolores asperiores, fugiat ipsa ratione provident soluta. Ratione quibusdam earum maiores deleniti explicabo praesentium nemo itaque, laboriosam laborum vel quo quam ad pariatur eos atque nam! Obcaecati aliquam praesentium repellat.</div>
<div>Corporis iusto provident voluptatem sed voluptates, perferendis praesentium quo non nostrum ipsum sit, adipisci odit odio esse ducimus illo, qui in dolorum. Assumenda possimus consequuntur iure, vitae natus, ab adipisci?</div>
<div>Pariatur, nobis, nostrum ducimus quaerat officia maxime vel nisi illum aspernatur ab voluptatibus rerum at adipisci distinctio, deleniti facere quo fugit? Ipsum ut quod sunt sit voluptatem at, cumque quasi?</div>
<div>Nulla perspiciatis obcaecati necessitatibus dignissimos minus eligendi quae illum magnam quo inventore vero minima, distinctio accusantium aliquam, quam fugiat maiores. Voluptate fugit, excepturi doloribus tempora aperiam esse reiciendis, autem ab?</div>
<div>Error vitae dicta quis et cumque esse, voluptatibus doloremque incidunt ad quam rem quos numquam impedit. Iste enim eius, nesciunt laudantium deleniti amet commodi possimus aperiam et impedit, aliquam expedita?</div>
<div>Esse labore iusto atque commodi, aliquid aut! Excepturi repellat nisi pariatur animi tenetur labore quos deleniti maiores, ratione temporibus cumque et eveniet, perspiciatis, voluptas illo dolorem cum aliquam earum autem!</div>
<div>Officia dolorem esse eos adipisci atque, laudantium neque dicta dignissimos sapiente dolorum ipsum ut magnam aspernatur rerum, minus sunt vitae eum laborum animi maiores quaerat similique illo itaque repellat? Dicta.</div>
<div>Deleniti laudantium unde nam ipsum aliquid earum odio blanditiis praesentium laborum inventore. Natus aspernatur perferendis, doloribus fugit tenetur beatae corporis unde maiores nemo dolorem sint numquam, eligendi, eius sit earum?</div>
<div>Repellendus fugit molestias voluptatum, earum odit numquam alias, nemo debitis sequi nisi velit, esse veniam ea praesentium quas. Facilis consequuntur beatae aut, repellat laudantium molestias maxime dolor vitae ut cum.</div>
<div>Neque cumque possimus odit porro architecto vero ex, nihil repellat, mollitia suscipit nam nisi atque pariatur, eos voluptates. Sed reiciendis hic assumenda doloremque fuga, rem eos itaque voluptatum ea atque.</div>
<div>Dolorem inventore porro magni quis, incidunt ex enim beatae, repudiandae perspiciatis omnis maxime id harum voluptas minima excepturi vel nostrum labore aperiam rem, nemo praesentium. Dolore unde beatae aliquid tempora!</div>
<div>Non, tempora accusamus sit. Est iste necessitatibus fugit rerum, nobis. Aperiam vero ullam delectus a, nobis impedit sequi. Ipsum non sequi perferendis labore repudiandae quisquam quidem iure, fugiat corrupti! Adipisci.</div>
<div>Laboriosam vel atque quaerat facere doloribus saepe accusantium cum eligendi facilis, aperiam voluptatum, corrupti ipsam quam omnis molestias illum magni quis. Quidem porro mollitia maiores provident fugiat sunt eos quas?</div>
<div>Deserunt numquam, dolore quidem. Odit dolorem laboriosam deleniti maiores. Fuga reiciendis quis maxime eius aliquam, itaque impedit asperiores voluptas odit! Praesentium, blanditiis. Dignissimos harum, necessitatibus, illum molestiae distinctio cupiditate fugit.</div>
</main>