Using Jquery to move a .scroll based div depending on window.scrollY
What I am trying to do is show div
on the left side after the user has scrolled a certain number of pixels. Then, when it passes another point, it moves to the right and disappears again. Then if the user scrolls back to div
undo his move.
The problem I'm running into is that when div
moved to the right side, it expands the view as opposed to when it was on the left side. I tried changing the left value to the correct value, but nothing I've tried works.
Here's the code I've used so far for jQuery:
window.addEventListener('scroll', function() {
if (window.scrollY <= 50) {
$('#leftinfo').animate({left: '-150%'});
}
else if (window.scrollY >= 50 && window.scrollY <= 200){
$('#leftinfo').animate({left: '25%'}, 'swing');
}
else if (window.scrollY >= 200) {
$('#leftinfo').animate({left: '100%'}, 'swing');
}
});
I also have a link to JS Bin. which http://jsbin.com/hadabe/7/edit?css,js,output
source to share
First of all, jQuery animation on the same object is queued and executed in first order. you need to stop them first by calling .stop()
to clear the animation queue so that your new animation will run right away.
secondly, to prevent your window from expanding the scrollable area, you need to tell your html body to hide elements that overflow its borders, but only on the x-axis.
window.addEventListener('scroll', function() {
if (window.scrollY <= 50) {
console.log("phase I");
$('#leftinfo').stop().animate({
left: '-150%'
});
} else if (window.scrollY >= 50 && window.scrollY <= 200) {
console.log("phase II");
$('#leftinfo').stop().animate({
left: '25%'
}, 'swing');
} else if (window.scrollY >= 200) {
console.log("phase III");
$('#leftinfo').stop().animate({
left: '100%'
}, 'swing');
}
});
body {
margin: 0;
height: 75rem;
width: auto;
float: right;
display: inline-block;
overflow-x: hidden;
}
.frontintro {
border: 1px solid black;
background-color: #FFFFFF;
padding: 1rem;
display: inline-block;
color: #000000;
border-radius: 15px;
}
#leftinfo {
position: absolute;
top: 15rem;
width: 65%;
z-index: 100;
left: -150%;
}
#leftinfo p {
font-size: 2rem;
text-align: center;
}
#rightinfo {
float: right;
position: relative;
margin: 5rem;
width: 35%;
}
#rightinfo p {
font-size: 1.5rem;
text-align: center;
}
#first {
background: #c6bea6;
background-size: cover;
color: white;
height: 52rem;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 300;
}
#second {
background: #9e9e9e;
background-size: cover;
color: white;
height: 800px;
margin: 0 auto;
overflow: hidden;
padding: 0;
position: relative;
z-index: 200;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-content">
<div id="first">
<div class="frontintro" id="leftinfo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus fringilla elementum. Integer malesuada justo id bibendum dignissim.</p>
</div>
<!-- End of .frontintro & leftinfo -->
</div>
<!-- End of #first -->
<div id="second">
<div class="frontintro" id="rightinfo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus fringilla elementum. Integer malesuada justo id bibendum dignissim. Praesent pellentesque sagittis lacinia. Pellentesque tincidunt diam at turpis tincidunt egestas.</p>
</div>
<!-- End of .frontintro & .rightinfo -->
</div>
<!-- End of #second -->
</div>
source to share
Add this to your CSS:
#main-content {
overflow-x:hidden;
}
This will prevent your parent div from dynamically resizing to fit its children.
You can read more about the overflow property here: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
source to share
You can try this code.
window.addEventListener('scroll', function() {
var offset = $('#first').offset();
var height = $('#first').height();
var computed = parseInt((offset.top + height) / (height / 2));
if (window.scrollY < computed) {
$('#leftinfo').stop().animate({left: '-150%'});
} else if (window.scrollY >= computed && window.scrollY < parseInt((offset.top + height) / 2)) {
$('#leftinfo').stop().animate({left: '25%'}, 'swing');
} else if (window.scrollY >= parseInt((offset.top + height) / 2)) {
$('#leftinfo').stop().animate({left: '100%'}, 'swing');
}
});
source to share