JS & CSS Help On Scroll
Out of context: Reply #2
- Started
- Last post
- 9 Responses
- sted0
Replace this JS (please keep in mind that $(... isn't the way you call jquery in WP unless u defined it earlier proper call is jQuery(... )
<script type="text/javascript">
$(document).scroll(function() {
var positionScroll = $(this).scrollTop();if(positionScroll <= 499) {
$(".overlay").css("background-color", "#fff");
} else if (positionScroll > 500 && positionScroll < 1100) {
$(".overlay").css("background-color", "#2ecc71");
} else {
$(".overlay").css("background-color", "#fff");
}
});
</script>With this:
<script type="text/javascript">
/* Add overlay */
jQuery(document).ready(function... {
jQuery('<dvi class="overlay"></div>').insertAfter(jQuery('.nk-awb-inner'));
jQuery('.nk-awb-wrap .overlay').fadeOut();
});
/* get viewport height and adjust the scroll trigger position by 300px */
var vH=jQuery(window).height()-300;/* set the overlay status */
var overlay=false;jQuery(document).scroll(function... {
/* get window scroll px */
var positionScroll = jQuery(this).scrollTop();/* add/remove overlay whenever its required */
if(positionScroll>vH && !overlay){
overlay=true;
jQuery('.nk-awb-wrap .overlay').fadeIn();
}else if(positionScroll<vH && overlay){
overlay=false;
jQuery('.nk-awb-wrap .overlay').fadeOut();
}
});
</script>Add this CSS for the overlay:
.nk-awb-wrap .overlay{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(120deg, #000, #000);
opacity: .7;
}
.nk-awb-wrap .overlay {
z-index: 1;
}
.nk-awb-wrap > * {
z-index: 100;
}