Image animation resets page scroll on mobile devices - javascript

EDIT 2: I just figured it out. The overflow css property applied on the body is not being inherited by the slideshow div. Adding "overflow: hidden" to the slideshow div fixed it.
ORIGINAL POST
I have a webpage with an image slideshow. The slideshow is set to run every 5 seconds using setInterval and calling the below function:
function startSlideShow() {
console.log('starting slideshow');
const img = slideImages.shift();
img.style.zIndex = 0
slideImages.push(img);
slideImages[0].style.zIndex = 10;
slideImages[0].style.display = "block";
removePreviousImage(img);
}
The animation keyframe:
#keyframes slide {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
The structure of the page is:
Header
Slideshow
Other Content
The header "position: sticky", so it should always be visible.
The Problem: On mobile or responsive mode on browser dev tool, when I scroll down while the animation is running, the header is not visible, i.e it is ignoring the "position: sticky" css rule. Once the animation completes, the page resets the scroll position back to the top.
It works as expected on desktop, i.e the header is always visible at the top of the screen and the scroll position does not get reset.
I am still learning and I don't understand what is causing the issue and why only on mobile? Tried google but no luck, mostly because I am not sure what to search for.
EDIT:
Recreated the problem as per the code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Slideshow</title>
<style>
body {
min-height: 100%;
font-family: Helvetica,
Arial,
sans-serif;
overflow-x: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.preload * {
animation: none !important;
}
img {
max-width: 100%;
height: auto;
}
.main__overlay {
z-index: 200;
}
.image-slider__overlay {
z-index: 1000;
}
.header {
z-index: 2000;
}
.header {
text-transform: uppercase;
padding: var(--size1) var(--size0);
opacity: 0.9;
position: sticky;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
}
.image-slider {
position: relative;
}
.image-slider__img {
position: absolute;
top: 0;
left: 0;
animation-name: slide;
animation-duration: 3s;
}
.no-slide {
aspect-ratio: attr(width) / attr(height);
}
#keyframes slide {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
</style>
</head>
<body>
<body class="preload">
<header class="header">
<h1 class="header__logo">Earthen Karkhana</h1>
</header>
<div class="image-slider">
<div class="no-slide">
This div will be an image is the actual code. Image 1
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
<div class="image-slider__img">
This div will be an image is the actual code. Image 2
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
<div class="image-slider__img">
This div will be an image is the actual code. Image 3
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
<div class="image-slider__img">
This div will be an image is the actual code. Image 4
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit
inventore repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
</p>
</div>
</div>
<section class="projects__main">
<h2 class="projects-link--heading body_text">
Projects
</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi odit, dolore omnis voluptates, accusantium
architecto eos nulla totam facere eum numquam temporibus error. Saepe aliquid asperiores veritatis sit inventore
repudiandae.
Quam ut praesentium reprehenderit necessitatibus ab voluptatibus esse laborum enim, veniam exercitationem quia
autem cum nihil et officiis itaque vero quasi distinctio. Quidem, ad a ipsum nihil incidunt ipsa libero!
Autem reiciendis fugit quis, perspiciatis nihil sit aliquam impedit dicta placeat veritatis culpa voluptate nisi
aut consectetur unde, alias et fugiat quisquam dolor distinctio eos dolore non error! Id, optio.
Omnis excepturi delectus inventore ullam harum accusamus sed consequatur autem quo obcaecati mollitia corrupti
amet, eaque veritatis, sit dolorum voluptates id atque rem, ipsam officia? Architecto magni dignissimos sint
dolorem!
Doloremque enim nobis eum esse nihil. Fugiat nesciunt obcaecati omnis. Doloribus harum deserunt sapiente omnis
quasi aut voluptatum consequatur perferendis, tempora nulla blanditiis labore vitae provident repellendus,
eveniet sit quas.
Nemo, quos perspiciatis modi repudiandae delectus doloremque. Vero dolores blanditiis itaque consequatur minus
distinctio, sapiente corporis, suscipit ratione tenetur animi sit eius quod dolorem nobis sed pariatur tempora
natus ea.
Quam sequi distinctio adipisci dolor? Asperiores exercitationem eveniet eum architecto voluptates, tempore saepe
sint eius quisquam odit veritatis debitis eligendi ab impedit, officia nam! Libero tenetur ad consequuntur eos
natus.
Corporis pariatur eius velit ad sequi facere impedit quia laboriosam quos? Eum, labore minima temporibus placeat
sunt totam neque, quod harum facilis reiciendis doloribus aliquid dolor saepe distinctio expedita sint.
Repellat, ipsam! Omnis nihil maiores amet excepturi velit, deleniti minus voluptatibus quasi vel, magni aperiam
veritatis non asperiores, nisi dolorum hic eligendi ipsa? Omnis id esse hic non sed est!
Qui accusantium dignissimos natus corporis asperiores, perferendis eveniet ab et, consequuntur vitae officiis
nulla consequatur obcaecati magni corrupti nihil neque nam iste quidem! Libero eos est, beatae error praesentium
eligendi!
</p>
</section>
<script>
"use strict";
const slideImages = Array.from(document.querySelectorAll(".image-slider__img"));
// Wait for page to load before starting slideshow
window.addEventListener('load', (e) => {
document.querySelector("body").classList.remove("preload");
// slideshow should only run on index page
if (document.querySelectorAll(".image-slider__img").length == 0) return;
// Static image not required to be visible once slide images are loaded in
setTimeout(() => document.querySelector(".no-slide").style.opacity = 0, 8000);
slideShow();
});
function slideShow() {
slideImages.forEach((img, index) => {
img.style.display = "none";
});
console.log(slideImages);
let animationInterval = setInterval(startSlideShow, 5000);
}
function startSlideShow() {
console.log('starting slideshow');
const img = slideImages.shift();
img.style.zIndex = 0
slideImages.push(img);
slideImages[0].style.zIndex = 10;
slideImages[0].style.display = "block";
removePreviousImage(img);
}
function removePreviousImage(img) {
setTimeout(function () { img.style.display = "none" }, 3000);
}
</script>
</body>
</html>
If viewed in responsive mode in dev tools the page layout changes when the animation is running, but that does not happen on desktop mode.
In desktop mode, resizing the browser to match width of a mobile device does not trigger the problem.

I guess your browser doesnt support position : sticky; try to use another browsers like chrome .
‌‌‌‌‌‌
and I highly recommend You better to use "browser-prefixes" .
You can read about "browser-prefixes" in :
https://www.thoughtco.com/css-vendor-prefixes-3466867

Related

When I am centering jQuery Accordion it is transferring the next paragraph to it's upper side

I am trying to center a accordion. At first I tried with margin: auto; but it was not centered. Then I tried with left: 50%; top: 50%; transform: translate(-50%, -50%); and it worked but I found something wrong. There was a paragraph after accordion and it was placed before the accordion.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.area {
font-size: 20px;
color: red;
text-align: center;
margin: 2% 0;
}
/* ========================== Accordion ==================================== */
.accordion {
position: absolute;
width: 70%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI</title>
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.css">
<link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.structure.css">
<link rel="stylesheet" href="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.theme.css">
</head>
<body>
<p class="area">---------------------------- Accordion ----------------------------</p>
<div class="accordion">
<h2 class="accordion-title">Web Design</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
<h2 class="accordion-title">Web Development</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
<h2 class="accordion-title">Programming</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
<h2 class="accordion-title">Wordpress Development</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
<h2 class="accordion-title">Digital Marketing</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi neque laborum sed repellat! Nemo dignissimos aliquid facilis aspernatur error neque repellat reiciendis praesentium eligendi iste perspiciatis quia ut voluptatibus, unde id, eaque libero
corporis officia explicabo, doloremque vero culpa labore! Quae amet impedit maxime aspernatur nemo voluptates repudiandae minus, laborum dolores aperiam facilis, dolor ipsa tempore, illum quis possimus? Sit omnis minima velit recusandae debitis
reiciendis commodi nulla perferendis est dolore consectetur porro, aut quam quidem quod aperiam, maxime, totam odit laboriosam tempore facere rem. Labore ex asperiores animi, perferendis sequi error! Ad iste exercitationem voluptate sint sapiente
ipsum? A!</p>
</div>
</div>
<p class="area">----------------------------------------------------------------------</p>
<!-- ------------------------- JavaScript Start ---------------------------------------- -->
<script src="./jquery-3.6.0.js"></script>
<script src="./jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
// --------------------------- Accordion ------------------------------------
$(".accordion").accordion();
});
</script>
<!-- ------------------------- JavaScript End ---------------------------------------- -->
</body>
</html>
There was a paragraph before and after the accordion. But after centering they took place at the top side.
I downloaded the jQuery and the jQuery ui file. jQuery version: 3.6.0 and jQuery ui version: 1.12.1.
How can I fix this problem?
You can use css flex. It will resolve your problem. All you have to do is to wrap the accordian div with another div.
Like,
<div class="wrapper">
<div class="accordion">
.
.
.
</div>
<div>
in css
.wrapper{
justify-content: center;
display: flex;
}
.accordian{
width: 70%;
}
Please remove all other css properties from accordian class. It should work.

Footer only appears on scroll with offset

I am having some issues with offseting the footer ID with javascript
Transform creates a new local coordinate system(W3C Spec), position: fixed is fixed to the origin of scrollbar content container ( main ), i.e. the left: 0, top: 0 point.
This is why I need to register a scroll listener and apply offsets to the fixed elements.
The problem I'm having is that the footer only appears on scroll, I want it to be in position on load like my header - otherwise everything works perfectly
I am still a beginner with Javascript, hoping for some suggestions
var fixedElem = document.getElementById('fixed');
var scrollbar = Scrollbar.init(
document.getElementById('scroll'),
);
scrollbar.addListener(function(status) {
var offset = status.offset;
fixed.style.top = offset.y + 'px';
fixed.style.left = offset.x + 'px';
footer.style.top = (offset.y + document.getElementById('scroll').clientHeight - footer.clientHeight) + 'px';
});
* {
padding: 0;
margin: 0;
}
#scroll {
width: 500px;
height: 100vh;
}
#fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: skyblue;
text-align: center;
}
#footer {
position: fixed;
top: 100%;
left: 0;
width: 100%;
background: skyblue;
text-align: center;
}
#content {
padding: 40px 0;
font-size: 2rem;
height: 100vh;
background: orange;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/idiotWu/smooth-scrollbar/master/dist/smooth-scrollbar.js"></script>
</head>
<body>
<main id="scroll">
<header id="fixed">
<h1>A fixed header</h1>
</header>
<article id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio amet, laudantium et ex, maiores labore minima quis incidunt quam magnam molestias, temporibus commodi! Laborum ipsam et aut quibusdam veniam animi.</p>
<p>Illo, obcaecati modi laudantium, impedit ab dolorem optio sint fuga nisi, est earum, aliquam! Nam officia doloribus ad, facere architecto voluptatem labore, minima dicta dignissimos cumque ut assumenda, natus et!</p>
<p>Odio velit vitae nisi consectetur molestiae repudiandae nemo quia qui in voluptatibus rerum iusto minus atque accusamus, autem, expedita incidunt magni voluptate itaque iure et cupiditate? Praesentium consectetur nesciunt at!</p>
<p>Hic obcaecati laboriosam impedit doloribus numquam officia atque quia voluptatem deleniti sint ipsum debitis excepturi modi non tenetur corporis maxime magni aliquid, facere, saepe omnis, iusto architecto, aspernatur iste. Quae?</p>
<p>Iste voluptatum rerum atque nesciunt sequi, dolore dicta error. Voluptas, quidem. Quasi aspernatur, culpa aliquid aperiam maxime sed voluptatum, saepe quis perferendis nulla sint possimus cumque, magnam voluptates hic accusantium?</p>
<p>Ipsum, voluptates rerum repellendus illo fugiat, non aspernatur iure accusamus ullam recusandae quos? Veritatis accusantium, laudantium possimus rem, pariatur maxime itaque mollitia eos sapiente illum dolor adipisci ratione laborum iure.</p>
<p>Laboriosam eius ipsum recusandae fuga aut nobis aperiam, veritatis ullam quod voluptatibus voluptatem voluptates labore quisquam ut tempora blanditiis cum, eaque illo nam sapiente autem debitis! Unde, quod necessitatibus cum?</p>
<p>Sapiente iure distinctio vel qui enim, molestiae rerum fugit at non voluptate numquam doloremque a, obcaecati fugiat et debitis, magni alias eveniet cupiditate veritatis natus voluptates nostrum reprehenderit. Quidem, quam.</p>
<p>Id fugiat at tenetur, architecto enim inventore accusamus asperiores quod! Dicta modi omnis sunt, laboriosam expedita et, ullam vel culpa odit consequuntur nobis provident id excepturi. Distinctio veniam, fuga temporibus?</p>
<p>Voluptate soluta, sapiente quaerat, nulla iste similique adipisci natus amet. Deleniti perspiciatis, qui saepe, reprehenderit vero excepturi quo beatae at autem sed repellendus maxime repudiandae, tempore obcaecati similique! Distinctio, consequuntur!</p>
</article>
<footer id="footer">
<h1>A fixed footer</h1>
</footer>
</main>
</body>
</html>
You are setting the top offset of the footer initially to 100%. That way, the footer just disappears just right below the bottom. Substract the height from the view height and you'll see it.
#footer {
...
top: calc(100vh - 37px);
...
}
Another way is to initialize the offset yourself manually:
function setOffset(status) {
var offset = status.offset;
fixed.style.top = offset.y + 'px';
fixed.style.left = offset.x + 'px';
footer.style.top = (offset.y + document.getElementById('scroll').clientHeight - footer.clientHeight) + 'px';
}
scrollbar.addListener(setOffset);
setOffset({ offset: { y: 0 }});
Nevertheless there is also position: sticky;, which is quite useful for headers and footers. In that case you would only need to set the scrollbar to the #content. I didn't get it to work properly in combination with the scrollbar, but maybe you want to think about it. (SEE EDIT)
var fixedElem = document.getElementById('fixed');
var scrollbar = Scrollbar.init(
document.getElementById('scroll'),
);
function setOffset(status) {
var offset = status.offset;
fixed.style.top = offset.y + 'px';
fixed.style.left = offset.x + 'px';
footer.style.top = (offset.y + document.getElementById('scroll').clientHeight - footer.clientHeight) + 'px';
}
scrollbar.addListener(setOffset);
//setOffset({ offset: { y: 0 }});
* {
padding: 0;
margin: 0;
}
#scroll {
width: 500px;
height: 100vh;
}
#fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: skyblue;
text-align: center;
}
#footer {
position: fixed;
top: calc(100vh - 37px);
left: 0;
width: 100%;
background: skyblue;
text-align: center;
}
#content {
padding: 40px 0;
font-size: 2rem;
height: 100vh;
background: orange;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/idiotWu/smooth-scrollbar/master/dist/smooth-scrollbar.js"></script>
</head>
<body>
<main id="scroll">
<header id="fixed">
<h1>A fixed header</h1>
</header>
<article id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio amet, laudantium et ex, maiores labore minima quis incidunt quam magnam molestias, temporibus commodi! Laborum ipsam et aut quibusdam veniam animi.</p>
<p>Illo, obcaecati modi laudantium, impedit ab dolorem optio sint fuga nisi, est earum, aliquam! Nam officia doloribus ad, facere architecto voluptatem labore, minima dicta dignissimos cumque ut assumenda, natus et!</p>
<p>Odio velit vitae nisi consectetur molestiae repudiandae nemo quia qui in voluptatibus rerum iusto minus atque accusamus, autem, expedita incidunt magni voluptate itaque iure et cupiditate? Praesentium consectetur nesciunt at!</p>
<p>Hic obcaecati laboriosam impedit doloribus numquam officia atque quia voluptatem deleniti sint ipsum debitis excepturi modi non tenetur corporis maxime magni aliquid, facere, saepe omnis, iusto architecto, aspernatur iste. Quae?</p>
<p>Iste voluptatum rerum atque nesciunt sequi, dolore dicta error. Voluptas, quidem. Quasi aspernatur, culpa aliquid aperiam maxime sed voluptatum, saepe quis perferendis nulla sint possimus cumque, magnam voluptates hic accusantium?</p>
<p>Ipsum, voluptates rerum repellendus illo fugiat, non aspernatur iure accusamus ullam recusandae quos? Veritatis accusantium, laudantium possimus rem, pariatur maxime itaque mollitia eos sapiente illum dolor adipisci ratione laborum iure.</p>
<p>Laboriosam eius ipsum recusandae fuga aut nobis aperiam, veritatis ullam quod voluptatibus voluptatem voluptates labore quisquam ut tempora blanditiis cum, eaque illo nam sapiente autem debitis! Unde, quod necessitatibus cum?</p>
<p>Sapiente iure distinctio vel qui enim, molestiae rerum fugit at non voluptate numquam doloremque a, obcaecati fugiat et debitis, magni alias eveniet cupiditate veritatis natus voluptates nostrum reprehenderit. Quidem, quam.</p>
<p>Id fugiat at tenetur, architecto enim inventore accusamus asperiores quod! Dicta modi omnis sunt, laboriosam expedita et, ullam vel culpa odit consequuntur nobis provident id excepturi. Distinctio veniam, fuga temporibus?</p>
<p>Voluptate soluta, sapiente quaerat, nulla iste similique adipisci natus amet. Deleniti perspiciatis, qui saepe, reprehenderit vero excepturi quo beatae at autem sed repellendus maxime repudiandae, tempore obcaecati similique! Distinctio, consequuntur!</p>
</article>
<footer id="footer">
<h1>A fixed footer</h1>
</footer>
</main>
</body>
</html>
EDIT:
I made the experience it's a good choice to always prefer css solutions to js solutions, since it's a lot less buggy and annoying. So here I added a solo css solution for the header and footer problem. NOTE: I also edited the html to do so:
var scrollbar = Scrollbar.init(
document.getElementById('scroll'),
);
* {
padding: 0;
margin: 0;
}
body {
overflow: hidden;
}
.container {
width: 500px;
height: 100vh;
}
header {
position: sticky;
height: 40px;
top: 0;
background: skyblue;
text-align: center;
z-index: 99;
}
footer {
position: sticky;
height: 40px;
bottom: 0;
background: skyblue;
text-align: center;
}
main {
font-size: 2rem;
/* substract header and footer size */
height: calc(100% - 80px);
overflow: auto;
background: orange;
}
article {
padding: 40px 0;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/idiotWu/smooth-scrollbar/master/dist/smooth-scrollbar.js"></script>
</head>
<body>
<div class="container">
<header>
<h1>A fixed header</h1>
</header>
<main id="scroll">
<article id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio amet, laudantium et ex, maiores labore minima quis incidunt quam magnam molestias, temporibus commodi! Laborum ipsam et aut quibusdam veniam animi.</p>
<p>Illo, obcaecati modi laudantium, impedit ab dolorem optio sint fuga nisi, est earum, aliquam! Nam officia doloribus ad, facere architecto voluptatem labore, minima dicta dignissimos cumque ut assumenda, natus et!</p>
<p>Odio velit vitae nisi consectetur molestiae repudiandae nemo quia qui in voluptatibus rerum iusto minus atque accusamus, autem, expedita incidunt magni voluptate itaque iure et cupiditate? Praesentium consectetur nesciunt at!</p>
<p>Hic obcaecati laboriosam impedit doloribus numquam officia atque quia voluptatem deleniti sint ipsum debitis excepturi modi non tenetur corporis maxime magni aliquid, facere, saepe omnis, iusto architecto, aspernatur iste. Quae?</p>
<p>Iste voluptatum rerum atque nesciunt sequi, dolore dicta error. Voluptas, quidem. Quasi aspernatur, culpa aliquid aperiam maxime sed voluptatum, saepe quis perferendis nulla sint possimus cumque, magnam voluptates hic accusantium?</p>
<p>Ipsum, voluptates rerum repellendus illo fugiat, non aspernatur iure accusamus ullam recusandae quos? Veritatis accusantium, laudantium possimus rem, pariatur maxime itaque mollitia eos sapiente illum dolor adipisci ratione laborum iure.</p>
<p>Laboriosam eius ipsum recusandae fuga aut nobis aperiam, veritatis ullam quod voluptatibus voluptatem voluptates labore quisquam ut tempora blanditiis cum, eaque illo nam sapiente autem debitis! Unde, quod necessitatibus cum?</p>
<p>Sapiente iure distinctio vel qui enim, molestiae rerum fugit at non voluptate numquam doloremque a, obcaecati fugiat et debitis, magni alias eveniet cupiditate veritatis natus voluptates nostrum reprehenderit. Quidem, quam.</p>
<p>Id fugiat at tenetur, architecto enim inventore accusamus asperiores quod! Dicta modi omnis sunt, laboriosam expedita et, ullam vel culpa odit consequuntur nobis provident id excepturi. Distinctio veniam, fuga temporibus?</p>
<p>Voluptate soluta, sapiente quaerat, nulla iste similique adipisci natus amet. Deleniti perspiciatis, qui saepe, reprehenderit vero excepturi quo beatae at autem sed repellendus maxime repudiandae, tempore obcaecati similique! Distinctio, consequuntur, END!</p>
</article>
</main>
<footer>
<h1>A fixed footer</h1>
</footer>
</div>
</body>
</html>

Make element fixed when past scrolled

how can I give an element with class .navbar fixed position and make it stay on top of the viewport as long as the user scrolls past it using JQuery. Is it possible to do?
Are you looking to pin the navbar when you reach the top of the element while scrolling?
CSS
#navbar.sticky {
position: fixed;
top: 0;
}
JS
var navbar = document.getElementById('navbar'),
navbarOffset = navbar.getBoundingClientRect();
window.addEventListener('scroll', function(e){
var offsetTop = navbarOffset.top;
if(window.pageYOffset > offsetTop){
navbar.classList.add('sticky');
}else{
navbar.classList.remove('sticky');
}
});
DEMO
If you don't need to support IE, you can achieve this by using CSS selector position: sticky on the navigation bar.
body {
height: 2000px;
}
.header {
height: 60px;
background: #0099ff;
position: sticky;
top: 15px;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur corrupti harum adipisci inventore quisquam? Impedit fugit ratione numquam debitis, sed molestiae nostrum dolor hic a cumque perspiciatis nesciunt dolorum similique corrupti explicabo harum accusamus eaque magni quibusdam ad autem illum eligendi. Minus amet a labore libero beatae, molestias. Id veritatis dolorum commodi quis porro libero rem magnam cum itaque blanditiis illum maxime non voluptas esse, saepe qui quia sapiente nostrum fugiat inventore eius natus quisquam quod dolore. Animi, in cumque earum, at ullam ratione repellat inventore asperiores ab et consequatur optio distinctio, ipsa beatae autem repudiandae consequuntur nesciunt voluptatem cum.<p>
<header class="header"></header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur corrupti harum adipisci inventore quisquam? Impedit fugit ratione numquam debitis, sed molestiae nostrum dolor hic a cumque perspiciatis nesciunt dolorum similique corrupti explicabo harum accusamus eaque magni quibusdam ad autem illum eligendi. Minus amet a labore libero beatae, molestias. Id veritatis dolorum commodi quis porro libero rem magnam cum itaque blanditiis illum maxime non voluptas esse, saepe qui quia sapiente nostrum fugiat inventore eius natus quisquam quod dolore. Animi, in cumque earum, at ullam ratione repellat inventore asperiores ab et consequatur optio distinctio, ipsa beatae autem repudiandae consequuntur nesciunt voluptatem cum.<p>

Editing List elements in side menu

i have created a side menu bar with some bit of css and java script but when i tried to edit my list elements to fit the width of the side bar they just start far from the margin. where did i go wrong or what have i missed?
// JavaScript Document//
$('.nav-side .nav-toggle').on('click', function(e){
e.preventDefault();
$(this).parent().toggleClass('nav-open');
});
#charset "utf-8";
body
{
font: 16px "Helvetica",sans-serif;
line-height: 1.4;
font-weight: 200;
background-color: #563838;
}
.wrapper
{
margin: 0 auto;
width: 1160px;
text-align: center;
position: relative;
top: 230px;
}
.nav-side
{
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
max-width: 250px;
background-color: rgba(8, 120, 164, 0.9);
box-sizing: border-box;
color: brown;
margin-left: -250px;
transition: margin 600ms ease-in-out;
}
.nav-side.nav-open
{
margin-left: 0;
box-shadow: 1px 1px 3px rgba(0,0,0,.1);
}
.nav-side ul
{
list-style: none
}
.nav-side ul li
{
height: 70px;
background-color: antiquewhite;
left: 0;
}
.nav-toggle
{
position: absolute;
right: -70px;
top: 10px;
width: 70px;
height: 70px;
background-color: rgba(30, 207, 214, 0.1);
line-height: 70px;
text-decoration: none;
text-align: center;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
box-shadow: 1px 0 3px rgba(0,0,0, .1);
}
.nav-toggle:hover
{
background-color: #1ecfd6;
cursor: pointer;
}
.nav-toggle:before
{
content: "🙇";
font-weight:900;
color: white;
font-size: 32px;
padding-left: 5px;
}
.nav-side.nav-open .nav-toggle:before
{
content: "🙆";
right: 0;
}
.logo
{
width: 100%;
height: 225px;
text-align: center;
position: fixed;
background-color: #272424;
top: 0;
left: 0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flavour Dome</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil ia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil mollitia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iure, voluptatum sequi dolorem numquam ullam! Tempore error quos, nobis sapiente porro nihil mollitia ut optio! Animi modi, totam magnam adipisci minus, nesciunt quam cum repudiandae aspernatur. Quod, dolor veritatis perferendis repellat pariatur quae! Molestiae repudiandae maxime impedit ad, eum est!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit aliquam id fugiat, velit veritatis esse! Ipsa tempore quasi fugit, incidunt, dignissimos rerum deserunt possimus aspernatur corporis iusto eligendi numquam aliquam repellat alias magni ullam, nobis, placeat a. Similique odio, nesciunt est officiis ratione voluptatem tempora dicta quod vero. Amet sequi quas repellat aliquam illo totam dolorum, dolore eaque porro commodi odio vitae ex! Odit debitis excepturi necessitatibus esse, velit rerum? Molestiae, earum illum rem quas maiores provident adipisci perspiciatis porro? Consequuntur ratione, velit doloribus unde, necessitatibus corrupti sunt iusto numquam, architecto ex provident hic rem. Aspernatur a amet expedita, ad repellat voluptatem laboriosam, blanditiis deserunt quis molestiae quae, hic perferendis in totam optio vero. Accusamus aut beatae id sed, omnis dicta rerum repudiandae nostrum minus, illum nemo non accusantium perferendis ratione enim ea quas veritatis vero odit distinctio facilis assumenda harum. Atque at ex ut ipsum fugit deserunt inventore, excepturi. Consequuntur, iure tempore nisi, similique, harum dignissimos, vitae temporibus blanditiis veritatis saepe rerum repellat. Incidunt sequi, voluptate asperiores quaerat dolores numquam esse obcaecati saepe unde aliquid beatae odio mollitia vero. Numquam voluptate provident molestiae error labore, fugit consequatur incidunt saepe maxime quis, molestias perspiciatis libero eaque ipsum impedit! Asperiores, doloremque!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis minus itaque odit atque, accusamus amet, nulla magnam beatae quidem quasi, earum. Praesentium facilis enim maxime aspernatur cumque repellendus dolore alias facere magni, unde incidunt explicabo minima culpa, modi voluptate ad.</p>
</div>
<div class="logo"><img src="../../Pictures/fd logo.png" alt="Flavour Dome"/></div>
<nav class="nav-side" nav-open>
<ul>
<li>
Home
</li>
<li>
Menu
</li>
<li>
Store
</li>
<li>
Account
</li>
<li>
Shopping Cart
</li>
</ul>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
How can i get my list elements fitting the width of my side menu instead of them starting far from the left margin?
Remove default padding and margin from ul tag, most of tags consist of default styling same here ul tag has default styling for both margin and padding and that's why your menu has that spacing.
Default ul styling,
ul{
display: block;
list-style-type: disc;
margin-top: 1em;
margin-bottom: 1 em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}
Make this changes in your code.
.nav-side ul {
list-style: none;
padding:0; /* Add this */
margin:0;
}
You need work on little bit on CSS styling, modify the following selector as suggested.
.nav-side ul
{
list-style: none;
padding:10px;
margin: 0;
background-color: antiquewhite;
}

Sticky headers following their backgrounds on scroll - pure JS

I am a beginner in JS. And I've got a task to create a column consisting of several blocks. Each block should have its header. Each header should be of a different color. On scroll when the next header reaches the top, it should stick to the top and change the background color of the preceding header to the color of the header that recently came to the top. How can I do this using pure JS and taking into account responsiveness and adopting to landscape direction?
sample gif
Thank you
UPD: So far, I've got the following code done. When I run it on my laptop it goes more or less fine. But as soon as I resize the window the sticky header escapes to the right. What is the secret that I missed there?
! function(name, definition) {
if (typeof module != 'undefined' && module.exports) module.exports = definition();
else if (typeof define == 'function') define(definition);
else this[name] = definition();
}('sticky', function() {
return function sticky(el, top, options) {
var requiredOriginalStyles = ['position', 'top', 'left', 'z-index'];
var requiredTop = top || 0;
var originalRect = calcRect(el);
var styles = {
position: 'fixed',
top: requiredTop + 'px',
left: originalRect.left + 'px',
// width: originalRect.width + 'px',
'z-index': 9999
}
if (options && options.enforceWidth) {
styles.width = originalRect.width + 'px';
}
var originalStyles = {}
requiredOriginalStyles.forEach(function(key) {
originalStyles[key] = el.style[key];
});
var onscroll;
if (window.onscroll) {
onscroll = window.onscroll;
}
window.onscroll = function(event) {
if (getWindowScroll().top > originalRect.top - requiredTop) {
for (key in styles) {
el.style[key] = styles[key];
}
} else {
for (key in originalStyles) {
el.style[key] = originalStyles[key];
}
}
onscroll && onscroll(event)
}
}
function calcRect(el) {
var rect = el.getBoundingClientRect();
var windowScroll = getWindowScroll()
return {
left: rect.left + windowScroll.left,
top: rect.top + windowScroll.top,
width: rect.width,
height: rect.height
}
}
function getWindowScroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop,
left: window.pageXOffset || document.documentElement.scrollLeft
}
}
});
var headers = document.querySelectorAll('.header')
Array.prototype.forEach.call(headers, function(header) {
sticky(header);
});
body {
height: 2000px;
margin: 0px;
background: #fff;
color: #333;
font: 14px/2 Roboto, Verdana, sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section:first-child {
margin-top: 50px;
}
.header--initial {
background: yellow linear-gradient(to right, grey, transparent, grey);
}
.header--main-start {
background: grey linear-gradient(to right, grey, yellow);
}
.header--main-end {
background: yellow linear-gradient(to right, yellow, grey);
}
.header--final {
background: grey linear-gradient(to right, yellow, transparent, yellow);
}
p {
padding: 10px;
}
.header {
width: 50%;
height: 50px;
margin: auto;
background-color: #333;
}
.placeholder {
height: 300px;
width: 50%;
margin: auto;
overflow: auto;
}
<section>
<div class="header header--initial"></div>
<div class="placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum veritatis dolorem ducimus atque cumque accusantium accusamus aliquam excepturi nulla illo corrupti vitae repellendus quod, molestias esse est nisi, omnis odit.</p>
<p>Soluta autem, aut voluptate quo debitis quidem exercitationem quisquam nostrum accusamus aliquam perspiciatis nobis dolores est dolorum provident! Asperiores explicabo fugit, unde eveniet ut nesciunt autem molestiae nam totam fuga.</p>
<p>Vel nisi a dolorem itaque eaque mollitia ipsum repellat modi placeat, eveniet consectetur officia veniam ab esse, adipisci quia unde excepturi consequuntur expedita quas! Sed porro sunt soluta totam delectus!</p>
</div>
</section>
<section>
<div class="header header--main-start"></div>
<div class="placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum qui quidem rem ducimus, labore, id praesentium error quasi nobis saepe illo consequuntur voluptatum dolores illum facere, itaque dicta eveniet, quod.</p>
<p>Expedita dolore vel odit est nemo quis nihil ipsam quo vitae repellendus ex optio illo magnam quidem a ullam dolores reiciendis facilis deserunt eligendi cum, sit eaque? Et, nam odio!</p>
</div>
</section>
<section>
<div class="header header--main-end"></div>
<div class="placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum distinctio nobis excepturi sunt voluptates, saepe nam error laudantium velit autem quaerat placeat quisquam est dolore cum quidem, in ad sit!</p>
<p>Ex impedit deserunt, quibusdam ipsam blanditiis sunt tempore ab aut? Cum assumenda iure minus fugiat, rem nemo alias voluptatem, ad neque temporibus blanditiis aliquam earum praesentium vero labore ducimus, a.</p>
<p>Velit, suscipit officiis. Praesentium, explicabo similique maiores repellendus. Cupiditate voluptate corporis nisi doloremque aspernatur, autem aut officia. Eaque deleniti alias, modi dolorem quod qui debitis illo. Aut, ipsam. Hic, autem.</p>
<p>Maiores consequatur, aliquid possimus quae asperiores corporis repudiandae! Quod id iure at dolorem consectetur, sed, debitis libero perspiciatis, numquam ea, fugit repudiandae sunt consequatur. Harum optio ut doloribus distinctio adipisci!</p>
</div>
</section>
<section>
<div class="header header--final"></div>
<div class="placeholder">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt quisquam doloribus, commodi mollitia saepe nesciunt esse animi totam beatae facere tenetur veniam quas expedita iusto ipsa provident hic! Minima, repellendus.</p>
<p>Accusamus voluptatibus laudantium commodi nostrum obcaecati impedit atque doloremque officiis? Iste necessitatibus, aperiam. Vitae facilis ipsam vel, sequi perspiciatis fugit, dolores expedita quaerat reiciendis beatae iste hic molestias cumque! Necessitatibus!
</p>
<p>Cum, dolore. Dolore corporis voluptas consequatur ratione fuga, laboriosam quisquam qui corrupti ut, in nam pariatur iste blanditiis nulla autem praesentium, optio maxime. Consequuntur vitae nemo eius similique, fugiat saepe.</p>
<p>Recusandae iure iusto ut vero dolorum, hic quos libero nostrum esse enim laudantium velit modi culpa, consequatur vel officiis exercitationem quod repellat, voluptas impedit nesciunt beatae similique itaque distinctio? Sapiente.</p>
</div>
</section>
Try making your <body> element have an onresize attribute that updates the styles of the dropdown:
<body onresize="updHead()">

Categories

Resources