jQuery Scroll To Section of Page

jQuery Scroll To Section of Page - javascript

I'm trying to build a new trendy one page website where I scroll to a section on the page. I want to bring the "fixed" header to exactly where the content is. I am using the Zurb Foundation. This is what I have so far (some of the code found here):
<li><%= link_to "Recent Work", "#", "data-scroll" => "recent" %></li>
$(document).ready(function() {
$("a[data-scroll]").click(function() {
var id = $(this).data("scroll")
$('html,body').animate({
scrollTop: $("#"+id).offset().top},
'slow');
});
});
<div id="recent">some content</div>
Problem I have is stated above. I want to bring my fixed header to exactly where this div is placed on the page. Please advise.

There's a plugin for that.
Or just roll your own.
If you need to offset the "roll your own" solution then try the following:
$("#button").click(function() {
var offset = 20; //Offset of 20px
$('html, body').animate({
scrollTop: $("#elementtoScrollToID").offset().top + offset
}, 2000);
});

Over 5 years since this question was asked and answered, and things have changed a bit. Most people will probably be using Javascript frameworks like Angular or React now, but for those who are not (like myself, working on some older legacy projects), I have made some alterations on cereallarceny's answer.
This solution allows for scrolling on any element, not just the body, and takes into account any scrolling already made on the element.
$("#button").click(function() {
// Find the element that you are scrolling (commonly body, but doesn't need to be!)
var scrollingElement = $('#scrollingElement');
// Find the element that you want to scroll to.
var targetElement = $("#targetElement");
// Stop any current animations (prevents a backlog of scroll animations for trigger-happy end-users)
scrollingElement.stop();
// Define the scrolling animation...
scrollingElement.animate({
scrollTop:
// The distance in pixels from the top of the page to the top of the target element.
targetElement.offset().top
// The distance in pixels from the top of the page to the top of the scrolling element.
- scrollingElement.offset().top
// So far, the above two offsets determine how far down the scrolling element the target actually is...
// The distance in pixels the scrolling element has ALREADY been scrolled.
+ scrollingElement.scrollTop()
// SUCCESS! This will now take us to the target element.
// OPTIONAL PART - SCROLLING OFFSET (for prettiness :])
// This will change based on how you set up your page. Here are some examples...
// To allow for a margin above your target...
- parseFloat(targetElement.css("margin-top"))
// To allow for padding from a parent element (in this case the scrolling element)...
- parseFloat(scrollingElement.css("padding-top"))
// If all else fails, you can always specify your own amount (in pixels)...
- 20
},
200); // Duration in milliseconds of the scroll animation
});
Live Example
var listItem = $("li")
listItem.on("click", function() {
var scrollingElement = $('#scrollingElement');
var targetElement = $(this.dataset.link);
scrollingElement.stop();
scrollingElement.animate({
scrollTop: targetElement.offset().top -
scrollingElement.offset().top +
scrollingElement.scrollTop() -
parseFloat(targetElement.css("margin-top"))
}, 200);
})
html,
body {
background: #FFF;
height: 100%;
margin: 0;
}
li {
cursor: pointer;
list-style: none;
margin: 10px;
}
li:hover {
color: blue;
}
#links {
border: solid 1px black;
float: left;
height: 90%;
margin: 3%;
width: 20%;
}
#scrollingElement {
border: solid 1px black;
float: left;
height: 90%;
margin: 3%;
overflow: auto;
width: 60%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="links">
<ul>
<li data-link="#head1">Heading 1</li>
<li data-link="#head2">Heading 2</li>
<li data-link="#head3">Heading 3</li>
<li data-link="#head4">Heading 4</li>
<li data-link="#head5">Heading 5</li>
</ul>
</div>
<div id="scrollingElement">
<h1 id="head1">Heading 1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo interdum, tincidunt felis a, condimentum est. Donec pulvinar tincidunt orci, vitae aliquet diam luctus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Praesent varius cursus lorem, ultrices porta erat vehicula sed. Donec blandit venenatis laoreet. Morbi venenatis hendrerit suscipit. Pellentesque justo velit, ultricies id orci et, viverra fermentum nibh. Nulla vitae interdum
tellus. Duis bibendum maximus mauris ac condimentum. Phasellus convallis ligula ligula, sed tempor quam varius ac. Etiam dignissim arcu sed nibh facilisis, eu rutrum elit pharetra. Suspendisse dignissim commodo eros, rutrum volutpat orci mollis
quis. Donec vulputate, tortor eget viverra sodales, ex libero euismod sapien, dignissim interdum neque urna non orci. Fusce eget ex iaculis, aliquam tortor sit amet, congue velit. Curabitur eget pretium odio. Phasellus dapibus, sapien ut tempor
dapibus, mauris felis venenatis magna, in posuere metus nulla in justo. Nam accumsan finibus libero ut gravida. Duis orci dolor, vulputate ut quam sit amet, egestas porttitor diam. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Proin ultricies sapien eu dignissim lacinia. Donec ut porta metus. Pellentesque ultrices gravida auctor. Quisque nulla risus, ornare eu molestie at, dapibus vitae tortor. Nullam consequat libero in libero sollicitudin, in
luctus ante semper. In hac habitasse platea dictumst. Sed ultricies mattis ex, ac feugiat diam pharetra vitae. Vestibulum malesuada pulvinar sem vitae commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras porta gravida mollis. Aliquam mollis mi ac nisl fermentum elementum. Morbi vestibulum efficitur dolor ut consectetur.
</p>
<h1 id="head2">Heading 2</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo interdum, tincidunt felis a, condimentum est. Donec pulvinar tincidunt orci, vitae aliquet diam luctus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Praesent varius cursus lorem, ultrices porta erat vehicula sed. Donec blandit venenatis laoreet. Morbi venenatis hendrerit suscipit. Pellentesque justo velit, ultricies id orci et, viverra fermentum nibh. Nulla vitae interdum
tellus. Duis bibendum maximus mauris ac condimentum. Phasellus convallis ligula ligula, sed tempor quam varius ac. Etiam dignissim arcu sed nibh facilisis, eu rutrum elit pharetra. Suspendisse dignissim commodo eros, rutrum volutpat orci mollis
quis. Donec vulputate, tortor eget viverra sodales, ex libero euismod sapien, dignissim interdum neque urna non orci. Fusce eget ex iaculis, aliquam tortor sit amet, congue velit. Curabitur eget pretium odio. Phasellus dapibus, sapien ut tempor
dapibus, mauris felis venenatis magna, in posuere metus nulla in justo. Nam accumsan finibus libero ut gravida. Duis orci dolor, vulputate ut quam sit amet, egestas porttitor diam. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Proin ultricies sapien eu dignissim lacinia. Donec ut porta metus. Pellentesque ultrices gravida auctor. Quisque nulla risus, ornare eu molestie at, dapibus vitae tortor. Nullam consequat libero in libero sollicitudin, in
luctus ante semper. In hac habitasse platea dictumst. Sed ultricies mattis ex, ac feugiat diam pharetra vitae. Vestibulum malesuada pulvinar sem vitae commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras porta gravida mollis. Aliquam mollis mi ac nisl fermentum elementum. Morbi vestibulum efficitur dolor ut consectetur.
</p>
<h1 id="head3">Heading 3</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo interdum, tincidunt felis a, condimentum est. Donec pulvinar tincidunt orci, vitae aliquet diam luctus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Praesent varius cursus lorem, ultrices porta erat vehicula sed. Donec blandit venenatis laoreet. Morbi venenatis hendrerit suscipit. Pellentesque justo velit, ultricies id orci et, viverra fermentum nibh. Nulla vitae interdum
tellus. Duis bibendum maximus mauris ac condimentum. Phasellus convallis ligula ligula, sed tempor quam varius ac. Etiam dignissim arcu sed nibh facilisis, eu rutrum elit pharetra. Suspendisse dignissim commodo eros, rutrum volutpat orci mollis
quis. Donec vulputate, tortor eget viverra sodales, ex libero euismod sapien, dignissim interdum neque urna non orci. Fusce eget ex iaculis, aliquam tortor sit amet, congue velit. Curabitur eget pretium odio. Phasellus dapibus, sapien ut tempor
dapibus, mauris felis venenatis magna, in posuere metus nulla in justo. Nam accumsan finibus libero ut gravida. Duis orci dolor, vulputate ut quam sit amet, egestas porttitor diam. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Proin ultricies sapien eu dignissim lacinia. Donec ut porta metus. Pellentesque ultrices gravida auctor. Quisque nulla risus, ornare eu molestie at, dapibus vitae tortor. Nullam consequat libero in libero sollicitudin, in
luctus ante semper. In hac habitasse platea dictumst. Sed ultricies mattis ex, ac feugiat diam pharetra vitae. Vestibulum malesuada pulvinar sem vitae commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras porta gravida mollis. Aliquam mollis mi ac nisl fermentum elementum. Morbi vestibulum efficitur dolor ut consectetur.
</p>
<h1 id="head4">Heading 4</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo interdum, tincidunt felis a, condimentum est. Donec pulvinar tincidunt orci, vitae aliquet diam luctus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Praesent varius cursus lorem, ultrices porta erat vehicula sed. Donec blandit venenatis laoreet. Morbi venenatis hendrerit suscipit. Pellentesque justo velit, ultricies id orci et, viverra fermentum nibh. Nulla vitae interdum
tellus. Duis bibendum maximus mauris ac condimentum. Phasellus convallis ligula ligula, sed tempor quam varius ac. Etiam dignissim arcu sed nibh facilisis, eu rutrum elit pharetra. Suspendisse dignissim commodo eros, rutrum volutpat orci mollis
quis. Donec vulputate, tortor eget viverra sodales, ex libero euismod sapien, dignissim interdum neque urna non orci. Fusce eget ex iaculis, aliquam tortor sit amet, congue velit. Curabitur eget pretium odio. Phasellus dapibus, sapien ut tempor
dapibus, mauris felis venenatis magna, in posuere metus nulla in justo. Nam accumsan finibus libero ut gravida. Duis orci dolor, vulputate ut quam sit amet, egestas porttitor diam. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Proin ultricies sapien eu dignissim lacinia. Donec ut porta metus. Pellentesque ultrices gravida auctor. Quisque nulla risus, ornare eu molestie at, dapibus vitae tortor. Nullam consequat libero in libero sollicitudin, in
luctus ante semper. In hac habitasse platea dictumst. Sed ultricies mattis ex, ac feugiat diam pharetra vitae. Vestibulum malesuada pulvinar sem vitae commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras porta gravida mollis. Aliquam mollis mi ac nisl fermentum elementum. Morbi vestibulum efficitur dolor ut consectetur.
</p>
<h1 id="head5">Heading 5</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed justo interdum, tincidunt felis a, condimentum est. Donec pulvinar tincidunt orci, vitae aliquet diam luctus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos himenaeos. Praesent varius cursus lorem, ultrices porta erat vehicula sed. Donec blandit venenatis laoreet. Morbi venenatis hendrerit suscipit. Pellentesque justo velit, ultricies id orci et, viverra fermentum nibh. Nulla vitae interdum
tellus. Duis bibendum maximus mauris ac condimentum. Phasellus convallis ligula ligula, sed tempor quam varius ac. Etiam dignissim arcu sed nibh facilisis, eu rutrum elit pharetra. Suspendisse dignissim commodo eros, rutrum volutpat orci mollis
quis. Donec vulputate, tortor eget viverra sodales, ex libero euismod sapien, dignissim interdum neque urna non orci. Fusce eget ex iaculis, aliquam tortor sit amet, congue velit. Curabitur eget pretium odio. Phasellus dapibus, sapien ut tempor
dapibus, mauris felis venenatis magna, in posuere metus nulla in justo. Nam accumsan finibus libero ut gravida. Duis orci dolor, vulputate ut quam sit amet, egestas porttitor diam. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Proin ultricies sapien eu dignissim lacinia. Donec ut porta metus. Pellentesque ultrices gravida auctor. Quisque nulla risus, ornare eu molestie at, dapibus vitae tortor. Nullam consequat libero in libero sollicitudin, in
luctus ante semper. In hac habitasse platea dictumst. Sed ultricies mattis ex, ac feugiat diam pharetra vitae. Vestibulum malesuada pulvinar sem vitae commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Cras porta gravida mollis. Aliquam mollis mi ac nisl fermentum elementum. Morbi vestibulum efficitur dolor ut consectetur.
</p>
</div>
</body>
</html>

Related

Expand custom cursor circle when hovering over a clickable element

I want to achieve a custom cursor with CSS and pure Javascript (no jQuery) similar to this website: https://www.bildundton.ch/de
The cursor (circle) should expand itself when hovering over a clickable element, such as a tags and buttons. I already achieved this effect but my problem is that when I hover over a clickable element the cursor sometimes gets smaller again.
The Problem. I'm still hovering over the button, but the circle is not expanded.
How it always should look like when hovering over a clickable element
This is my code
const cursor = document.querySelector('#custom-cursor');
const clickableElements = Array.from(document.querySelectorAll('a, button'));
document.addEventListener('mousemove', updateCursor);
window.addEventListener('scroll', updateCursor);
function updateCursor(e) {
cursor.style.left = `${e.clientX}px`;
cursor.style.top = `${e.clientY}px`;
let isHover = false;
for (let index = 0; index < clickableElements.length; index++) {
if (clickableElements[index].matches(':hover')) {
isHover = true;
cursor.classList.add('expand-circle');
}
break;
}
if (!isHover && cursor.classList.contains('expand-circle')) {
cursor.classList.remove('expand-circle');
}
}
* {
cursor: none;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
#custom-cursor {
background-color: transparent;
border: 1px solid red;
height: 20px;
width: 20px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
position: fixed;
z-index: 1;
will-change: transform;
transition: transform .3s ease-in;
}
#custom-cursor.expand-circle {
transform: scale(1.75);
}
<div id="custom-cursor"></div>
<div class="container">
<button>This is a clickable element</button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.
Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus.
Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet.
Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor.
Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor.
Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula.
Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.
Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper.
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo.
Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor.
</div>

EDIT2: :hover is not working properly because the cursor is hovering above your circle. Simply add pointer-events: none:
const cursor = document.querySelector('#custom-cursor');
const clickableElements = Array.from(document.querySelectorAll('a, button'));
document.addEventListener('mousemove', updateCursor);
window.addEventListener('scroll', updateCursor);
function updateCursor(e) {
cursor.style.left = `${e.clientX}px`;
cursor.style.top = `${e.clientY}px`;
let isHover = false;
for (let index = 0; index < clickableElements.length; index++) {
if (clickableElements[index].matches(':hover')) {
isHover = true;
cursor.classList.add('expand-circle');
}
break;
}
if (!isHover && cursor.classList.contains('expand-circle')) {
cursor.classList.remove('expand-circle');
}
}
* {
cursor: none;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
#custom-cursor {
background-color: transparent;
border: 1px solid red;
height: 20px;
width: 20px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
position: fixed;
z-index: 1;
will-change: transform;
transition: transform .3s ease-in;
pointer-events: none;
}
#custom-cursor.expand-circle {
transform: scale(1.75);
}
<div id="custom-cursor"></div>
<div class="container">
<button>This is a clickable element</button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.
Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus.
Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet.
Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor.
Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor.
Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula.
Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.
Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper.
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo.
Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor.
</div>
Previous answer:
I'm not sure why :hover was not working, but the reliable method is to check element boundaries with getBoundingClientRect - see the snippet
Also, the center of your circle is not where the cursor is pointing, but that's a separate issue
EDIT: :hover was not working probably because of resizing your circle, which resulted in cursor hovering above it
const cursor = document.querySelector('#custom-cursor');
const clickableElements = Array.from(document.querySelectorAll('a, button'));
document.addEventListener('mousemove', updateCursor);
window.addEventListener('scroll', updateCursor);
function updateCursor(e) {
cursor.style.left = `${e.clientX}px`;
cursor.style.top = `${e.clientY}px`;
const isHover = clickableElements.some(element => {
const {left, right, top, bottom} = element.getBoundingClientRect();
//console.log({left, right, top, bottom}, {x: e.clientX, y: e.clientY});
return e.clientX >= left && e.clientX <= right && e.clientY >= top && e.clientY <= bottom;
});
if (isHover) {
cursor.classList.add('expand-circle');
//console.log('add');
}
else if (cursor.classList.contains('expand-circle')) {
cursor.classList.remove('expand-circle');
//console.log('remove');
}
}
* {
cursor: none;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
#custom-cursor {
background-color: transparent;
border: 1px solid red;
height: 20px;
width: 20px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
position: fixed;
z-index: 1;
will-change: transform;
transition: transform .3s ease-in;
}
#custom-cursor.expand-circle {
transform: scale(1.75);
}
<div id="custom-cursor"></div>
<div class="container">
<button>This is a clickable element</button>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet.
Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.
Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus.
Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet.
Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor.
Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor.
Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo. Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula.
Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.
Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.
Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper.
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. Morbi mi. Quisque nisl felis, venenatis tristique, dignissim in, ultrices sit amet, augue. Proin sodales libero eget ante. Nulla quam. Aenean laoreet. Vestibulum nisi lectus, commodo ac, facilisis ac, ultricies eu, pede. Ut orci risus, accumsan porttitor, cursus quis, aliquet eget, justo.
Sed pretium blandit orci. Ut eu diam at pede suscipit sodales. Aenean lectus elit, fermentum non, convallis id, sagittis at, neque. Nullam mauris orci, aliquet et, iaculis et, viverra vitae, ligula. Nulla ut felis in purus aliquam imperdiet. Maecenas aliquet mollis lectus. Vivamus consectetuer risus et tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor.
Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi.
Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor.
</div>

How to make a vertical progress indicator map

I'm working on a project for a buddy and I was wondering how I might be able to achieve a vertical scrolling effect similar to the one with books on this page https://pudding.cool/2019/06/summer-reading/
The vertical scroll bar indicator I'm looking to replicate is on the right side of the page
I looked at the code and it looks like they used a specific class as multiple divs, but wasnt sure if there was a different way to achieve this
EDIT: was in a rush when I posted this, more info follows.
I reviewed W3 schools guide on how to create a scroll indicator
https://www.w3schools.com/howto/howto_js_scroll_indicator.asp
and was able to modify it to be fixed and vertical, now I'm looking at using this concept to mirror the target outcome indicated above. I put together a very basic fiddle of the general idea
https://jsfiddle.net/sq0z314o/
// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = scrolled + "%";
}
/* Style the header: fixed position (always stay at the top) */
.scroll {
position: fixed;
top: 0;
z-index: 1;
height: 100%;
background-color: #f1f1f1;
}
/* The progress container (grey background) */
.progress-container {
height: 100%;
width: 8px;
background: #ccc;
}
/* The progress bar (scroll indicator) */
.progress-bar {
width: 8px;
background: #4caf50;
height: 0%;
}
.content {
width: 75%;
margin: auto;
}
<div class="scroll">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<div class = "content">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.</p>
<p> Nulla sem ex, ultrices at velit id, tempor consequat neque. Nulla at molestie mi, ullamcorper interdum purus. Cras elementum, orci a sollicitudin elementum, tellus sem sodales mi, eget consectetur mi nunc non velit. Maecenas id mauris massa. Donec sed eros erat. Nam interdum sollicitudin elementum. Maecenas laoreet commodo gravida. Duis orci dolor, aliquet sed viverra ut, euismod ac sem. In hendrerit nisl quis massa tristique, vitae cursus urna consectetur.</p>
<p> Suspendisse maximus dapibus orci, sed faucibus leo iaculis sed. Sed quam ante, accumsan ac gravida ut, feugiat volutpat ligula. Sed aliquet nisi metus, a dapibus diam porttitor et. Suspendisse potenti. Mauris dapibus interdum orci at blandit. Vivamus sit amet turpis est. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p> Etiam sodales id velit nec pulvinar. Nulla facilisi. Phasellus lobortis arcu a lobortis consectetur. Proin vitae laoreet odio. Ut sem purus, finibus non ante vitae, porttitor cursus leo. In sed dui lectus. Cras in enim vel ipsum fermentum condimentum. Praesent sit amet fringilla dui. Sed hendrerit varius enim vitae pulvinar. Duis hendrerit eleifend urna, eget cursus odio vulputate eu. Etiam pretium elit quis nibh tristique semper. Praesent vitae sem sed felis aliquam bibendum sed ac justo. Ut eu venenatis neque, vel tristique lacus. Etiam condimentum sit amet est in pulvinar.</p>
<p> Sed ut pellentesque dolor. Suspendisse blandit tellus at orci pellentesque, a mattis diam dictum. Nullam condimentum et sapien sed tincidunt. Sed consequat urna nec arcu suscipit, vel dapibus elit porttitor. Suspendisse arcu est, ultrices vitae nisi nec, finibus malesuada ex. Aliquam erat volutpat. Fusce odio felis, posuere a dictum ut, dignissim dictum felis. Integer quis eros erat. Sed sed augue finibus, mattis nisl at, auctor orci. Praesent ex metus, viverra et molestie quis, suscipit eget quam. Praesent vehicula elementum tortor, sed dictum mauris. In lectus elit, gravida id iaculis nec, bibendum et ante.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.</p>
</div>

If you are ok with having a fixed height in the scrollbar, here you have an option. Hope it helps:
I duplicated the text content inside the .progress-container node and add a different class called .content-little. It has position: absolute so it overlaps the scrollbar.
I also added several styles, like a little font-size to the .content-little, hardcoded width and height to the scrollbar and children. So be aware that the CSS is different.
window.addEventListener('scroll', () => {
const winScroll =
document.body.scrollTop || document.documentElement.scrollTop;
const height =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
const scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.height = `${scrolled}%`;
});
.scroll {
position: fixed;
top: 0;
z-index: 1;
height: 320px;
background-color: #f1f1f1;
}
.progress-container {
position: relative;
height: 100%;
width: 70px;
background: #ccc;
padding-left: 6px;
}
.progress-bar {
position: absolute;
left: -10px;
width: 90px;
background: #4caf50;
height: 0%;
}
.content-little {
position: absolute;
font-size: 3px;
width: 60px;
height: 100%;
overflow: hidden;
}
.content {
width: 60%;
margin: auto;
}
<div class="scroll">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
<div class="content-little">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero
urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae
dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et
luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod,
luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam
vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at
nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam
tristique neque enim.
</p>
<p>
Nulla sem ex, ultrices at velit id, tempor consequat neque. Nulla at
molestie mi, ullamcorper interdum purus. Cras elementum, orci a
sollicitudin elementum, tellus sem sodales mi, eget consectetur mi nunc
non velit. Maecenas id mauris massa. Donec sed eros erat. Nam interdum
sollicitudin elementum. Maecenas laoreet commodo gravida. Duis orci dolor,
aliquet sed viverra ut, euismod ac sem. In hendrerit nisl quis massa
tristique, vitae cursus urna consectetur.
</p>
<p>
Suspendisse maximus dapibus orci, sed faucibus leo iaculis sed. Sed quam
ante, accumsan ac gravida ut, feugiat volutpat ligula. Sed aliquet nisi
metus, a dapibus diam porttitor et. Suspendisse potenti. Mauris dapibus
interdum orci at blandit. Vivamus sit amet turpis est. Interdum et
malesuada fames ac ante ipsum primis in faucibus.
</p>
<p>
Etiam sodales id velit nec pulvinar. Nulla facilisi. Phasellus lobortis
arcu a lobortis consectetur. Proin vitae laoreet odio. Ut sem purus,
finibus non ante vitae, porttitor cursus leo. In sed dui lectus. Cras in
enim vel ipsum fermentum condimentum. Praesent sit amet fringilla dui. Sed
hendrerit varius enim vitae pulvinar. Duis hendrerit eleifend urna, eget
cursus odio vulputate eu. Etiam pretium elit quis nibh tristique semper.
Praesent vitae sem sed felis aliquam bibendum sed ac justo. Ut eu
venenatis neque, vel tristique lacus. Etiam condimentum sit amet est in
pulvinar.
</p>
<p>
Sed ut pellentesque dolor. Suspendisse blandit tellus at orci
pellentesque, a mattis diam dictum. Nullam condimentum et sapien sed
tincidunt. Sed consequat urna nec arcu suscipit, vel dapibus elit
porttitor. Suspendisse arcu est, ultrices vitae nisi nec, finibus
malesuada ex. Aliquam erat volutpat. Fusce odio felis, posuere a dictum
ut, dignissim dictum felis. Integer quis eros erat. Sed sed augue finibus,
mattis nisl at, auctor orci. Praesent ex metus, viverra et molestie quis,
suscipit eget quam. Praesent vehicula elementum tortor, sed dictum mauris.
In lectus elit, gravida id iaculis nec, bibendum et ante.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero
urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Nam vitae
dignissim ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et
luctus ex, ut interdum risus. Proin mi elit, viverra quis rhoncus euismod,
luctus ac lectus. Phasellus laoreet accumsan pretium. Sed aliquam
vestibulum sapien, et malesuada ipsum gravida faucibus. Duis vestibulum at
nibh id ullamcorper. Curabitur maximus consequat diam non lobortis. Etiam
tristique neque enim.
</p>
</div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero
urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim
ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex,
ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac
lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien,
et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper.
Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.
</p>
<p>
Nulla sem ex, ultrices at velit id, tempor consequat neque. Nulla at
molestie mi, ullamcorper interdum purus. Cras elementum, orci a sollicitudin
elementum, tellus sem sodales mi, eget consectetur mi nunc non velit.
Maecenas id mauris massa. Donec sed eros erat. Nam interdum sollicitudin
elementum. Maecenas laoreet commodo gravida. Duis orci dolor, aliquet sed
viverra ut, euismod ac sem. In hendrerit nisl quis massa tristique, vitae
cursus urna consectetur.
</p>
<p>
Suspendisse maximus dapibus orci, sed faucibus leo iaculis sed. Sed quam
ante, accumsan ac gravida ut, feugiat volutpat ligula. Sed aliquet nisi
metus, a dapibus diam porttitor et. Suspendisse potenti. Mauris dapibus
interdum orci at blandit. Vivamus sit amet turpis est. Interdum et malesuada
fames ac ante ipsum primis in faucibus.
</p>
<p>
Etiam sodales id velit nec pulvinar. Nulla facilisi. Phasellus lobortis arcu
a lobortis consectetur. Proin vitae laoreet odio. Ut sem purus, finibus non
ante vitae, porttitor cursus leo. In sed dui lectus. Cras in enim vel ipsum
fermentum condimentum. Praesent sit amet fringilla dui. Sed hendrerit varius
enim vitae pulvinar. Duis hendrerit eleifend urna, eget cursus odio
vulputate eu. Etiam pretium elit quis nibh tristique semper. Praesent vitae
sem sed felis aliquam bibendum sed ac justo. Ut eu venenatis neque, vel
tristique lacus. Etiam condimentum sit amet est in pulvinar.
</p>
<p>
Sed ut pellentesque dolor. Suspendisse blandit tellus at orci pellentesque,
a mattis diam dictum. Nullam condimentum et sapien sed tincidunt. Sed
consequat urna nec arcu suscipit, vel dapibus elit porttitor. Suspendisse
arcu est, ultrices vitae nisi nec, finibus malesuada ex. Aliquam erat
volutpat. Fusce odio felis, posuere a dictum ut, dignissim dictum felis.
Integer quis eros erat. Sed sed augue finibus, mattis nisl at, auctor orci.
Praesent ex metus, viverra et molestie quis, suscipit eget quam. Praesent
vehicula elementum tortor, sed dictum mauris. In lectus elit, gravida id
iaculis nec, bibendum et ante.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius libero
urna, eu aliquet tellus consequat a. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Nam vitae dignissim
ante. Morbi maximus auctor diam porta vestibulum. Suspendisse et luctus ex,
ut interdum risus. Proin mi elit, viverra quis rhoncus euismod, luctus ac
lectus. Phasellus laoreet accumsan pretium. Sed aliquam vestibulum sapien,
et malesuada ipsum gravida faucibus. Duis vestibulum at nibh id ullamcorper.
Curabitur maximus consequat diam non lobortis. Etiam tristique neque enim.
</p>
</div>

When section reach on top then fixed left div and scroll right div till the end of the section

I have to display the left column fixed when reaching the top and right div will scroll. Once end the section then left div will change it relative so that it will also scroll at the end of the section.
I tried below code but it's not working perfectly for me. it's also changing the width.
I tried if ($(window).scrollTop() >= 350) { which is not perfectly. It's active when scroll reaches 350. I need when my section reach on top then fixed the left div and and scroll right div.
$(function() {
$(window).scroll(function() {
//After scrolling 100px from the top...
if ($(window).scrollTop() >= 350) {
$('.leftDiv').css('position', 'fixed');
$('.leftDiv').css('top', '0px');
//Otherwise remove inline styles and thereby revert to original stying
} else {
$('.leftDiv').css('position', 'static');
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="leftDiv">
<h2>This div will fixed once touch the top bar and scroll right div</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div class="rightDiv">
<h2>Lorem Ipsum is simply dummy text</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie
risus. Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium,
velit dui pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis
turpis sed urna tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare
nisl. Quisque mollis est nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus
enim non mollis. Aenean finibus urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare
magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non
vestibulum pellentesque. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie
risus. Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium,
velit dui pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis
turpis sed urna tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare
nisl. Quisque mollis est nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus
enim non mollis. Aenean finibus urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare
magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non
vestibulum pellentesque. </p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis
et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl
at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat
bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est nulla, eget aliquam nisi
dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus urna ipsum, id aliquet
odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum
malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>

On page load, find the elements position in the page, using .offset(), and it's width, using .width().
Also, you can pass multiple CSS properties at once, using .css(), if you format them as an object (see below).
Now... You also have to care about the next row below... So a simple math will compare the scrollTop in order to "un-fix" the div as soon as the next row comes into view. That is the scrollTop + row height - the div's height.
$(function() {
// Get position and width
var position = $(".leftDiv").offset().top;
var width = $(".leftDiv").width();
// Get the height and the row height
var height = $(".leftDiv").height();
var row_height = $(".leftDiv").parents(".row").height();
$(window).scroll(function() {
// Compare scrollTop with the div position
if ($(window).scrollTop() >= position && $(window).scrollTop() <= position + row_height - height) {
$('.leftDiv').css({
position: 'fixed',
top: 0,
width: width // Ensure to keep its width
});
//Otherwise remove inline styles and thereby revert to original stying
} else {
$('.leftDiv').css({
position: 'static'
});
}
});
// Resize issue... Since the width has been set once
$(window).on("resize", function() {
// Remove the width and position properties to redefine all variables
$(".leftDiv").css({
position: 'static',
width: "initial"
});
// Get position and width
position = $(".leftDiv").offset().top;
width = $(".leftDiv").width();
// Get the height and the row height
height = $(".leftDiv").height();
row_height = $(".leftDiv").parents(".row").height();
// Run the scroll adjusments...
$(window).trigger("scroll");
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="leftDiv">
<h2>This div will fixed once touch the top bar and scroll right div</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div class="rightDiv">
<h2>Lorem Ipsum is simply dummy text</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie
risus. Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium,
velit dui pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis
turpis sed urna tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare
nisl. Quisque mollis est nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus
enim non mollis. Aenean finibus urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare
magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non
vestibulum pellentesque. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie
risus. Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium,
velit dui pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis
turpis sed urna tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare
nisl. Quisque mollis est nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus
enim non mollis. Aenean finibus urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare
magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non
vestibulum pellentesque. </p>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est
nulla, eget aliquam nisi dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus
urna ipsum, id aliquet odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui.
Proin ligula erat, vestibulum malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
<section>
<div class="container">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue pretium quam id aliquet. Maecenas feugiat augue sed suscipit pulvinar. Mauris at pharetra libero, vel efficitur mi. Proin vel neque laoreet, dictum augue faucibus, molestie risus.
Suspendisse vitae elit enim. Curabitur lobortis hendrerit eros, ac commodo sapien efficitur et. Praesent quis vehicula nisi. Aenean gravida lacus dolor, at vehicula eros accumsan facilisis. Proin posuere, magna sit amet maximus pretium, velit dui
pretium nisi, ut fringilla mauris diam ut nulla. Nullam rhoncus nunc id mauris vulputate, a tincidunt ligula posuere. Nunc sed tortor eget augue sollicitudin mattis. Pellentesque interdum fringilla risus in iaculis. Proin facilisis turpis sed urna
tempor, ac hendrerit sem tristique. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis
et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl
at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat
bibendum. Donec rutrum gravida ultricies. Morbi eleifend a turpis et convallis. Morbi sed felis a tortor maximus lobortis non sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Interdum et
malesuada fames ac ante ipsum primis in faucibus. Suspendisse a nisl at nulla fringilla egestas. Phasellus ac libero nisl. Nullam quis lacus quis arcu consequat bibendum. Phasellus faucibus ornare nisl. Quisque mollis est nulla, eget aliquam nisi
dignissim quis. Donec semper euismod elit sed tristique. Etiam ut purus pulvinar, dictum eros ultricies, elementum libero. Nulla vulputate mauris at venenatis gravida. Praesent efficitur maximus enim non mollis. Aenean finibus urna ipsum, id aliquet
odio venenatis vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a euismod lectus, viverra fermentum leo. Maecenas vulputate, ante id tempus pharetra, eros ligula ornare magna, eu egestas arcu sapien vel dui. Proin ligula erat, vestibulum
malesuada egestas molestie, accumsan porta leo. Duis lacinia, sem in dapibus bibendum, libero erat venenatis ligula, nec vestibulum nisi est eu leo. Nulla sodales ex non vestibulum pellentesque. </p>
</div>
</section>
Interesting "Bonus question"
Can I use some animation at the end when the section ends because left content directly goes off?
Since that is a "bonus question"... and a bit more complex, I will post it only on CodePen.
Quick explanations: you have to make sure the animation triggers only once. So I used a class, that will be removed instantly... while the position will be changed to static only at the animation end.
Additionally, the animation only is interesting to have if the scrolling is at the bottom of the row... It looks strange at top.

Cordova-Framework7 slideable tabs from external link not working

I was trying to insert a slideable tab which came from an external link and not by page. I just can't get to make it work.
Here's the link where it came from:
<div id="divfr">
First Response
</div>
And here's the code for the tabs:
<div class="toolbar tabbar">
<div class="toolbar-inner">
Tab 1
Tab 2
Tab 3
</div>
</div>
<div class="tabs-swipeable-wrap">
<div class="tabs">
<div id="tab1" class="page-content tab active">
<div class="content-block">
<p>This is tab 1 content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum mi quis felis scelerisque faucibus. Aliquam ut commodo justo. Mauris vitae pharetra arcu. Sed tincidunt dui et nibh auctor pretium. Nam accumsan fermentum sem. Suspendisse potenti. Nulla sed orci malesuada, pellentesque elit vitae, cursus lorem. Praesent et vehicula sapien, ut rhoncus quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae mi nec lorem aliquet venenatis quis nec nibh. Aenean sit amet leo ligula. Fusce in massa et nisl dictum ultricies et vitae dui. Sed sagittis quis diam sed lobortis. Donec in massa pharetra, tristique purus vitae, consequat mauris. Aliquam tellus ante, pharetra in mattis ut, dictum quis erat.</p>
<p>Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum.</p>
</div>
</div>
<div id="tab2" class="page-content tab">
<div class="content-block">
<p>This is tab 2 content</p>
<p>Ut ac lobortis lacus, non pellentesque arcu. Quisque sodales sapien malesuada, condimentum nunc at, viverra lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus eu pulvinar turpis, id tristique quam. Aenean venenatis molestie diam, sit amet condimentum nisl pretium id. Donec diam tortor, mollis in vehicula id, vehicula consectetur nulla. Quisque posuere rutrum mauris, eu rutrum turpis blandit at. Proin volutpat tortor sit amet metus porttitor accumsan. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dapibus posuere dictum.</p>
<p>Fusce luctus turpis nunc, id porta orci blandit eget. Aenean sodales quam nec diam varius, in ornare ipsum condimentum. Aenean eleifend, nulla sit amet volutpat adipiscing, ligula nulla pharetra risus, vitae consequat leo tortor eu nunc. Vivamus at fringilla metus. Duis neque lectus, sagittis in volutpat a, pretium vel turpis. Nam accumsan auctor libero, quis sodales felis faucibus quis. Etiam vestibulum sed nisl vel aliquet. Aliquam pellentesque leo a lacus ultricies scelerisque. Vestibulum vestibulum fermentum tincidunt. Proin eleifend metus non quam pretium, eu vehicula ipsum egestas. Nam eget nibh enim. Etiam sem leo, pellentesque a elit vel, egestas rhoncus enim. Morbi ultricies adipiscing tortor, vitae condimentum lacus hendrerit nec. Phasellus laoreet leo quis purus elementum, ut fringilla justo eleifend. Nunc ultricies a sapien vitae auctor. Aliquam id erat elementum, laoreet est et, dapibus ligula.</p>
</div>
</div>
<div id="tab3" class="page-content tab">
<div class="content-block">
<p>This is tab 3 content</p>
<p>Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero.</p>
<p>Nulla gravida libero eget lobortis iaculis. In sed elit eu nibh adipiscing faucibus. Sed ac accumsan lacus. In ut diam quis turpis fringilla volutpat. In ultrices dignissim consequat. Cras pretium tortor et lorem condimentum posuere. Nulla facilisi. Suspendisse pretium egestas lacus ac laoreet. Mauris rhoncus quis ipsum quis tristique. Vivamus ultricies urna quis nunc egestas, in euismod turpis fringilla. Nam tellus massa, vehicula eu sapien non, dapibus tempor lorem. Fusce placerat orci arcu, eu dignissim enim porttitor vel. Nullam porttitor vel dolor sed feugiat. Suspendisse potenti. Maecenas ac mattis odio. Sed vel ultricies lacus, sed posuere libero.</p>
</div>
</div>
</div>
</div>

I just added navbar-fixed inside the tabs-sizeable div and it worked.

Can I highlight selected text, store it in a string, and replay it later?

I am using window.getSelection and designmode to highlight text on a page.
Is it possible to store it somehow as a string so I can save it and replay it later?

https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection
In JavaScript, when an object is passed to a function expecting a string (like window.alert() or document.write()), the object's toString() method is called and the returned value is passed to the function. This can make the object appear to be a string when used with other functions when it is really an object with properties and methods.
[...]
However, attempting to use a JavaScript String property or method such as length or substr directly on a Selection object will result in an error if it does not have that property or method and may return unexpected results if it does. To use a Selection object as a string, call its toString() method directly
var selObj, range;
document.onmouseup = function() {
selObj = window.getSelection();
if (selObj.isCollapsed) return;
range = selObj.getRangeAt(0);
}
function replay() {
selObj.removeAllRanges();
selObj.addRange(range);
}
<button onclick="replay()">replay</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus commodo mauris quis est auctor faucibus. Curabitur lacus libero, sagittis a augue sed, viverra condimentum enim. Nam euismod lorem dui, vestibulum vulputate tellus euismod eget. Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce cursus dui in nisi egestas, at maximus mauris ultricies. Vivamus velit eros, imperdiet a mollis non, fringilla at nisl. Aliquam tempus interdum efficitur. Praesent id
ex tempor, tristique mi non, blandit quam. Pellentesque non dignissim nulla, vitae finibus nunc.
</p>
<p>
Sed commodo sagittis lacus a iaculis. Maecenas cursus tincidunt dolor, vel egestas ante euismod nec. Vestibulum lacinia mi vitae lacus aliquet, id porta metus posuere. Phasellus hendrerit vehicula ligula, sed dignissim orci accumsan sit amet. Proin at
dictum dui. Nulla facilisi. Sed velit purus, lobortis eget turpis at, pellentesque eleifend magna. Morbi sed nunc blandit, mollis velit nec, ultrices mauris. Pellentesque augue dolor, malesuada id vulputate at, efficitur lacinia orci.
</p>
<p>
Nullam vitae leo condimentum, finibus nulla id, lobortis magna. Nulla id tellus elementum, fermentum erat a, venenatis lectus. Vivamus congue lobortis est at feugiat. Aliquam rutrum efficitur ornare. Mauris molestie porta augue, vel semper erat aliquet
vitae. Suspendisse id libero aliquam, lacinia felis nec, elementum ex. Aliquam erat volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc sem mi, egestas at ipsum ut, vehicula egestas lorem. Morbi
fringilla sit amet lacus eget rhoncus. Fusce consectetur eu ex vitae rhoncus. Aenean rutrum eros sit amet hendrerit ullamcorper.
</p>
<p>
Nam laoreet magna vehicula convallis maximus. Phasellus id purus eleifend, tincidunt nibh at, molestie mauris. Nam eget consequat velit. Duis non neque tempor, porttitor enim accumsan, gravida velit. In arcu purus, sollicitudin quis fringilla ut, blandit
sed odio. Donec id felis metus. Vestibulum vel quam sodales, pharetra ipsum eget, tincidunt justo. Cras vitae tortor non enim iaculis gravida a sed velit. Vestibulum augue nulla, commodo quis erat quis, auctor placerat eros.
</p>
<p>
Cras hendrerit orci nunc. Vestibulum mollis libero vitae libero rutrum viverra. Praesent et varius eros, vel accumsan ante. Nulla rhoncus, nisl a lobortis mollis, ante massa pharetra sapien, ut congue tellus ligula at turpis. Vestibulum sodales, tortor
dictum dictum finibus, mauris orci pharetra justo, at eleifend massa metus vitae urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc cursus urna ac lacus lacinia ultricies. Donec blandit elit eu ante
tempor, vitae vestibulum enim sodales. Aenean bibendum purus ut venenatis tristique. Nulla convallis, ipsum ut iaculis efficitur, ipsum risus maximus nibh, eu cursus orci tortor at ligula. Curabitur et est et erat eleifend posuere vel ac nisi. In in
lectus ligula.
</p>

Develop Reference

JavaScript is the programming language of the Web.