Forums

nlourenco

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!

kgscott284

Untested:


$(function() {
    $(window).scroll(function() {
        var top = $('.sphere-text1').offset().top - $(document).scrollTop();
        var hdHt = $('#header').height();
        if (top < hdHt) {
            $('.sphere-text1').stop().animate({
                "opacity": "0"
            }, 150);
        }
        if (top > hdHt) {
            $('.sphere-text1').stop().animate({
                "opacity": "1"
            }, 150);
        }
    });
});

I would highly recommend trying out the waypoints plugin...http://imakewebthings.github.com/jquery-waypoints/ It will be able to handle this functionality rather easily...

nlourenco

Thank you kgscott284, it works!

treehouse : what would you like to learn today?

Forums

[Solved] Make class disappear when scrolled to bottom of div