So the current script I have tells “.sphere-text1” to disappear when it gets within 230px from the top of the page (height of the header). The problem I face is that when the webpage responsively flips to mobile, the height of the header gets smaller and therefore the text disappears prematurely.
How can I simply say “.sphere-text1” to disappear when it hits the bottom of the “#header” div? I tried the code below, however it didn’t work…
[script type=”text/javascript”]
$(function() {
$(window).scroll(function(){
var top= $(‘.sphere-text1’).offset().top – $(document).scrollTop();
if (top < '#header'){
$(‘.sphere-text1’).stop().animate({“opacity”: “0”}, 150); }
if(top > ‘#header’){
$(‘.sphere-text1’).stop().animate({“opacity”: “1”}, 150);}
});
});
[/script]
Thanks!