Develop Reference

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

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/

How to stop background shaking when document.addEventListener('scroll') is present

I have the following code:
document.addEventListener('scroll', (event) => {
// Make BG not scroll with the window
let e = document.querySelector('body .bg-img');
let topValue = scrollY*0.5;
e.style.top = `${topValue}px`;
});
When i try to scroll, the background shakes up and dow like crazy. I've looked on the internet and it seems like it it hasn't got the answer. I think it can have something to do that it goes really slow to do the calculations, am I on the right path, and in that case, how do I solve it?

Javascript is not a correct way of doing this. You should use CSS instead:
body {
background-image: url("img_tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}

If you want your .bg-top background element to not scroll with the window, you should use the css property position: fixed instead.
Run the Code Snippet below to see how it works:
html, body {margin: 0; padding: 0; width: 100%; height: 100%;}
.bg-img{
background: url("//picsum.photos/200/100");height: 100px;width: 100%;
position:fixed;
top:0;
}
<div class="bg-img"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
</p>
But if you HAVE TO use JavaScript for whatever reason, you can change the position property value on scroll and assign the top property to 0.
Run the Code Snippet below to see how it works:
document.addEventListener('scroll', () => {
// Make BG not scroll with the window
let e = document.querySelector('body .bg-img');
e.style.position = "fixed";
e.style.top = "0";
});
html, body {padding: 0; width: 100%; margin: 0px 0px 0px 0px; height: 100%;}
.bg-img{background:url("//picsum.photos/200/100");height: 100px; width: 100%;}
<div class="bg-img"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa ab aut placeat eligendi ducimus doloremque fugit dolore esse, quis reprehenderit quod dignissimos similique, autem tempora nihil, aliquam eius. Dolores, repellendus!
</p>

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>