We Keep Coding

How can i make a div stay next to a specifc element in all Screens types with HTML, CSS and Js?

I'm having struggles with what I'm trying to acomplish. Basicly I have 2 colums in my HTML and on my left colum I have text and want to have div's on the right colum with videos stay near certain parts of the text. Diferent aproaches I have tried are table cells, who I couldn' make work how I wanted because it would deformat the text creating big spaces between paragraphs to fit in the size of the video on the right.
I have also tried dummy divs to fill the vertical space but this won't work for all screens since the div's sizes will be diferent.
I've tried searching for some anchors that could be attached to the text somehow where I could create a div next to it without influencing the text itself but I'm kinda lost.
I hope this question is according to the rules. Thanks in advance.
image in paint to help

Please check this link and let me know whether you want this type of layout
.row {
align-items: flex-end;
display: flex;
}
.bg-red {
background: red;
}
.col-6 {
width: 50%;
}
<div class="container-fluid">
<div class="row">
<div class="col-6">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
</div>
<div class="col-6">
<video width="100%" height="300" controls>
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="row bg-red">
<div class="col-6">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremq natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ab tempora quas tenetur, quae aliquid fugiat nam voluptates quisquam mollitia iusto quod doloremque natus recusandae! Ea cumque officiis numquam expedita tenetur!</p>
</div>
<div class="col-6">
<video width="100%" height="300" controls>
<source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4">
</video>
</div>
</div>
</div>

Sidebar layout where only the content div is scrollable

I would like to have a sidebar layout like the one in the picture:
The height of the sidebar is 100%; The Menu 1, Menu 2.. header and the div container below (the one with numbers) should also stay visible.
The only appearing scroll should be in the content div and only if the content is long enough.
What i have so far: https://codepen.io/anon/pen/oadQQE
HTML:
html,
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
.aside{
height: 100%;
}
.header {
background: yellow;
font-size: 24px;
overflow: hidden;
}
.header ul {
list-style-type: none;
display: flex;
justify-content: space-between;
}
.header ul li{
border: 1px solid red;
}
.fixed{
border: 1px solid blue;
font-size: 24px;
}
.content{
border: 1px solid red;
height: 100%;
overflow: auto;
}
<div class-"aside">
<header class="header">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>
</header>
<div class="fixed">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</div>
<div class="content">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
</div>
</div>
Edit: leaving this for future reference from W3Schools:
Note: The overflow property only works for block elements with a specified height.

You can do this by setting display: flex on the sidebar itself with a flex-direction: column;.
html,
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
.aside {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
background: yellow;
font-size: 24px;
}
.header ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
.header ul li {
border: 1px solid red;
}
.fixed {
border: 1px solid blue;
font-size: 24px;
}
.content {
border: 1px solid red;
overflow: auto;
}
<div class="aside">
<header class="header">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>
</header>
<div class="fixed">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</div>
<div class="content">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
</div>
</div>

Smooth Scrolling for scrollIntoView() function is not working in chrome browser

I have a button. When clicked upon, I make the page scroll to a div. That's working perfectly in mozilla and IE but its not working properly in chrome browser since its mentioned in nativaly supported. Please suggest what was the issue.
window.addEventListener('load', function() {
// scroll into view
document.querySelector('.js-scroll-into-hello').addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('.hello').scrollIntoView({ behavior: 'smooth' });
});
});
<div class="actions">
<button class="btn js-scroll-into-hello">Scroll into view</button>
</div>
<article class="scrollable-parent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<h3 class="hello"><em>hello!</em></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
</article>
</div>

Javascript - upset offset position when scrolling

I'm trying to create a sticky table header, I'm trying to capture the position of an element when the page scrolls
In the example the console just outputs the first values and doesn'y upset.
How do I upset of the offset when scrolling.
var blockPos = document.getElementById('block').offsetTop
window.addEventListener('scroll', function () {
//var blockPos = document.getElementById('block').offsetTop
console.log(blockPos)
});
html, body{
background: grey;
height: 100%;
}
.page{
background: white;
margin: 0 auto;
max-width: 1200px;
}
.content{
margin: 0 auto;
width: 90%;
}
.text{
}
#block{
background: red;
height: 100px;
width: 100px;
}
<div class="page">
<div class="content">
<div class="text">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<div id="block"></div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
</div>
</div>
</div>

function update(){
var blockPos = document.getElementById('block').offsetTop;
console.log(blockPos)
}
window.addEventListener('scroll', function () {
update();
});
Try this code

If you want a sticky header, I have 2 solutions for you.
Check out the snippet, live demo.
1. CSS method - display: fixed
very easy way by setting display: fixed, but not working under IE 8 or below.
2. JS method
listen to scroll event, caculating the scroll top value while scrolling
display: absolute, and update the value of top while scrolling.
var element = document.body;
var computedFixedElement = document.getElementById('pos-abs');
// record the original Y for `body`
var y = element.getBoundingClientRect().y;
window.addEventListener('scroll', function () {
var bodyScrollTop = - element.getBoundingClientRect().top;
computedFixedElement.style.top = bodyScrollTop + y + 'px';
});
html, body{
background: grey;
margin: 0;
/* height: 100%;
overflow: scroll; */
}
.pos-fixed{
background: red;
width: 50%;
height: 30px;
position: fixed;
top: 0;
left: 0;
}
.pos-abs {
background: blue;
width: 50%;
height: 30px;
position: absolute;
right: 0;
top: 0;
}
.page{
background: white;
margin: 0 auto;
max-width: 1200px;
}
.content{
margin: 0 auto;
width: 90%;
}
.text{
}
#block{
background: red;
height: 100px;
width: 100px;
}
<div class="page" id="page">
<div class="pos-fixed">
using position: fixed
</div>
<div id="pos-abs" class="pos-abs">
using position: absolute
</div>
<div class="content">
<div class="text">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<div id="block"></div>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore voluptas corporis incidunt in architecto itaque
ipsum modi atque non rerum, totam, mollitia omnis, dolore numquam. Doloremque ducimus nostrum voluptas quis!</p>
</div>
</div>
</div>

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.