JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://opensource.teamdf.com/visible/jquery.visible.js"></script>
<div id="scroll-up" class="scroll-up-fixed">
<div class="demo-purposes"> <!-- This is just here so you can see the problem -->
This content block should begin to scroll up when #next-prev is in the viewport. This does happen, however it isn't very smooth and this message will jump up a certain amount of pixels.</div>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/> <br/>
<br/>
<br/>
<br/>
<br/> <br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div id="next-prev">
#next-prev DIV
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing s</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
CSS
html,body{ height:100%; }
#scroll-up {
position: absolute;
background:aqua;
height:100%;
/* overflow-y: auto; */
/* -webkit-overflow-scrolling: touch; */
width: 50%;
}
.scroll-up-fixed {
position: fixed !important;
/* top: 0; */
/* left: 0; */
}
.demo-purposes { padding-top:200px;}
#next-prev {
background:pink;
text-align:center;
width: 100%;
clear: both;
overflow: hidden;
position: relative; }
JavaScript
$(window).scroll(function() {
if ($('#next-prev').visible(true)) {
console.log ( '#next-prev visible' );
// Initiate scroll up of '#scroll-up' when '#next-prev' is in the viewport
var $tagline = $('#scroll-up');
var windowScroll;
$tagline.removeClass("scroll-up-fixed");
// Functional parallaxing calculations
function slidingTitle() {
//Get scroll position of window
windowScroll = $(this).scrollTop();
windowHeight = $(window).height();
$tagline.css({
'top' : (windowHeight)+"px"
});
}
slidingTitle();
} else {
console.log ( '#next-prev not visible' );
// The element is NOT visible, do something else
}
});