Bootstrap Affix triggered once past certain div

Bootstrap Affix triggered once past certain div - javascript

I'm trying to get the bootstrap affix top offset to work without using the number of pxiels, but by triggering it after it goes past a certain div. I've got the affix to stop being triggered once it gets to the bottom, but I'm having an issue getting it started in the correct place.
Below is my code and here is a JSFiddle. I would like the sidebar to not be triggered until the user goes past the div #content-header and then the sidebar sits on the top right side of the page. However the sidebar currently just sits at the top.
$('#sidebar-wrapper').affix({
offset: {
top: function() {
return $('#content-header').height(true)
},
bottom: function() {
return (this.bottom = $('#footer-wrapper').outerHeight(true))
}
}
})
#sidebar-wrapper {
max-width: 395px;
}
#sidebar-wrapper.affix {
top: 30px;
}
#content-header {
height: 300px;
background: red;
}
#footer-wrapper {
height: 500px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div id="content-header"></div>
<div class="row">
<div id="content-wrapper" class="col-md-9">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
</div>
<div class="col-md-3">
<div id="sidebar-wrapper">
<p>
In neque tortor, hendrerit nec porta ac, auctor in ex. Mauris elementum, risus vel facilisis fringilla, felis dui sodales velit, vitae hendrerit nulla odio eget arcu. Suspendisse id enim felis. In hac habitasse platea dictumst. Suspendisse mollis, quam
in dapibus sagittis, mi urna sodales tortor, eu egestas nisi ligula et est. Integer eget lorem nec diam vehicula malesuada. Donec tempor viverra eros eu eleifend. Suspendisse nec risus ac augue iaculis porttitor vel sed justo. Sed et ligula
aliquam, consequat mi vitae, rutrum turpis. Donec id arcu dolor. Nam vulputate, est in tincidunt laoreet, urna urna aliquet arcu, eleifend ultrices purus purus nec libero.
</p>
</div>
</div>
</div>
</div>
<div id="footer-wrapper"></div>
Updated:
Removed true from .height(true) so it now triggers after #content-header. However it only works the first time and once you reach the bottom of the page the sidebar seems to jump back up to the top.
Updated JSFiddle here.

If I understand you correctly, remove the true param from the method height. .hight(true) returns the jQuery element itself but not the height.
$('#sidebar-wrapper').affix({
offset: {
top: function() {
var a = $('#content-header').height();
return a;
},
bottom: function() {
var a = $('#footer-wrapper').outerHeight(true);
//console.log(a);
return a;
}
}
})
#sidebar-wrapper {
max-width: 395px;
}
#sidebar-wrapper {
padding-top: 30px;
}
#sidebar-wrapper.affix {
top: 0;
}
#content-header {
height: 300px;
background: red;
}
#footer-wrapper {
height: 500px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="container">
<div id="content-header"></div>
<div class="row">
<div id="content-wrapper" class="col-md-9">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar felis ac libero mattis elementum. Vivamus maximus ipsum vel maximus tincidunt. Fusce in semper massa, quis suscipit enim. Aenean sodales malesuada lacus. Aliquam quis urna lacus. Donec
iaculis dui velit, eleifend molestie augue egestas sed. Ut ornare egestas porta. Nam ultricies sed felis a porttitor. Phasellus sit amet lobortis lacus. Praesent viverra imperdiet dolor in ullamcorper.
</p>
</div>
<div class="col-md-3">
<div id="sidebar-wrapper">
<p>
In neque tortor, hendrerit nec porta ac, auctor in ex. Mauris elementum, risus vel facilisis fringilla, felis dui sodales velit, vitae hendrerit nulla odio eget arcu. Suspendisse id enim felis. In hac habitasse platea dictumst. Suspendisse mollis, quam
in dapibus sagittis, mi urna sodales tortor, eu egestas nisi ligula et est. Integer eget lorem nec diam vehicula malesuada. Donec tempor viverra eros eu eleifend. Suspendisse nec risus ac augue iaculis porttitor vel sed justo. Sed et ligula
aliquam, consequat mi vitae, rutrum turpis. Donec id arcu dolor. Nam vulputate, est in tincidunt laoreet, urna urna aliquet arcu, eleifend ultrices purus purus nec libero.
</p>
</div>
</div>
</div>
</div>
<div id="footer-wrapper"></div>

Related

How can I avoid whitespace from displaying below my footer when contracting an accordion at the bottom of my page?

I have a page with a lot of content which requires you to scroll down the page; a typical web page. At the bottom of the page, I have an accordion that contains citation information for the given page. By default, this accordion is collapsed, showing at max 3 lines of content along with a "View All Sources" button. When you click the button, the accordion expands to show all of the content.
When the page loads, and when the accordion is contracted, there is no whitespace below the footer.
In some cases, there are a lot of sources to display within the accordion. In those instances, when the accordion is expanded, you might have to scroll down the page to read them all. When you click the button to contract the accordion, it sucks the content back up. But because there was so much content, it pulls the footer up with it, leaving a bunch of whitespace below the footer. I'd like to prevent that from happening.
I've pushed out a demo to Github Pages here:
https://matowens.github.io/footer-whitespace/
Screenshots showing the issue:
Footer prior to expansion
Footer after expansion
Footer after contraction
I've tried moving the sources block to the top of the page. When I do this, the issue doesn't appear. I believe this is because I don't scroll down below where the footer would get pulled up above when the accordion is contracted. However, for this project, this isn't a viable solution since the sources block is required to be at the bottom of the page.
I've tried adjusting the overflow property on the HTML and Body tags dynamically, as the accordion expands and contracts, in hopes it would refresh the height of the page or the scrollbar to fit the content back within the correct view. This has had no impact, though.
I've tried to find others experiencing similar issues, but everything I've found talks about whitespace below the footer being caused by tall pages with little content. This is not what's happening in my instance as there is a lot of content that pushes the footer offscreen and requires you to scroll to it.
I'm at a bit of a loss at what to try next.
Is this a browser bug and is there something I can do to prevent it from triggering?
Stack example below:
/**
* Source block functionality
*/
(function($) {
let viewAllLink = $('.viewall-link');
let viewLessLink = $('.viewless-link');
let sourceList = $('.sources-block ol');
if (!viewAllLink.length ||
!sourceList.length ||
!viewLessLink.length
) {
return;
}
/**
* Clicking on View All Sources link...
*/
viewAllLink.click(function() {
sourceList.css('height', 'unset');
sourceList.css('overflow', 'visible');
sourceList.css('-webkit-mask-image', 'none');
sourceList.css('mask-image', 'none');
viewAllLink.css('display', 'none');
viewLessLink.css('display', 'block');
});
/**
* Clicking on the Hide Sources link...
*/
viewLessLink.click(function() {
let height = '80px';
if (window.matchMedia("(max-width: 767px)").matches) {
if (countSourceLines(sourceList) > 6) {
height = '144px';
}
} else {
if (countSourceLines(sourceList) > 3) {
}
}
sourceList.css('height', height);
sourceList.css('overflow', 'visible');
sourceList.css('-webkit-mask-image', 'linear-gradient(180deg, #000 70%, transparent)');
sourceList.css('mask-image', 'mask-image: linear-gradient(180deg, #000 70%, transparent);');
viewAllLink.css('display', 'block');
viewLessLink.css('display', 'none');
});
/**
* Set initial state of Sources block and if we need to display the View All link or not.
*/
if (window.matchMedia("(max-width: 767px)").matches) {
if (countSourceLines(sourceList) > 6) {
sourceList.css('height', '144px');
sourceList.css('overflow', 'hidden');
viewAllLink.css('display', 'block');
} else {
sourceList.css('-webkit-mask-image', 'none');
sourceList.css('mask-image', 'none');
viewAllLink.css('display', 'none');
}
} else {
console.log(countSourceLines(sourceList));
if (countSourceLines(sourceList) > 3) {
sourceList.css('height', '80px');
sourceList.css('overflow', 'hidden');
viewAllLink.css('display', 'block');
} else {
sourceList.css('-webkit-mask-image', 'none');
sourceList.css('mask-image', 'none');
viewAllLink.css('display', 'none');
}
}
/**
*
* #param el
* #returns {number}
*/
function countSourceLines(el) {
let olElement = $(el);
let olHeight = olElement.outerHeight();
let lineHeight = parseInt(olElement.css("line-height").replace("px", ""));
return olHeight / lineHeight;
}
})(jQuery);
html {
scroll-behavior: smooth !important;
margin: 0;
padding: 0;
}
body {
font-family: 'Museo Sans', sans-serif;
font-size: 18px;
line-height: 28px;
font-weight: 300;
color: #222;
margin: 0;
padding: 0;
}
#content-wrap {
padding: 50px;
}
#footer {
text-align: center;
background: #222;
color: #FFF;
padding: 50px;
}
.sources-block {
background: #F0F0F0;
padding: 8px;
margin: 48px 0;
}
.sources-block h4 {
font-weight: 600;
margin: 0;
padding: 8px;
}
.sources-block p {
margin-bottom: 0;
}
.sources-block ol {
padding-left: 32px;
-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
mask-image: linear-gradient(180deg, #000 70%, transparent);
margin-bottom: 5px;
}
.sources-block li {
word-break: break-word;
margin-bottom: 0;
}
.sources-block .viewall-link,
.sources-block .viewless-link {
font-weight: 600;
font-size: 16px;
line-height: 24px;
text-align: center;
color: #298FC2;
cursor: pointer;
border-top: 1px solid #298fc2;
padding: 8px 0 0;
}
.sources-block .viewless-link {
display: none;
}
.sources-block i {
padding-left: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Footer Whitespace Demo</title>
</head>
<body>
<div id="content-wrap">
<h1>Example Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<div class="sources-block">
<h4>Sources</h4>
<ol>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
</ol>
<div class="viewall-link">View All Sources <i class="fa fa-chevron-down"></i></div>
<div class="viewless-link">Hide Sources <i class="fa fa-chevron-up"></i></div>
</div>
</div>
<div id="footer">
Footer Here
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>

In the viewLessLink.click() function, you're actually setting sourceList.css('overflow', 'visible'); on the ol. But because the content is being hidden on click, it should be overflow: hidden. In the click listener, it simply needs to be changed to sourceList.css('overflow', 'hidden');
/**
* Source block functionality
*/
(function($) {
let viewAllLink = $('.viewall-link');
let viewLessLink = $('.viewless-link');
let sourceList = $('.sources-block ol');
if (!viewAllLink.length ||
!sourceList.length ||
!viewLessLink.length
) {
return;
}
/**
* Clicking on View All Sources link...
*/
viewAllLink.click(function() {
sourceList.css('height', 'unset');
sourceList.css('overflow', 'visible');
sourceList.css('-webkit-mask-image', 'none');
sourceList.css('mask-image', 'none');
viewAllLink.css('display', 'none');
viewLessLink.css('display', 'block');
});
/**
* Clicking on the Hide Sources link...
*/
viewLessLink.click(function() {
let height = '80px';
if (window.matchMedia("(max-width: 767px)").matches) {
if (countSourceLines(sourceList) > 6) {
height = '144px';
}
} else {
if (countSourceLines(sourceList) > 3) {
}
}
sourceList.css('height', height);
sourceList.css('overflow', 'hidden'); // this is the only value that needed to be updated
sourceList.css('-webkit-mask-image', 'linear-gradient(180deg, #000 70%, transparent)');
sourceList.css('mask-image', 'mask-image: linear-gradient(180deg, #000 70%, transparent);');
viewAllLink.css('display', 'block');
viewLessLink.css('display', 'none');
});
/**
* Set initial state of Sources block and if we need to display the View All link or not.
*/
if (window.matchMedia("(max-width: 767px)").matches) {
if (countSourceLines(sourceList) > 6) {
sourceList.css('height', '144px');
sourceList.css('overflow', 'hidden');
viewAllLink.css('display', 'block');
} else {
sourceList.css('-webkit-mask-image', 'none');
sourceList.css('mask-image', 'none');
viewAllLink.css('display', 'none');
}
} else {
console.log(countSourceLines(sourceList));
if (countSourceLines(sourceList) > 3) {
sourceList.css('height', '80px');
sourceList.css('overflow', 'hidden');
viewAllLink.css('display', 'block');
} else {
sourceList.css('-webkit-mask-image', 'none');
sourceList.css('mask-image', 'none');
viewAllLink.css('display', 'none');
}
}
/**
*
* #param el
* #returns {number}
*/
function countSourceLines(el) {
let olElement = $(el);
let olHeight = olElement.outerHeight();
let lineHeight = parseInt(olElement.css("line-height").replace("px", ""));
return olHeight / lineHeight;
}
})(jQuery);
html {
scroll-behavior: smooth !important;
margin: 0;
padding: 0;
}
body {
font-family: 'Museo Sans', sans-serif;
font-size: 18px;
line-height: 28px;
font-weight: 300;
color: #222;
margin: 0;
padding: 0;
}
#content-wrap {
padding: 50px;
}
#footer {
text-align: center;
background: #222;
color: #FFF;
padding: 50px;
}
.sources-block {
background: #F0F0F0;
padding: 8px;
margin: 48px 0;
}
.sources-block h4 {
font-weight: 600;
margin: 0;
padding: 8px;
}
.sources-block p {
margin-bottom: 0;
}
.sources-block ol {
padding-left: 32px;
-webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
mask-image: linear-gradient(180deg, #000 70%, transparent);
margin-bottom: 5px;
}
.sources-block li {
word-break: break-word;
margin-bottom: 0;
}
.sources-block .viewall-link,
.sources-block .viewless-link {
font-weight: 600;
font-size: 16px;
line-height: 24px;
text-align: center;
color: #298FC2;
cursor: pointer;
border-top: 1px solid #298fc2;
padding: 8px 0 0;
}
.sources-block .viewless-link {
display: none;
}
.sources-block i {
padding-left: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Footer Whitespace Demo</title>
</head>
<body>
<div id="content-wrap">
<h1>Example Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim. Duis
tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt non, ullamcorper
non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<div class="sources-block">
<h4>Sources</h4>
<ol>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
</ol>
<div class="viewall-link">View All Sources <i class="fa fa-chevron-down"></i></div>
<div class="viewless-link">Hide Sources <i class="fa fa-chevron-up"></i></div>
</div>
</div>
<div id="footer">
Footer Here
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>

I remove most of the CSS then added just enough for the example - I commented where some CSS is purely for visual.
Note I adjusted the HTML just to stack the containers - which is the good parts here grid-template-rows: auto 1fr auto; takes care of that. Those "container" classes are really more "comment" here than used except some visuals.
I removed all the JavaScript (You have jQuery so I left that but that is not really needed here either)
I just toggle the dataset toggle value and the CSS takes care of the rest.
You might even want a "middle" value and this allows for that with a middle height; say 5em or some such just add a button and a value for that and setup the CSS to the height for that value.
(function($) {
const toggleValues = {
small: "little",
large: "big"
};
$('.viewall-link')
.add('.viewless-link')
.on('click', function(event) {
let things = $(this).closest('.sources-block').find('.things-list').get(0);
let collapseValue = things.dataset.toggle;
things.dataset.toggle = collapseValue == toggleValues.small ? toggleValues.large : toggleValues.small;
});
})(jQuery);
body {
margin: 0;
padding: 0;
}
.parent {
/* stack the containers */
display: grid;
grid-template-rows: auto 1fr auto;
}
.sources-block {
display: grid;
}
.things-list {
display: flex;
flex-direction: column;
}
.things-list[data-toggle="little"] {
height: 4em;
overflow: hidden;
}
.things-list[data-toggle="big"] {
/* just to show it applied - do whatever here */
background-color: #ddddff44;
}
/* below here is just for "prettier" example */
.parent {
border: 1px solid lime;
}
.content-container {
border: solid magenta 1px;
margin: 0.25rem;
}
.content-parts {
border: solid cyan 1px;
display: grid;
place-items: center;
margin: 0.25rem;
}
.sources-block {
background-color: #F0F0F0;
padding: 0.5rem;
border: solid 3px red;
place-items: center;
}
.things-list {
border: solid blue 1px;
}
.links-container {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.toggle-link {
border: solid 2px #888888;
padding: 0.5rem;
border-radius: 0.5rem;
}
#footer {
text-align: center;
background: #222;
color: #FFF;
padding: 4rem;
}
<body>
<div class="parent">
<div class="content-container">
<div id="content-wrap" class="content-parts">
<h1>Example Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis in magna dignissim finibus. Fusce neque ante, mattis condimentum metus id, rhoncus fermentum neque. Nulla vel aliquam eros. Proin convallis imperdiet mauris id dignissim.
Duis tortor magna, molestie sit amet tortor egestas, aliquet sollicitudin tortor. Curabitur volutpat convallis nisl, ut vehicula massa convallis eu. Aliquam erat volutpat. Pellentesque sit amet lacus sem. Nam lacus erat, viverra eget tincidunt
non, ullamcorper non justo. Sed ultricies diam eu lacus luctus eleifend.</p>
</div>
</div>
<div class="sources-container sources-block">
<h4>Sources</h4>
<ol class="things-list" data-toggle="little">
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
<li>Source Blah Blah Blah</li>
</ol>
<div class="links-container">
<div class="toggle-link viewall-link">View All Sources <i class="fa fa-chevron-down"></i></div>
<div class="toggle-link viewless-link">Hide Sources <i class="fa fa-chevron-up"></i></div>
</div>
</div>
<div id="footer" class="footer-container">
Footer Here
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>

Auto change the height of arrow according to content height (Liquid slider)

From the screenshots, you can see the arrows are not auto adjust according to the content height when I press to next slide.
I want the dynamic height for arrow, to be displayed in the middle of the content.
I refer the code from Liquid Slider, you can check here or see my issue below. Hoping that some of you could provide me with some advice. Thanks!
$('#slider-id').liquidSlider({
hoverArrows: false,
dynamicArrows: true,
});
[class$="-arrow"] {
width: 25px;
height: 25px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
margin-top: 40% !important;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Panel 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>

By overiding the arows css , setting the margin-top to 0 and top to 50% as follow :
[class$="-arrow"] {
....
top:50%;
margin-top:0 !important;
...
}
See below snippet :
$('#slider-id').liquidSlider({
hoverArrows: false,
dynamicArrows: true,
});
[class$="-arrow"] {
width: 25px;
height: 25px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
top:50%;
margin-top:0 !important;
position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Panel 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>

Hope this is helpful to you. Here i removed margin from top and added position to slider arrows.
$('#slider-id').liquidSlider({
hoverArrows: false,
dynamicArrows: true,
});
[class$="-arrow"] {
width: 25px;
height: 25px;
background-image: url(../images/arrow.png);
background-repeat: no-repeat;
margin-top: 0;
position:relative;
top: 50%;
}
.liquid-slider-wrapper .liquid-nav-left-arrow, .liquid-slider-wrapper .liquid-nav-right-arrow {
margin-top: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/js/jquery.liquid-slider.min.js"></script>
<link href="https://www.jqueryscript.net/demo/Responsive-jQuery-Content-slider-with-HTML5-Liquid%20Slider/css/liquid-slider.css" rel="stylesheet"/>
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Panel 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Panel 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>

Enable checkbox when the user has scrolled to the bottom of a T&C page?

my html sample div class :
<div id="terms">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
</div>
<input id="payment" type="checkbox" disabled name="terms"> <span class="redSmall">I agree to terms and conditions</span>
my css :
#terms {width: 780px;height: 150px;overflow-y: scroll;border:2px solid #ccc;}
Can someone tell me the JS or JQuery for enabling the checkbox when the user has scrolled to the bottom of the T&C page ? I have tried other answers too but none of them worked. The checkbox remains disabled whatever I do.

use below script,
<script>
$( document ).ready( function() {
$('#terms').scroll(function () {
if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {
$('#payment').removeAttr('disabled');
}
});
});
</script>
here is runnable demo : https://jsbin.com/cajusebera/edit?html,js,output

Im not a Jquery Expert but just by googling I created this example. I hope it helps!
jQuery(function($) {
$('#terms').on('scroll', function() {
if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
$('#payment').removeAttr("disabled")
}
})
});
#terms {
width: 780px;
height: 150px;
overflow-y: scroll;
border: 2px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="terms">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer
posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet,
blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
</p>
</div>
<input id="payment" type="checkbox" disabled name="terms"> <span class="redSmall">I agree to terms and conditions</span>

Smoothing out parallax scroll

I've got a header which is going to be twice the height of the viewport. When it gets to the end of the header, I've made a simple parallax effect which then reveals the content underneath, however, when you scroll, the content is flicking (I'm guessing because it's having calculate the scroll and adjust with css style "top:xxx"). Does anyone have any ideas on how I can smooth this out or have any tutorials which have similar functionality?
$(window).scroll(function(e){
var scroll = $(window).scrollTop();
var h = $(window).height()*2;
if (scroll < h){
$('#wrapper').css({'top':scroll })
}
});
#top {
width:100%;
position:absolute;
left:0;
z-index:99;
top:0;
height: 200vh;
background: red;
}
#wrapper {
position:Relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top"></div>
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>

I see the issue you are talking about on Mac in Chrome.
You can fix the "stuttering" with:
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
Your code with new lines of code implemented:
$(window).scroll(function(e){
var scroll = $(window).scrollTop();
var h = $(window).height()*2;
if (scroll < h){
$('#wrapper').css({'top':scroll })
}
});
#top {
width:100%;
position:absolute;
left:0;
z-index:99;
top:0;
height: 200vh;
background: red;
}
#wrapper {
position:Relative;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top"></div>
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>

Smooth-scrollbar is not working on body element

I am working on a design where I have used smooth-scrollbar for smooth scrolling.
I have implemented it twice on my page, first on the entire page and second on a div element.
It is working fine on the div element but not on the body.
I am unable to scroll as the browser continuously displays the default scrollbar.
Here is my code that I've done so far
<html>
<head>
<title>Jain University</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='../css/aos.css' rel='stylesheet' type='text/css'>
<link href='../css/smooth-scrollbar.css' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href="../css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="main-scrollbar" data-scrollbar>
<div class="container-fluid slide slide1" data-color="#EF6C00">
<div class="rows">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="../images/homepage1.jpg" class="img-responsive">
</div>
</div>
</div>
<div class="container-fluid slide slide2" data-color="#009688">
<div class="rows">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" data-aos="fade-right">
<img src="../images/homepage1.jpg" class="img-responsive">
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 col-lg-offset-2 col-md-offset-2" data-aos="fade-left">
<div class="simplebar-content aboutus" data-scrollbar>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu fermentum justo. Sed feugiat nunc in elit sagittis tristique. Duis eget volutpat enim. Aenean bibendum metus sed enim egestas, ultrices mattis enim vulputate. Nullam sem enim, venenatis at leo non, feugiat accumsan mi. Vivamus sagittis purus a volutpat lobortis. Donec vestibulum non elit mollis feugiat. Donec ultricies viverra suscipit. Quisque maximus lacus nec tortor varius, eu accumsan massa blandit. Pellentesque auctor ligula sit amet urna ornare, et cursus est interdum. Cras scelerisque, lectus nec semper ultrices, diam tellus posuere sapien, eget maximus lectus magna non elit. Mauris convallis justo enim, at malesuada quam imperdiet vitae. Ut urna dui, sagittis a dolor eu, eleifend elementum diam. Aliquam erat volutpat. </p>
</div>
</div>
</div>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../js/smooth-scrollbar.js"></script>
<script src="../js/aos.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script> Scrollbar.initAll(); </script>
<script>
AOS.init({
easing: 'ease-out-back',
duration: 1000
});
</script>
<script>
$(window).on("scroll touchmove", function() {
if ($(document).scrollTop() >= $(".slide1").position().top) {
$('body').css('background', $(".slide1").attr("data-color"));
$('.navbar').css({'background': $(".slide1").attr("data-color"),opacity:'0.9'});
};
if ($(document).scrollTop() > $(".slide2").position().top) {
$('body').css('background', $(".slide2").attr("data-color"));
$('.navbar').css({'background': $(".slide2").attr("data-color"),opacity:'0.9'});
};
});
</script>
</body>
</html>

You have to set a height to each item otherwise it will not work
[data-scrollbar]{
height: 500px;/*<<<<<required*/
}
yay JS
<script>
Scrollbar.initAll({
alwaysShowTracks: true,
overscrollEffect: "bounce"
});
</script>

We Keep Coding

JavaScript is the programming language of the Web.