Trigger a js animation when the page is scrolled to the section - javascript

I am using a the easy Pie Chart plugin from rendro (https://rendro.github.io/easy-pie-chart/). Basically I only want the animation to happen only when I scroll to the specific area on the page in which the chart is displayed. How can I achieve this?


Please consider using Intersection Observer.
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
Pros:
No need to add scroll listener, debounce function.
Code is much clearer and smaller.
Cons:
Support is lacking in Safari, so you'll need to add a polyfill.
function handler(entries, observer) {
for (entry of entries) {
if (entry.isIntersecting) {
entry.target.classList.add('inView');
}
}
}
let observer = new IntersectionObserver(handler);
observer.observe(document.querySelector(".takeAction"));
.takeAction {
background-color: #fff;
transition: 3s background-color;
}
.takeAction.inView {
background-color: yellow;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p class="takeAction">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia nisi laborum consequuntur quis architecto ullam cupiditate ipsam repellendus quos magnam a recusandae, tenetur veniam eos praesentium iure optio dicta, ex.</p>
http://jsfiddle.net/30unpcLm/2/

Related

Javascript Auto-scroll Appears Jittery on Safari IOS

The Objective
I am trying to make an auto-scrolling feature for an online ebook reader website. The user must be able to press a button and have the page scroll automatically.
The problem
Every solution I have found so far uses either setTimeout or setInterval to scroll the page with window.scrollBy(0, 1), and this works great on chrome, however when I test this on Safari IOS, the page does not scroll smoothly at all. It appears very jittery, to the point that the text is no longer legible.
Here is a video demonstrating the problem. (Please watch in 1080p60, since the jitter is more apparent at 60fps)
The code
Here is a simple HTML document to demonstrate my current method of auto scrolling.
let scrollTimeout;
function pageScroll() {
scrollTimeout = setTimeout(() => {
window.scrollBy(0, 1);
pageScroll();
}, 10);
}
function startScroll() {
pageScroll();
}
function stopScroll() {
clearTimeout(scrollTimeout);
}
<!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>Test Auto-scroll</title>
</head>
<body>
<main style="max-width: 500px; margin: 0 auto; font-size: 32px">
<div style="position: sticky; top: 0">
<button onclick="startScroll()">Start</button>
<button onclick="stopScroll()">Stop</button>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum
ducimus, totam debitis sint modi inventore explicabo iusto
assumenda vitae vero porro aperiam aut reiciendis nam culpa quia
in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Impedit sunt vitae saepe recusandae voluptatibus nihil enim,
sequi rerum quibusdam nisi provident! Autem aliquid
reprehenderit doloremque inventore quasi dolore fugit tempora.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure
molestias consectetur molestiae labore totam ex et eum nulla
officia, minima excepturi voluptates, consequatur amet modi!
Molestiae autem illum ullam accusantium.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
tenetur cupiditate, maxime fuga sequi earum excepturi
repudiandae, aliquam, laborum blanditiis iusto.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
laborum mollitia suscipit dolores omnis, cum perferendis rerum
accusantium doloremque quasi pariatur, deserunt delectus et
porro nesciunt cumque vel quisquam velit!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
tenetur cupiditate, maxime fuga sequi earum excepturi
repudiandae, aliquam, laborum blanditiis iusto.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
laborum mollitia suscipit dolores omnis, cum perferendis rerum
accusantium doloremque quasi pariatur, deserunt delectus et
porro nesciunt cumque vel quisquam velit!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quisquam ab ex tenetur a possimus? Cum, nostrum dolor? Veniam
tenetur cupiditate, maxime fuga sequi earum excepturi
repudiandae, aliquam, laborum blanditiis iusto.
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam,
laborum mollitia suscipit dolores omnis, cum perferendis rerum
accusantium doloremque quasi pariatur, deserunt delectus et
porro nesciunt cumque vel quisquam velit!
</p>
</main>
</body>
</html>

Apple throttles their devices to give supposedly battery performance. But there are other reasons like Background App Refresh, Low Battery More, and many more. The easily visible reason is Low Power Mode on you will not get the same performance as Low Power More off.
With your snippet, you can clearly judge the performance difference between Low Power Mode on and Low Power Mode off.
Also, performance can be affected by the display refresh rate. You can manage it with requestAnimationFrame, where you can somewhat control fps.
The below example could help you with requestAnimationFrame.
let scrollAnimationFrame;
let prevtimeStamp = 0;
let deltaTime = 0;
let functionTiming = 10;
let counter = 0;
let reachedBottom = false;
function animateScroll(timestamp) {
const deltaTime = timestamp - prevtimeStamp;
prevtimeStamp = timestamp;
const scrollY = window.scrollY;
if(counter > functionTiming){
window.scrollBy(0, 1);
counter = 0;
if(scrollY === window.scrollY)
reachedBottom = true;
}else{
counter += deltaTime;
}
if(reachedBottom)
cancelAnimationFrame(scrollAnimationFrame);
else
scrollAnimationFrame = requestAnimationFrame(animateScroll);
}
function startScroll() {
if(!scrollAnimationFrame)
animateScroll(0);
}
function stopScroll() {
if(scrollAnimationFrame)
cancelAnimationFrame(scrollAnimationFrame);
scrollAnimationFrame = 0;
}
document.getElementById('functionTimingControl').addEventListener('change', function(e){
functionTiming = e.target.value;
});
<main style="max-width: 500px; margin: 0 auto; font-size: 32px">
<div style="position: sticky; top: 0">
<button onclick="startScroll()">Start</button>
<button onclick="stopScroll()">Stop</button>
<input type='number' min='1' max='1000' value='10' id='functionTimingControl' />
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ducimus, totam debitis sint modi inventore explicabo iusto assumenda vitae vero porro aperiam aut reiciendis nam culpa quia in, dolor quae.
</p>
</main>

how can I make stickys header when the scroll intersects them?

I have this code to make a sticky header. But it only works for the first element with the .header class. How can I make this effect for each of the elements with the .header class?
window.onscroll = function() {myFunction()};
var header = document.querySelector(".header");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
html,body,h1{
padding:0px;
margin:0px;
}
.header{
border:1px solid red;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
background:white;
}
.sticky + .content {
padding-top: 102px;
}
<h1 class="header">title1</h1>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
</div>
<h1 class="header">title2</h1>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
</div>
<h1 class="header">title3</h1>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cupiditate animi temporibus, nisi error quas possimus nulla tempora perspiciatis distinctio maiores, quisquam perferendis. Nisi molestias eaque earum ullam optio.
</div>

You actually don't need any JavaScript for this. Just use position: sticky; with top: 0 on the .header class to make this work. Make sure you set the background to white so that the text does not overlap, either.
jsfiddle here: https://jsfiddle.net/wmL71xqu/2/

Map cant be scrolled in iOS safari sometimes

Example is here
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.46.0/mapbox-gl.css' rel='stylesheet' />
<style>
* { margin:0; padding:0; box-sizing: border-box; }
#map {position:fixed; top: 0; left: 0; right: 50%; bottom: 0;}
#content { margin: 0 0 0 50%; background: lightblue;}
p {
padding: 50px
}
</style>
</head>
<body>
<div id="map"></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum facilis itaque
officiis omnis porro quia quos vero? Architecto beatae dicta magni, minus non
obcaecati quae quibusdam quis sunt ut, vel?</p>
</div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoicGF2ZWxzIiwiYSI6ImNpdGN4Zm56MDAwNWEyeW8zcWFoaGNkbHgifQ.o_5rdc4PS-yJV8tkh8cyEA';
var mapEl = document.getElementById('map')
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
center: [-74.50, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
map.on('load', () => {
map.on('touchstart', e => console.log('touchstart', e))
map.on('touchmove', e => console.log('touchmove', e))
map.on('touchcancel', e => console.log('touchcancel', e))
map.on('touchend', e => console.log('touchend', e))
map.on('movestart', e => console.log('movestart', e))
map.on('move', e => console.log('move', e))
map.on('moveend', e => console.log('moveend', e))
map.on('dragstart', e => console.log('dragstart', e))
map.on('drag', e => console.log('drag', e))
map.on('dragend', e => console.log('dragend', e))
map.on('error', e => console.log('error', e))
})
var mapTouchFix, tmt;
if (window['Event']) {
mapTouchFix = new Event('touchstart')
}
window.addEventListener('scroll', () => {
console.log('add scroll tmt')
if (tmt) clearTimeout(tmt)
tmt = setTimeout(() => {
console.log('scroll tmt')
fixmap()
}, 1000)
})
document.querySelector('#map').addEventListener('touchstart', () => {
console.log('Ha touch start processed ON MAP')
})
function fixmap () {
console.log('isDragPanEnabled' + map.dragPan.isEnabled())
console.log('isDragPanActive' + map.dragPan.isActive())
var p = map.getPitch()
map.easeTo({
pitch: p + 1
})
map.dragPan.disable()
console.log('dragpan disabled')
setTimeout(() => {
map.dragPan.enable()
map.easeTo({
pitch: p
})
console.log('dragpan enabled back')
}, 1000)
mapEl.dispatchEvent(mapTouchFix)
document.documentElement.dispatchEvent(mapTouchFix)
console.log('fixed', mapTouchFix)
}
</script>
</body>
</html>
Some times after page scrolling user cant scroll map, only possible to scroll map after click on any button or on map itself.
If you cant reproduce it, try to scroll map while page is being scrolled and move map after scrolling is finished.
Reproducible in iPad mini, iPad pro, iPhone with v11.x iOS
I tried to modify CSS to remove anything that could cause such behavior, trigger map methods and fire touchstart events, nothing helps.
Also I implemented two fingers scroll for map in another example, but issue is there sometimes as well.
Some times after page scrolling user cant scroll map, only possible to scroll map after click on any button or on map itself.
If you cant reproduce it, try to scroll map while page is being scrolled and move map after scrolling is finished.
Reproducible in iPad mini, iPad pro, iPhone with v11.x iOS
I tried to modify CSS to remove anything that could cause such behavior, trigger map methods and fire touchstart events, nothing helps.
Also I implemented two fingers scroll for map in another example, but issue is there sometimes as well.

div opacity on scroll top

I am trying to fade out the each blocks while scrolling top. When the particular div reached browser top it should slowly fade away.
I have tried but the problem here is that it is fading out all the divs since all divs have the same class name. I do not want to change the html structure for some reasons.
Is there any way to apply this effect on each divs?
var header = $('.content');
var range = 200;
$(window).on('scroll', function () {
var scrollTop = $(this).scrollTop();
var offset = header.offset().top;
var height = header.outerHeight();
offset = offset + height / 2;
var calc = 1 - (scrollTop - offset + range) / range;
header.css({ 'opacity': calc });
if ( calc > '1' ) {
header.css({ 'opacity': 1 });
} else if ( calc < '0' ) {
header.css({ 'opacity': 0 });
}
});
DEMO

I updated your fiddle. Basically, I did the calculation for each div separately by wrapping your code with .each

Check out this different version of answer fiddle.
header.each(function(){
if($(this).position().top - scrollTop <= 0){
$(this).css({ 'opacity': 0 });
}else{
$(this).css({ 'opacity': 1 });
}

You have to calculate the opacity for each element of the class.
Also you have to add a parent element with overflow-y:auto;
var parent = $("#parent");
var childs = $(".content");
var offset_top = 0;
var range = 200;
parent.on('scroll', function () {
var scrollTop = $(this).scrollTop();
if(scrollTop<20){
childs.css("opacity",1);
}
else{
childs.each(function(){
var top = $(this).offset().top - offset_top;
var height = $(this).height();
var offset = height/4;
var opacity = (top+ height - offset) / range;
if(opacity>1) opacity = 1;
else if(opacity<0) opacity = 0;
$(this).css("opacity",opacity);
});
}
});
div {color:#fff; padding:5%}
.content:nth-child(1){background:blue}
.content:nth-child(2){background:grey}
.content:nth-child(3){background:black}
.content:nth-child(4){background:red}
body,html{
height:100%;
}
#parent{
height:50%;
overflow-y:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perspiciatis temporibus accusantium aspernatur sint, commodi, dolor. Itaque, repudiandae ipsum consequatur, libero quisquam enim. Omnis architecto optio, eaque sapiente quia veritatis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum animi quos magnam earum nam itaque, sint rerum quibusdam voluptatibus, ipsam accusamus libero accusantium eveniet voluptatem quas, est tenetur eius aliquid.
</div>
</div>

Floating background when collapse a div

I have the following code to make divs collapse but I've realised that when I have a background colour there is a gap between the bar and content. Can anyone figure out how I can remove that gap?
https://jsfiddle.net/upxL42rw/1/
(function($) {
$.fn.collapse = function(method, options) {
var settings = $.extend({
collapse: "collapse",
signTag: "<span></span>",
titles: "h3",
titlesChild: "span",
container: "div",
classOpen: "opened",
open: "+",
close: "−",
rlOpen: "rl-open",
rlClose: "rl-close"
}, options);
var $element = $(this).children(settings.titles);
var $symbols = $(settings.signTag);
var $signOpen = $symbols.html(settings.open);
var $signClose = $symbols.html(settings.close);
var $insertElement = $symbols.appendTo($element);
$element.parent().addClass(settings.collapse);
if ($element.next().hasClass(settings.classOpen)) {
$element.children().html(settings.close).addClass(settings.rlClose);
} else {
$element.children().html(settings.open).addClass(settings.rlOpen);
}
var methods = {
single: function() {
return this.each(function() {
$(this).find(settings.container).eq(settings.childNum).addClass(settings.classOpen).slideDown()
.prev().children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
$element.on('click', function() {
$(this).next().slideToggle().toggleClass(settings.classOpen);
if ($(this).next().hasClass(settings.classOpen)) {
$(this).children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
} else {
$(this).children().html(settings.open).removeClass(settings.rlClose).addClass(settings.rlOpen);
}
});
});
}
};
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.collapse ');
}
};
})(jQuery);
$(function() {
$("#collapse").collapse('single', {});
});
#wrapper {
margin: 0 auto;
position: relative;
max-width: 640px;
}
.collapse > h3 {
background-color: #007197;
color: #fff;
margin: 0 auto;
padding: 3%;
text-decoration: none;
}
.collapse > h3 > span {
float: right;
}
.collapse > h3 + div {
display: none;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<main class="main-wrapper">
<div id="collapse">
<h3 style="background:black;">One</h3>
<div style="background:red;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:red;">Two</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:orange;">Three</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:blue;">Four</h3>
<div style="background:red;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:green;">Five</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
</div>
</main>
</div>

You are seeing the effects of collapsing margins between your p elements and the adjacent h3 headers.
You can prevent this by simply adding the following CSS rule:
.collapse div {
overflow: auto;
}
See demo: https://jsfiddle.net/vauxjg7r/

Fiddle demo here.
Try to add this CSS style:
.collapse p {
margin: 0px;
}
But if you want to keep the space above, you can do:
.collapse p {
margin: 0px;
padding: 10px 0 0;
}
The issue was caused by browser-applied styles, you need to overwrite them with codes like above. Or, you could use CSS resets to normalize browser styles.

It's the margin from the paragraphs. You must overwrite the user agent stylesheet by adding this to your stylesheet:
p {
margin: 0;
padding: .5em 0;
}

This is due to margin collapsing on the p elements.
If there is no border, padding, inline content, or clearance to
separate the margin-top of a block with the margin-top of its first
child block, or no border, padding, inline content, height,
min-height, or max-height to separate the margin-bottom of a block
with the margin-bottom of its last child, then those margins collapse.
The collapsed margin ends up outside the parent.
(https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing)
To stop this effect from happening add overflow: hidden; to .collapse > h3 + div.
(function($) {
$.fn.collapse = function(method, options) {
var settings = $.extend({
collapse: "collapse",
signTag: "<span></span>",
titles: "h3",
titlesChild: "span",
container: "div",
classOpen: "opened",
open: "+",
close: "−",
rlOpen: "rl-open",
rlClose: "rl-close"
}, options);
var $element = $(this).children(settings.titles);
var $symbols = $(settings.signTag);
var $signOpen = $symbols.html(settings.open);
var $signClose = $symbols.html(settings.close);
var $insertElement = $symbols.appendTo($element);
$element.parent().addClass(settings.collapse);
if ($element.next().hasClass(settings.classOpen)) {
$element.children().html(settings.close).addClass(settings.rlClose);
} else {
$element.children().html(settings.open).addClass(settings.rlOpen);
}
var methods = {
single: function() {
return this.each(function() {
$(this).find(settings.container).eq(settings.childNum).addClass(settings.classOpen).slideDown()
.prev().children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
$element.on('click', function() {
$(this).next().slideToggle().toggleClass(settings.classOpen);
if ($(this).next().hasClass(settings.classOpen)) {
$(this).children().html(settings.close).removeClass(settings.rlOpen).addClass(settings.rlClose);
} else {
$(this).children().html(settings.open).removeClass(settings.rlClose).addClass(settings.rlOpen);
}
});
});
}
};
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.collapse ');
}
};
})(jQuery);
$(function() {
$("#collapse").collapse('single', {});
});
#wrapper {
margin: 0 auto;
position: relative;
max-width: 640px;
}
.collapse > h3 {
background-color: #007197;
color: #fff;
margin: 0 auto;
padding: 3%;
text-decoration: none;
}
.collapse > h3 > span {
float: right;
}
.collapse > h3 + div {
display: none;
margin: 0;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<main class="main-wrapper">
<div id="collapse">
<h3 style="background:black;">One</h3>
<div style="background:red;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:red;">Two</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:orange;">Three</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:blue;">Four</h3>
<div style="background:red;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
<h3 style="background:green;">Five</h3>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto illo velit temporibus aliquam eius dolorem dolor laudantium quidem porro obcaecati nesciunt ducimus doloribus molestiae ad praesentium reiciendis enim eligendi fugit!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio quis delectus ducimus quibusdam ex totam natus sint nemo nam possimus explicabo labore architecto magnam accusantium veritatis tenetur repudiandae ab laboriosam?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis molestiae molestias atque asperiores illum nisi saepe placeat deleniti commodi dolore cupiditate quas. Ipsum odio quibusdam nemo est ducimus ea nesciunt?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga eligendi ex aperiam facilis alias! Quaerat asperiores quia molestias laboriosam commodi aspernatur dolorum nostrum impedit perspiciatis cupiditate quas distinctio earum dignissimos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi laboriosam voluptates eum vero iste enim quas a nulla consequuntur quasi. Dolorum minima corporis molestias blanditiis ducimus obcaecati necessitatibus excepturi magnam?</p>
</div>
</div>
</main>
</div>

Categories

Resources