Seeking to implement a responsive parallax effect on my website, I have the following structure:
<section id="first">
<div class="text fixed" >
<h1><b>aSs</b> lorem ipsum dolor sit amet</h1>
<p>Generally known thesis states that understandable content of a page can distract a user when they want to see its appearance on their own.<p>
<a class="btn btn-orange" href="#">See our <b>employees</b> ></a>
</div>
</section>
<section id="second"></section>
CSS:
#first{
background: url(../images/tlo1.jpg) no-repeat;
width: 100%;
background-size: cover;
background-position: 50%;
height: 699px;
text-align: center;
position: relative;
white-space: nowrap;
}
.fixed{
position:fixed;
top: 300px;
left: 0;
}
.static{
position: absolute;
left:0;
bottom: 0;
}
.text{
display: inline-block;
vertical-align: middle;
white-space: normal;
background: #fff;
padding: 30px 0;
width: 100%;
color: #7B7878;
font-size: 16px;
font-weight: 300;
}
Js:
pozycjaBlueBox = $("#first").offset().top + $('#first').height();
$(document).scroll(function(){
if($(window).width() <=1024){
pozycjaScrolla = $(window).scrollTop() + $("#first .text").offset().top+$("#first .text").height();
}else{
pozycjaScrolla = $(window).scrollTop() + $("#first .text").offset().top-60;
}
if($(window).width() > 768){
if(pozycjaScrolla >= pozycjaBlueBox){
$("#first .text").removeClass('fixed').addClass('static');
}else{
$("#first .text").removeClass('static').addClass('fixed');
}
}
});
I aim to keep the fixed text class in place until it reaches the top of #second. It functions well on larger desktop screens, but gets messy when resizing to smaller resolutions.