How to keep div in sync on scrolling?
I am trying to handle div syncing while scrolling. Basically, I only have two divs that I want to control as the page scrolls, and will fix the second div when it reaches the top. Check out the attached gif icon.
You can also check my progress.
The problem is in my code: both divs reach the top as soon as I view the page.
The jquery I used for this is the following:
jQuery(document).on('ready', function() {
"use strict";
/* -------------------------------------
Set Page Height
-------------------------------------- */
function headerFullScreen() {
var _vph = jQuery(window).height();
jQuery('#header').css({'height': _vph + 'px'});
}
function imgBoxFullscreen() {
var _vph = jQuery(window).height();
jQuery('#imgbox').css({'height': _vph + 'px'});
jQuery(window).scroll(function(){
if(jQuery(window).scrollTop() >= _vph - 68){
jQuery('.navigationarea').addClass('ontop');
}
})
}
window.onresize = function() {
headerFullScreen();
imgBoxFullscreen();
}
var refreshId = setInterval(refresh, 500);
function refresh() {
headerFullScreen();
imgBoxFullscreen();
}
/* -------------------------------------
FIXED LOGO AND NAV
-------------------------------------- */
jQuery(window).scroll(function(){
var scrollTop = 1;
if(jQuery(window).scrollTop() >= scrollTop){
jQuery('.logoholder, .navigationarea').css({
position : 'fixed',
top : '0',
margin : '0'
});
jQuery('.navigationarea').addClass('ontop-mobile');
jQuery('.navigationarea').addClass('ontop');
jQuery('.menu_lis').addClass('top_menu');
jQuery('.straight-menu').addClass('hide_bottom_menu');
}else{
jQuery('.navigationarea').removeClass('ontop-mobile');
jQuery('.navigationarea').removeClass('ontop');
jQuery('.menu_lis').removeClass('top_menu');
jQuery('.straight-menu').removeClass('hide_bottom_menu');
}
if(jQuery(window).scrollTop() < scrollTop){
jQuery('.logoholder').removeAttr('style');
jQuery('.navigationarea').removeClass('ontop-mobile');
jQuery('.navigationarea').removeClass('ontop');
jQuery('.navigationarea').removeAttr('style');
}
})
});
I also added a gif to show how it should work. Any help please
source to share
I believe Dan just left a small detail from his answer in case of an accident. You need to compare the starting offset of the div from the top of the page to the amount you scrolled.
If the scroll distance is greater than the start offset, you make it sticky. Otherwise, you will return it to your original style.
You can style with jQuery .css()
like I do below, or you can switch classes or both. This all works for you.
Example:
$(function() {
var targetDiv = $('#section1').find('.section-container');
var sec1offset = targetDiv.offset().top;
$(document).scroll(function() {
var distY = $(document).scrollTop();
if (sec1offset <= distY) {
$(targetDiv).css({
position: 'fixed',
top: '0',
left: '10vw',
zIndex: '0'
});
} else {
$(targetDiv).css({
position: '',
top: '',
left: '',
zIndex: ''
});
}
});
});
#section0 {
background-color: midnightblue;
width: 100%;
height: 60vh;
}
#section1 {
background-color: gold;
width: 100%;
height: 60vh;
}
#section1 .section-container {
width: 80%;
height: 30vh;
position: relative;
top: 20vh;
left: 10vw;
background-color: firebrick;
}
#section2 {
background-color: midnightblue;
width: 100%;
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section0"></section>
<section id="section1">
<div class="section-container"></div>
</section>
<section id="section2"></section>
source to share