We Keep Coding

How to scroll elements of out container while still showing them

I've been trying to implement a Figma design where the element's initial position is mid-screen height. When scrolling, the elements move up and remain visible unless out of screen view as below.
The only thing I could successfully implement is the normal scrolling where any overflow beyond the container is hidden
<div class="box">
This box has a height and a width. If too much content is displayed
within the assigned height, there will be an overflow situation. If overflow is set to
hidden then any overflow will not be visible.
</div>
.box {
margin-top: 50vh; /* or top: 50vh; */
width: 200px;
height: 100px;
overflow: scroll;
}
Is this implementation possible?

I think you want padding top of some amount of vh unit.
https://css-tricks.com/fun-viewport-units/
See below:
html,
body {
margin: 0;
}
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
height: 100vh;
}
.scroller {
padding-top: 50vh;
height: 100vh;
overflow: auto;
box-sizing: border-box;
}
<div class="container">
<div class="scroller">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
</div>
<div class="scroller">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
</div>
<div class="scroller">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis molestiae optio ipsam autem porro debitis, nihil expedita est quo dolor, dolore, veritatis similique. Porro id deleniti incidunt vitae, est libero.</p>
</div>
</div>

How to remove sticky header when scrolling to the 3rd paragraph for example ? Or a specific item in the page

How to remove sticky header when scrolling to the 3rd paragraph for example ? Or a specific item in the page ? this is the code below.
https://www.w3schools.com/howto/howto_js_sticky_header.asp

say you want to remove the sticky header after p5 ,you can do it like this
window.addEventListener('scroll', () => {
const p5 = document.getElementById('p5')
const nav = document.querySelector('.nav')
var top = p5.getBoundingClientRect().top
if (top < 126 || top >270 ) {
nav.style.position = 'relative'
} else {
nav.style.position = 'sticky'
}
})
.nav {
position: relative;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
p {
margin-bottom: 5rem;
}
.p5 {
background-color: blue;
}
#p3 {
background-color: greenyellow;
}
<div class="nav">
hi nav bar
</div>
<div class="p">
<p id="p1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?
</p>
<p id="p2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?
</p>
<p id="p3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?
</p>
<p id="p4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?
</p>
<p class='p5' id="p5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?
</p>
<p id="p6">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?
</p>
<p id="p7">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?
</p>
<p id="p8">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?
</p>
<p id="p9">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?
</p>
<p id="p10">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?
</p>
<p id="p11">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?
</p>
<p id="p12">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?
</p>
<p id="p13">
Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptates doloremque, dolores,<br>pariatur officia debitis quos, praesentium molestiae vel mollitia eos illo ipsa fugit! Quo soluta a vero dicta amet?
</p>
</div>
you can change the top value to get perfect time based on your website
if (top < 126)

Problem in animate scrollTop for multi div

I have two div with id (# left-div - # right-div). In # left-div i have multi div with id and # left-div's overflow-y is scroll. In # right-div i have multi button with id. I want after click on each button, # left-div scroll to show Specific div that button clicked. I use jquery. How to create this action?
This is my code:
<div id="#left-div">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
<div id="#right-div">
<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>
<button id="btn4"></button>
</div>

What you can do is have the same class for a div and it's associated button.when the button is clicked you can get elements which have that class and scroll to the first element.
$(document).ready(function() {
$("button").click(function() {
var element = $(this);
var className = element.attr("class");
var x = document.getElementsByClassName(className);
$("html, body").animate(
{
scrollTop: $(x[0]).offset().top
},
2000
);
});
});
#div1 {
background-color: red;
}
#div2 {
background-color: yellow;
}
#div3 {
background-color: green;
}
#div4 {
background-color: blue;
}
#left-div {
overflow-y: scroll;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap 4 JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
/>
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-8">
<div id="left-div">
<div id="div1" class="element1">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus,
natus rerum laborum ea ullam debitis qui aliquid repudiandae
impedit. Praesentium totam pariatur odio fuga suscipit deleniti
aliquid tenetur temporibus maiores! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Porro ullam modi soluta doloribus
rerum vero natus autem, maxime minima provident et obcaecati
quisquam consequatur numquam unde odit facere. Eaque, corrupti?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit
asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Ducimus, natus rerum laborum ea ullam debitis qui aliquid
repudiandae impedit. Praesentium totam pariatur odio fuga suscipit
deleniti aliquid tenetur temporibus maiores! Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Porro ullam modi soluta
doloribus rerum vero natus autem, maxime minima provident et
obcaecati quisquam consequatur numquam unde odit facere. Eaque,
corrupti? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi.
</div>
<div id="div2" class="element2">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus,
natus rerum laborum ea ullam debitis qui aliquid repudiandae
impedit. Praesentium totam pariatur odio fuga suscipit deleniti
aliquid tenetur temporibus maiores! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Porro ullam modi soluta doloribus
rerum vero natus autem, maxime minima provident et obcaecati
quisquam consequatur numquam unde odit facere. Eaque, corrupti?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit
asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Ducimus, natus rerum laborum ea ullam debitis qui aliquid
repudiandae impedit. Praesentium totam pariatur odio fuga suscipit
deleniti aliquid tenetur temporibus maiores! Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Porro ullam modi soluta
doloribus rerum vero natus autem, maxime minima provident et
obcaecati quisquam consequatur numquam unde odit facere. Eaque,
corrupti? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi.
</div>
<div id="div3" class="element3">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus,
natus rerum laborum ea ullam debitis qui aliquid repudiandae
impedit. Praesentium totam pariatur odio fuga suscipit deleniti
aliquid tenetur temporibus maiores! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Porro ullam modi soluta doloribus
rerum vero natus autem, maxime minima provident et obcaecati
quisquam consequatur numquam unde odit facere. Eaque, corrupti?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit
asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Ducimus, natus rerum laborum ea ullam debitis qui aliquid
repudiandae impedit. Praesentium totam pariatur odio fuga suscipit
deleniti aliquid tenetur temporibus maiores! Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Porro ullam modi soluta
doloribus rerum vero natus autem, maxime minima provident et
obcaecati quisquam consequatur numquam unde odit facere. Eaque,
corrupti? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi.
</div>
<div id="div4" class="element4">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ducimus,
natus rerum laborum ea ullam debitis qui aliquid repudiandae
impedit. Praesentium totam pariatur odio fuga suscipit deleniti
aliquid tenetur temporibus maiores! Lorem ipsum dolor, sit amet
consectetur adipisicing elit. Porro ullam modi soluta doloribus
rerum vero natus autem, maxime minima provident et obcaecati
quisquam consequatur numquam unde odit facere. Eaque, corrupti?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit
asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Ducimus, natus rerum laborum ea ullam debitis qui aliquid
repudiandae impedit. Praesentium totam pariatur odio fuga suscipit
deleniti aliquid tenetur temporibus maiores! Lorem ipsum dolor,
sit amet consectetur adipisicing elit. Porro ullam modi soluta
doloribus rerum vero natus autem, maxime minima provident et
obcaecati quisquam consequatur numquam unde odit facere. Eaque,
corrupti? Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit asperiores quae repellendus rerum placeat voluptates iste sit
dolores dignissimos tenetur? Id tempora dolores, velit nihil
incidunt debitis! Tempora, accusamus modi. Lorem ipsum dolor sit,
amet consectetur adipisicing elit. Ducimus, natus rerum laborum ea
ullam debitis qui aliquid repudiandae impedit. Praesentium totam
pariatur odio fuga suscipit deleniti aliquid tenetur temporibus
maiores! Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Porro ullam modi soluta doloribus rerum vero natus autem, maxime
minima provident et obcaecati quisquam consequatur numquam unde
odit facere. Eaque, corrupti? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Odit asperiores quae repellendus
rerum placeat voluptates iste sit dolores dignissimos tenetur? Id
tempora dolores, velit nihil incidunt debitis! Tempora, accusamus
modi.
</div>
</div>
</div>
<div class="col-4">
<div id="right-div">
<button id="btn1" class="element1">Bt1</button>
<button id="btn2" class="element2">Btn2</button>
<button id="btn3" class="element3">Btn3</button>
<button id="btn4" class="element4">Btn4</button>
</div>
</div>
</div>
</div>
<script src="./index.js"></script>
</body>
</html>

Automatic scroll To element on a list when open this

) ,
I explain my little problem ( sorry for my english):
I have a list of element (div) in left ( constraint in size) with a scrollbar (auto)
(a custom scroll but it's the same problem with the basic scroll).
All of this "element" can be open (with a "+" button) that open a "sub element" IN the list.
Problem , by example if you open the last element you can't see the sub element without scroll to this sub element, i would like add a js for scrolling to this open sub-element"
I explain with image what i would like have: http://www.nanosix.be/test/help.jpg
and i make a simply version on jsfiddle here :
https://jsfiddle.net/9Lrhfqmk/
<body>
<div class="menu">
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
</div>
<script>
$(".button").click(function() {
$(this).parent(".ele").children(".other").toggleClass("displayblock");
});
</script>
</body>

Here is the updated fiddle: https://jsfiddle.net/9Lrhfqmk/2/
You have to do something like this:
$( ".button" ).click(function() {
var parent = $(this).parent(".ele");
var other = parent.children(".other");
other.toggleClass("displayblock");
if(other.hasClass("displayblock")){
$(".menu").scrollTop(other.offset().top);
}
else{
$(".menu").scrollTop(parent.offset().top);
}
});

Getting the distance from an element and top of the document

I'm trying to get the distance from the top of an element and the top of the page every time the user scrolls. I got it to work but when you scroll, it says the distance hasn't changed. I tried to solve this with a closure but I am not really great with closures. Theres a demo of what I have so far here: http://addisonbean.com/test/ it logs the distance in the console.
I know there may be an easier way to do this, but I'm would really like to know what I'm doing wrong. Can anyone help me with this?
And this is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FitGird</title>
<link rel="stylesheet" href="fitgrid.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="fg12">Addison Bean.</h1>
<div class="row">
<h2>Article</h2>
<hr class="fg6">
<hr class="fg6 hidden">
<p class="fg6">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
<div class="row">
<p class="fg6">3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
<p class="fg6">4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
</div>
<div class="row">
<p class="fg6">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
<div class="row">
<p class="fg6">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
<div class="row">
<p class="fg6">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
<div class="row">
<p class="fg6">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
</div>
<script>
var elem = document.getElementsByTagName('h2')[0];
function makeScrollOffset(el) {
function getWindowOffset() {
var woff = el.getBoundingClientRect().top,
soff = window.pageYOffset;
var dist = Math.round(woff + soff);
console.log(dist);
}
return getWindowOffset;
}
window.onscroll = makeScrollOffset(elem);
</script>
</body>
</html>

With your code it should be:
var dist = Math.round(woff-soff);
Example here

this works very well and returns the distance:
window.onscroll = function ()
{
console.log(document.getElementsByTagName('h2')[0].getBoundingClientRect().top);
}
note that negative number means the selected elements is above the viewport's top line and positive numbers means under this line. if you get the number 0, the element's top is perfectly aligned with the viewport's top line.