Develop Reference

How to get true content height of DOM element that is being cropped by overflow: hidden (for smooth css transition to height: auto)?

Solution:
Thanks to #Kalimah, this works in composition api & script setup:
<script setup>
const state = reactive({
meetCardHeight: 100
})
const element = ref(null)
const changeElementHeight = () => {
if (state.meetCardHeight !== element.value.scrollHeight) {
state.meetCardHeight = element.value.scrollHeight
} else {
state.meetCardHeight = 100
}
}
</script>
<template>
<div ref="element" class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500" :style="{ height: state.meetCardHeight + 'px'}" #click="changeElementHeight">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>
</div>
</template>
It will expand the div to its height-auto size with a smooth transition.
Original Question:
I'm trying to compute the true height of all text in this component, despite part of it being hidden by overflow: hidden (tailwind):
<script setup>
const state = reactive({
meetCardHeight: 100
})
</script>
<template>
<div ref="element" class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500" :style="{ height: state.meetCardHeight + 'px'}">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>
</div>
</template>
The current component height is set to 100px for the overflow property to take effect. Is there a way to determine the height that h1 and p tags would result in, if overflow would not be present?

You can find the height with scrollHieght property. It is a native JS property and is independet of vue or any other libraries.
Example:
console.log("Full Height", document.querySelector(".container").scrollHeight + "px");
.container{
height: 100px;
overflow: hidden;
}
<div class="container">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>
</div>

Readmore doesn't work when I have an unorderlist

When I have an unordered list of paragraph text inside the container, the read more/readless does not hide any text before the UL list
https://codepen.io/tickatop/pen/NZavXg
Almost made me run crazy
<div class= "col2">
<p class="lead" height="50">>
<strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cum quisquam praesentium incidunt, ad, placeat debitis voluptatum, quidem quo velit architecto eligendi </strong>voluptate officia soluta explicabo aliquam facilis illo temporibus sint eaque repudiandae quis ducimus! Placeat exercitationem ex voluptate ratione aut facere cupiditate sunt. Officiis veniam, inventore dolore. Soluta temporibus, veritatis labore optio enim consectetur ipsa?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti sequi non qui, quas, quod ad vel facilis consectetur sint, culpa eum. Maiores, maxime, quisquam. Assumenda error sapiente numquam quibusdam praesentium perspiciatis minima, architecto maiores ipsa, <ul>
<li>ndskdsmd</li>
<li>sdkdnskdskds</li>
<li>dskdnskdnskdsnk</li>
</ul>corporis, soluta dolor magnam vel id quis eveniet recusandae asperiores totam sit eligendi commodi. Nam nemo, dicta. Ut asperiores commodi sint debitis laborum harum facilis, dolore obcaecati vel adipisci dolorem modi quas eos deserunt quae sed explicabo magnam reiciendis dolores odit ex nulla a! Impedit nulla unde, hic, commodi explicabo omnis nisi sed, recusandae quam possimus, magnam qui. Ex non laborum libero tempore similique, id.
Perspiciatis provident accusamus esse possimus, eveniet corrupti exercitationem magni soluta consequuntur nobis! Sequi molestiae repellat optio quaerat tempora veritatis illum voluptatem pariatur reiciendis? Repudiandae fugiat dignissimos, dolore laborum laudantium tempora odit, quo, labore animi eos nesciunt. Dicta nam voluptatum eaque suscipit nihil accusamus consequuntur. </p>
<button class="more more-lead">Read more...</button>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

I'm not sure if this is helpful or not, but it has the function you are hoping for so it is an alternative at least. It also works for any number of read-more sections on a single page.
Note that the read more button has the class .more, and an attribute for which links it to the element that it sets the height for.
Hope this helps
Demo
// Hide on load via jquery to avoid issues where JS is disabled
// Cycle through each more button
$(".more").each(function() {
// Find ID and store element
id = $(this).attr("for");
elem = $("#" + id);
// Set height from inline property
elem.css("height", elem.attr("height")).css("overflow", "hidden");
});
// Add click event to more button
$(".more").click(function() {
// Find ID and store element
id = $(this).attr("for");
elem = $("#" + id);
// Toggle expanded class
// Could check for inline property being auto / set and adjust if you want to avoid an !important CSS rule
elem.toggleClass("expanded");
// Toggle text of buttons
if ($(this).text() == "Read more...") {
$(this).text("Read less...");
} else {
$(this).text("Read more...");
}
})
.expanded {
height: auto !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col2">
<div id="lead" height="50">
<p>
<strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cum quisquam praesentium incidunt, ad, placeat debitis voluptatum, quidem quo velit architecto eligendi </strong>voluptate officia soluta explicabo aliquam facilis illo temporibus
sint eaque repudiandae quis ducimus! Placeat exercitationem ex voluptate ratione aut facere cupiditate sunt. Officiis veniam, inventore dolore. Soluta temporibus, veritatis labore optio enim consectetur ipsa? Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Corrupti sequi non qui, quas, quod ad vel facilis consectetur sint, culpa eum. Maiores, maxime, quisquam. Assumenda error sapiente numquam quibusdam praesentium perspiciatis minima, architecto maiores ipsa,
</p>
<ul>
<li>ndskdsmd</li>
<li>sdkdnskdskds</li>
<li>dskdnskdnskdsnk</li>
</ul>
<p>corporis, soluta dolor magnam vel id quis eveniet recusandae asperiores totam sit eligendi commodi. Nam nemo, dicta. Ut asperiores commodi sint debitis laborum harum facilis, dolore obcaecati vel adipisci dolorem modi quas eos deserunt quae sed explicabo
magnam reiciendis dolores odit ex nulla a! Impedit nulla unde, hic, commodi explicabo omnis nisi sed, recusandae quam possimus, magnam qui. Ex non laborum libero tempore similique, id. Perspiciatis provident accusamus esse possimus, eveniet corrupti
exercitationem magni soluta consequuntur nobis! Sequi molestiae repellat optio quaerat tempora veritatis illum voluptatem pariatur reiciendis? Repudiandae fugiat dignissimos, dolore laborum laudantium tempora odit, quo, labore animi eos nesciunt.
Dicta nam voluptatum eaque suscipit nihil accusamus consequuntur. </p>
</div>
<button class="more" for="lead">Read more...</button>
</div>
<div class="col2">
<div id="second" height="50">
<p>
<strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem cum quisquam praesentium incidunt, ad, placeat debitis voluptatum, quidem quo velit architecto eligendi </strong>voluptate officia soluta explicabo aliquam facilis illo temporibus
sint eaque repudiandae quis ducimus! Placeat exercitationem ex voluptate ratione aut facere cupiditate sunt. Officiis veniam, inventore dolore. Soluta temporibus, veritatis labore optio enim consectetur ipsa? Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Corrupti sequi non qui, quas, quod ad vel facilis consectetur sint, culpa eum. Maiores, maxime, quisquam. Assumenda error sapiente numquam quibusdam praesentium perspiciatis minima, architecto maiores ipsa,
</p>
<ul>
<li>ndskdsmd</li>
<li>sdkdnskdskds</li>
<li>dskdnskdnskdsnk</li>
</ul>
<p>corporis, soluta dolor magnam vel id quis eveniet recusandae asperiores totam sit eligendi commodi. Nam nemo, dicta. Ut asperiores commodi sint debitis laborum harum facilis, dolore obcaecati vel adipisci dolorem modi quas eos deserunt quae sed explicabo
magnam reiciendis dolores odit ex nulla a! Impedit nulla unde, hic, commodi explicabo omnis nisi sed, recusandae quam possimus, magnam qui. Ex non laborum libero tempore similique, id. Perspiciatis provident accusamus esse possimus, eveniet corrupti
exercitationem magni soluta consequuntur nobis! Sequi molestiae repellat optio quaerat tempora veritatis illum voluptatem pariatur reiciendis? Repudiandae fugiat dignissimos, dolore laborum laudantium tempora odit, quo, labore animi eos nesciunt.
Dicta nam voluptatum eaque suscipit nihil accusamus consequuntur. </p>
</div>
<button class="more" for="second">Read more...</button>
</div>

Show sticky header after scroll after 300px

I have a script that I run for showing my sticky header after scroll. I would like to display it after 300px. How can I achieve that?
<script type="text/javascript">
jQuery(function($){
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else {
$('header').removeClass("sticky");
}
});
});
</script>

If I understand you right, just replace $(this).scrollTop() > 1 with $(this).scrollTop() > 300
Demo: https://jsfiddle.net/VitFL/cgzr6k5t/
jQuery(function($){
$(window).scroll(function() {
if ($(this).scrollTop() > 300){
$('header').addClass("sticky");
}
else {
$('header').removeClass("sticky");
}
});
});
header {
width: 100%;
height: 40px;
background-color: red;
}
.sticky {
position: fixed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
</header>
<section class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus reiciendis ipsa, aliquam voluptatum qui et eos, omnis dolorum, iure dolores beatae modi, nihil aspernatur quibusdam nostrum dolor? Tenetur similique, nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus reiciendis ipsa, aliquam voluptatum qui et eos, omnis dolorum, iure dolores beatae modi, nihil aspernatur quibusdam nostrum dolor? Tenetur similique, nisi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rem dolores ullam nostrum sint voluptas obcaecati amet aspernatur laudantium, necessitatibus ex deleniti. Accusantium fugit, natus maiores unde, quidem praesentium, laboriosam cumque cupiditate doloremque nulla quisquam pariatur consectetur accusamus dolores quas, itaque! Fuga expedita, maxime amet iste sequi quod delectus quaerat eligendi nisi similique, nemo sunt dignissimos repellendus dolorem laborum est vero quam, esse, culpa in soluta nesciunt. Soluta ipsa accusamus est placeat nostrum, nemo, nobis, et totam reprehenderit possimus eligendi! Suscipit vitae saepe quod eos aut magnam similique, voluptates, quibusdam debitis? Facere odio dicta dolore, enim rerum ex distinctio labore expedita! Assumenda doloribus quae repellat a, laboriosam, distinctio, rem repudiandae itaque, odio accusamus nisi repellendus deleniti explicabo ad facilis eum! Saepe magni necessitatibus obcaecati aspernatur! Dignissimos excepturi libero dolores nemo quia animi quas atque dolore sed optio beatae perspiciatis tempora impedit praesentium doloremque id ad doloribus reiciendis, recusandae itaque magni, reprehenderit? Explicabo cumque inventore tempore doloremque. Aliquam, consequatur animi soluta dolores expedita assumenda! Sit, maiores suscipit reiciendis dolor adipisci autem laudantium corporis quia excepturi. Animi consequuntur nostrum facilis ipsam sapiente, distinctio. Porro quisquam qui, praesentium aliquid, architecto magnam aliquam repellendus deleniti maiores ab ea illum necessitatibus dolorem. Architecto debitis, enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam rem dolores ullam nostrum sint voluptas obcaecati amet aspernatur laudantium, necessitatibus ex deleniti. Accusantium fugit, natus maiores unde, quidem praesentium, laboriosam cumque cupiditate doloremque nulla quisquam pariatur consectetur accusamus dolores quas, itaque! Fuga expedita, maxime amet iste sequi quod delectus quaerat eligendi nisi similique, nemo sunt dignissimos repellendus dolorem laborum est vero quam, esse, culpa in soluta nesciunt. Soluta ipsa accusamus est placeat nostrum, nemo, nobis, et totam reprehenderit possimus eligendi! Suscipit vitae saepe quod eos aut magnam similique, voluptates, quibusdam debitis? Facere odio dicta dolore, enim rerum ex distinctio labore expedita! Assumenda doloribus quae repellat a, laboriosam, distinctio, rem repudiandae itaque, odio accusamus nisi repellendus deleniti explicabo ad facilis eum! Saepe magni necessitatibus obcaecati aspernatur! Dignissimos excepturi libero dolores nemo quia animi quas atque dolore sed optio beatae perspiciatis tempora impedit praesentium doloremque id ad doloribus reiciendis, recusandae itaque magni, reprehenderit? Explicabo cumque inventore tempore doloremque. Aliquam, consequatur animi soluta dolores expedita assumenda! Sit, maiores suscipit reiciendis dolor adipisci autem laudantium corporis quia excepturi. Animi consequuntur nostrum facilis ipsam sapiente, distinctio. Porro quisquam qui, praesentium aliquid, architecto magnam aliquam repellendus deleniti maiores ab ea illum necessitatibus dolorem. Architecto debitis, enim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste molestiae, sit assumenda quia temporibus qui vel ullam necessitatibus repellendus cupiditate tenetur beatae laudantium, eos voluptatem dolore quae, consequatur! Blanditiis esse ipsam impedit distinctio sequi quae praesentium deleniti doloremque repellat, temporibus tempora omnis labore enim assumenda voluptatem sapiente architecto incidunt neque aliquam corrupti fugiat facilis. Odit veniam illo magnam praesentium quasi quae maiores fuga eum. Accusamus aliquid tempora eum dolores eaque quasi omnis aut. Ea eos culpa dolorum, sint nobis suscipit quaerat harum, iure illo eligendi omnis nam dolorem itaque aliquam eaque voluptate praesentium possimus officia rerum mollitia nemo distinctio aperiam ratione quo. Optio assumenda cupiditate expedita quod aperiam illo blanditiis nisi, harum eos inventore nesciunt nobis tempora ipsum deleniti, accusantium suscipit deserunt voluptatibus porro in mollitia eum. Pariatur consequatur iste, veritatis quae maxime nisi magni dolores possimus quasi id. Inventore repellat reprehenderit fuga, eaque distinctio expedita fugiat. Facilis, repellendus, alias.</p>
</section>
If you want header to be hidden before you scroll to 300px, then make it display: none, and add to .sticky display: block:
header {
display: none;
width: 100%;
height: 40px;
background-color: red;
}
.sticky {
position: fixed;
display: block;
}

make popup visible when scrolling

i want to show popup when user scroll to 50% of the page height with javascript. i got a problem:
1.when the popup show then i click close to close the popup, and i continue scroll down, the popup show again. (i try to didnt look like that).
2. if i go to the top of the page and i scroll to bottom again, the popup show again. basicaly i just want the popup to show 1 times any suggestion?
heres the jsfiddle
https://jsfiddle.net/xsv2u0sy/
window.onscroll = function(ev) {
if ((window.innerHeight+window.scrollY) >= halfScreen) {
if(popUp.className === "hide"){
popUp.className = "";
}
}
};
for(var i = 0; i<closePopUp.length; i++){
closePopUp[i].addEventListener('click', function(event) {
if(popUp.className === ""){
popUp.className = "hide";
}
});
}

Used simple boolean value condition.
Jsfiddle link
var popUp = document.getElementById("popup");
var closePopUp = document.getElementsByClassName('close');
var halfScreen = document.body.offsetHeight / 2;
var bool = true;
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= halfScreen && bool) {
if (popUp.className === "hide") {
popUp.className = "";
}
bool = false;
}
};
for (var i = 0; i < closePopUp.length; i++) {
closePopUp[i].addEventListener('click', function(event) {
if (popUp.className === "") {
popUp.className = "hide";
}
});
}
#popup {
background: red;
position: fixed;
top: 50%;
left: 50%;
padding: 15px;
height: 150px;
transform: translate(-50%, -50%);
overflow: hidden;
}
.hide {
display: none;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<div id="popup" class="hide">
<button class="close">x</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quibusdam ea, aspernatur, ipsum magnam nemo. Neque quod ullam ipsa veritatis, saepe facilis officiis officia odit quasi minima aliquam reiciendis ea, voluptatem, adipisci corporis deserunt.
Aspernatur officia, qui corporis tempora labore sunt. Alias repellat dolorum, porro repellendus, cum quod enim optio tempore iure. Excepturi adipisci quod doloribus assumenda suscipit rerum ad enim vitae minus fugiat! Quis blanditiis tempora cumque
voluptate</p>
</div>

Just track if it was opened already.
var needsPopup = true;
window.onscroll = function(ev) {
if (needsPopup && (window.innerHeight+window.scrollY) >= halfScreen) {
if(popUp.className === "hide"){
popUp.className = "";
needsPopup = false;
}
}
};
for(var i = 0; i<closePopUp.length; i++){
closePopUp[i].addEventListener('click', function(event) {
if(popUp.className === ""){
popUp.className = "hide";
}
});
}

If you are done with the event you should unbind it.
var popUp = document.getElementById("popup");
var closePopUp = document.getElementsByClassName('close');
var halfScreen = document.body.offsetHeight / 2;
function checkScroll(ev) {
if ((window.innerHeight + window.scrollY) >= halfScreen) {
popUp.className = "";
document.removeEventListener('scroll', checkScroll, false);
}
};
for (var i = 0; i < closePopUp.length; i++) {
closePopUp[i].addEventListener('click', function(event) {
if (popUp.className === "") {
popUp.className = "hide";
}
});
}
document.addEventListener('scroll', checkScroll, false);
#popup {
background: red;
position: fixed;
top: 50%;
left: 50%;
padding: 15px;
height: 150px;
transform: translate(-50%, -50%);
overflow: hidden;
}
.hide {
display: none;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<div id="popup" class="hide">
<button class="close">x</button>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quibusdam ea, aspernatur, ipsum magnam nemo. Neque quod ullam ipsa veritatis, saepe facilis officiis officia odit quasi minima aliquam reiciendis ea, voluptatem, adipisci corporis deserunt.
Aspernatur officia, qui corporis tempora labore sunt. Alias repellat dolorum, porro repellendus, cum quod enim optio tempore iure. Excepturi adipisci quod doloribus assumenda suscipit rerum ad enim vitae minus fugiat! Quis blanditiis tempora cumque
voluptate</p>
</div>

Scrollspy table of content not following scroll

I'm using materializecss scrollspy component on my website, the scrollspy link is working. But the only thing that bother me is the scrollspy's table of content didn't following the scroll position.
<div class="row">
<div class="col hide-on-small-only m3 l2">
<ul class="section table-of-contents">
<li>About Us</li>
<li>Information Technology</li>
<li>Trade Marketing</li>
</ul>
</div>
<div class="col s12 m9 l10">
<div id="about" class="section scrollspy">
<h5>About Us</h5>
<p><p>
<span><br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat temporibus sunt, velit reprehenderit fuga culpa. Nesciunt ducimus, maiores, alias, repellat corrupti dolorem, unde aliquid non itaque odit asperiores porro recusandae.</span>
<span><br><br>Temporibus veniam veritatis nesciunt rem ipsum ab placeat magnam molestias nemo, officia officiis aut distinctio sint dolor. Quas facere atque animi, tenetur voluptas optio recusandae cumque nostrum commodi! Porro, aliquam.</span>
<span><br><br>Corrupti vero quos quia voluptas officia, numquam doloribus, earum sunt adipisci repellat error aut, reiciendis rem id illo laborum eligendi facilis consectetur expedita dicta libero. Esse autem asperiores adipisci temporibus!</span>
<span><br><br>Ea et voluptates, quibusdam incidunt excepturi consequatur, perspiciatis facere culpa quo rerum qui consectetur hic enim, iure repellendus! Harum voluptate expedita et nostrum, fugit distinctio ipsa sequi facere inventore, praesentium!</span>
<span><br><br>Magnam optio impedit nostrum quos eligendi ea porro tempora! Pariatur consectetur ratione eius ad placeat dolor vero ipsa excepturi officia ullam sed culpa, quia quibusdam distinctio similique reiciendis laboriosam molestiae?</span>
<span><br><br>Consectetur rerum aut ad quia optio iusto maxime, animi sunt. Sunt, totam, ipsam! Quibusdam harum aliquid ipsum! Minus dignissimos cum voluptate vel obcaecati nihil consequatur, rem in. Minima, ea, placeat.</span>
<span><br><br>Facere dolorum reprehenderit praesentium! Esse velit numquam dolorum minus odio consectetur dolore illo aliquam aliquid illum veniam eligendi explicabo fuga quo aperiam, nam, deleniti sed natus rerum doloribus reprehenderit. Laudantium!</span>
<span><br><br>Ab provident debitis enim iure nobis cupiditate consequuntur maxime numquam culpa iusto. Ipsa aperiam maxime quia accusamus, dolor, in dolore beatae perferendis incidunt, corrupti aut alias quaerat doloremque quae deleniti.</span>
</p></p>
</div>
<div class="divider"></div>
<div id="information" class="section scrollspy">
<h5>Information Technology</h5>
<p><p>
<span><br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat temporibus sunt, velit reprehenderit fuga culpa. Nesciunt ducimus, maiores, alias, repellat corrupti dolorem, unde aliquid non itaque odit asperiores porro recusandae.</span>
<span><br><br>Temporibus veniam veritatis nesciunt rem ipsum ab placeat magnam molestias nemo, officia officiis aut distinctio sint dolor. Quas facere atque animi, tenetur voluptas optio recusandae cumque nostrum commodi! Porro, aliquam.</span>
<span><br><br>Corrupti vero quos quia voluptas officia, numquam doloribus, earum sunt adipisci repellat error aut, reiciendis rem id illo laborum eligendi facilis consectetur expedita dicta libero. Esse autem asperiores adipisci temporibus!</span>
<span><br><br>Ea et voluptates, quibusdam incidunt excepturi consequatur, perspiciatis facere culpa quo rerum qui consectetur hic enim, iure repellendus! Harum voluptate expedita et nostrum, fugit distinctio ipsa sequi facere inventore, praesentium!</span>
<span><br><br>Magnam optio impedit nostrum quos eligendi ea porro tempora! Pariatur consectetur ratione eius ad placeat dolor vero ipsa excepturi officia ullam sed culpa, quia quibusdam distinctio similique reiciendis laboriosam molestiae?</span>
<span><br><br>Consectetur rerum aut ad quia optio iusto maxime, animi sunt. Sunt, totam, ipsam! Quibusdam harum aliquid ipsum! Minus dignissimos cum voluptate vel obcaecati nihil consequatur, rem in. Minima, ea, placeat.</span>
<span><br><br>Facere dolorum reprehenderit praesentium! Esse velit numquam dolorum minus odio consectetur dolore illo aliquam aliquid illum veniam eligendi explicabo fuga quo aperiam, nam, deleniti sed natus rerum doloribus reprehenderit. Laudantium!</span>
<span><br><br>Ab provident debitis enim iure nobis cupiditate consequuntur maxime numquam culpa iusto. Ipsa aperiam maxime quia accusamus, dolor, in dolore beatae perferendis incidunt, corrupti aut alias quaerat doloremque quae deleniti.</span>
</p> </p>
</div>
<div class="divider"></div>
<div id="trade" class="section scrollspy">
<h5>Trade Marketing</h5>
<p><p>
<span><br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat temporibus sunt, velit reprehenderit fuga culpa. Nesciunt ducimus, maiores, alias, repellat corrupti dolorem, unde aliquid non itaque odit asperiores porro recusandae.</span>
<span><br><br>Temporibus veniam veritatis nesciunt rem ipsum ab placeat magnam molestias nemo, officia officiis aut distinctio sint dolor. Quas facere atque animi, tenetur voluptas optio recusandae cumque nostrum commodi! Porro, aliquam.</span>
<span><br><br>Corrupti vero quos quia voluptas officia, numquam doloribus, earum sunt adipisci repellat error aut, reiciendis rem id illo laborum eligendi facilis consectetur expedita dicta libero. Esse autem asperiores adipisci temporibus!</span>
<span><br><br>Ea et voluptates, quibusdam incidunt excepturi consequatur, perspiciatis facere culpa quo rerum qui consectetur hic enim, iure repellendus! Harum voluptate expedita et nostrum, fugit distinctio ipsa sequi facere inventore, praesentium!</span>
<span><br><br>Magnam optio impedit nostrum quos eligendi ea porro tempora! Pariatur consectetur ratione eius ad placeat dolor vero ipsa excepturi officia ullam sed culpa, quia quibusdam distinctio similique reiciendis laboriosam molestiae?</span>
<span><br><br>Consectetur rerum aut ad quia optio iusto maxime, animi sunt. Sunt, totam, ipsam! Quibusdam harum aliquid ipsum! Minus dignissimos cum voluptate vel obcaecati nihil consequatur, rem in. Minima, ea, placeat.</span>
<span><br><br>Facere dolorum reprehenderit praesentium! Esse velit numquam dolorum minus odio consectetur dolore illo aliquam aliquid illum veniam eligendi explicabo fuga quo aperiam, nam, deleniti sed natus rerum doloribus reprehenderit. Laudantium!</span>
<span><br><br>Ab provident debitis enim iure nobis cupiditate consequuntur maxime numquam culpa iusto. Ipsa aperiam maxime quia accusamus, dolor, in dolore beatae perferendis incidunt, corrupti aut alias quaerat doloremque quae deleniti.</span>
</p></p>
</div>
</div>
</div>
And this is the jquery
$('.scrollspy').scrollSpy();
Or please check this codepen for more details.

Use position: fixed to .table-of-contents, Have a look at the updated Codepen.
For your reference:
.table-of-contents {
position: fixed;
}

Pardon for my stupid question,
I just need to use pushpin components on the table of content.
Here's the jquery example:
$('.table-of-contents').pushpin({
top: 900,
bottom: 2000,
offset: 0
});
Here's the updated codepen

you can use this for managing the scroll position of the content on click :
JS:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!--<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () { });
$('.scrollspy').scrollspy();
</script>.
HTML:
<div class="row">
<div class="col hide-on-small-only m3 l2">
<ul class="section table-of-contents">
<li>About Us</li>
<li>Information Technology</li>
<li>Trade Marketing</li>
</ul>
</div>
<div class="col s12 m9 l10">
<div id="about" class="section scrollspy">
<h2>About Us</h2>
<p>
<span><br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat temporibus sunt, velit reprehenderit fuga culpa. Nesciunt ducimus, maiores, alias, repellat corrupti dolorem, unde aliquid non itaque odit asperiores porro recusandae.</span>
<span><br><br>Temporibus veniam veritatis nesciunt rem ipsum ab placeat magnam molestias nemo, officia officiis aut distinctio sint dolor. Quas facere atque animi, tenetur voluptas optio recusandae cumque nostrum commodi! Porro, aliquam.</span>
<span><br><br>Corrupti vero quos quia voluptas officia, numquam doloribus, earum sunt adipisci repellat error aut, reiciendis rem id illo laborum eligendi facilis consectetur expedita dicta libero. Esse autem asperiores adipisci temporibus!</span>
<span><br><br>Ea et voluptates, quibusdam incidunt excepturi consequatur, perspiciatis facere culpa quo rerum qui consectetur hic enim, iure repellendus! Harum voluptate expedita et nostrum, fugit distinctio ipsa sequi facere inventore, praesentium!</span>
<span><br><br>Magnam optio impedit nostrum quos eligendi ea porro tempora! Pariatur consectetur ratione eius ad placeat dolor vero ipsa excepturi officia ullam sed culpa, quia quibusdam distinctio similique reiciendis laboriosam molestiae?</span>
<span><br><br>Consectetur rerum aut ad quia optio iusto maxime, animi sunt. Sunt, totam, ipsam! Quibusdam harum aliquid ipsum! Minus dignissimos cum voluptate vel obcaecati nihil consequatur, rem in. Minima, ea, placeat.</span>
<span><br><br>Facere dolorum reprehenderit praesentium! Esse velit numquam dolorum minus odio consectetur dolore illo aliquam aliquid illum veniam eligendi explicabo fuga quo aperiam, nam, deleniti sed natus rerum doloribus reprehenderit. Laudantium!</span>
<span><br><br>Ab provident debitis enim iure nobis cupiditate consequuntur maxime numquam culpa iusto. Ipsa aperiam maxime quia accusamus, dolor, in dolore beatae perferendis incidunt, corrupti aut alias quaerat doloremque quae deleniti.</span>
</p>
</div>
<div class=""></div>
<div id="information" class="section scrollspy">
<h2>Information Technology</h2>
<p>
<span><br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat temporibus sunt, velit reprehenderit fuga culpa. Nesciunt ducimus, maiores, alias, repellat corrupti dolorem, unde aliquid non itaque odit asperiores porro recusandae.</span>
<span><br><br>Temporibus veniam veritatis nesciunt rem ipsum ab placeat magnam molestias nemo, officia officiis aut distinctio sint dolor. Quas facere atque animi, tenetur voluptas optio recusandae cumque nostrum commodi! Porro, aliquam.</span>
<span><br><br>Corrupti vero quos quia voluptas officia, numquam doloribus, earum sunt adipisci repellat error aut, reiciendis rem id illo laborum eligendi facilis consectetur expedita dicta libero. Esse autem asperiores adipisci temporibus!</span>
<span><br><br>Ea et voluptates, quibusdam incidunt excepturi consequatur, perspiciatis facere culpa quo rerum qui consectetur hic enim, iure repellendus! Harum voluptate expedita et nostrum, fugit distinctio ipsa sequi facere inventore, praesentium!</span>
<span><br><br>Magnam optio impedit nostrum quos eligendi ea porro tempora! Pariatur consectetur ratione eius ad placeat dolor vero ipsa excepturi officia ullam sed culpa, quia quibusdam distinctio similique reiciendis laboriosam molestiae?</span>
<span><br><br>Consectetur rerum aut ad quia optio iusto maxime, animi sunt. Sunt, totam, ipsam! Quibusdam harum aliquid ipsum! Minus dignissimos cum voluptate vel obcaecati nihil consequatur, rem in. Minima, ea, placeat.</span>
<span><br><br>Facere dolorum reprehenderit praesentium! Esse velit numquam dolorum minus odio consectetur dolore illo aliquam aliquid illum veniam eligendi explicabo fuga quo aperiam, nam, deleniti sed natus rerum doloribus reprehenderit. Laudantium!</span>
<span><br><br>Ab provident debitis enim iure nobis cupiditate consequuntur maxime numquam culpa iusto. Ipsa aperiam maxime quia accusamus, dolor, in dolore beatae perferendis incidunt, corrupti aut alias quaerat doloremque quae deleniti.</span>
</p>
</div>
<div class=""></div>
<div id="trade" class="section scrollspy">
<h2>Trade Marketing</h2>
<p>
<span><br><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat temporibus sunt, velit reprehenderit fuga culpa. Nesciunt ducimus, maiores, alias, repellat corrupti dolorem, unde aliquid non itaque odit asperiores porro recusandae.</span>
<span><br><br>Temporibus veniam veritatis nesciunt rem ipsum ab placeat magnam molestias nemo, officia officiis aut distinctio sint dolor. Quas facere atque animi, tenetur voluptas optio recusandae cumque nostrum commodi! Porro, aliquam.</span>
<span><br><br>Corrupti vero quos quia voluptas officia, numquam doloribus, earum sunt adipisci repellat error aut, reiciendis rem id illo laborum eligendi facilis consectetur expedita dicta libero. Esse autem asperiores adipisci temporibus!</span>
<span><br><br>Ea et voluptates, quibusdam incidunt excepturi consequatur, perspiciatis facere culpa quo rerum qui consectetur hic enim, iure repellendus! Harum voluptate expedita et nostrum, fugit distinctio ipsa sequi facere inventore, praesentium!</span>
<span><br><br>Magnam optio impedit nostrum quos eligendi ea porro tempora! Pariatur consectetur ratione eius ad placeat dolor vero ipsa excepturi officia ullam sed culpa, quia quibusdam distinctio similique reiciendis laboriosam molestiae?</span>
<span><br><br>Consectetur rerum aut ad quia optio iusto maxime, animi sunt. Sunt, totam, ipsam! Quibusdam harum aliquid ipsum! Minus dignissimos cum voluptate vel obcaecati nihil consequatur, rem in. Minima, ea, placeat.</span>
<span><br><br>Facere dolorum reprehenderit praesentium! Esse velit numquam dolorum minus odio consectetur dolore illo aliquam aliquid illum veniam eligendi explicabo fuga quo aperiam, nam, deleniti sed natus rerum doloribus reprehenderit. Laudantium!</span>
<span><br><br>Ab provident debitis enim iure nobis cupiditate consequuntur maxime numquam culpa iusto. Ipsa aperiam maxime quia accusamus, dolor, in dolore beatae perferendis incidunt, corrupti aut alias quaerat doloremque quae deleniti.</span>
</p>
</div>
</div>
</div>
refer to codepen