Forums

Give help. Get help.

  • # September 7, 2012 at 10:17 am

    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!

    # September 7, 2012 at 5:00 pm

    Thank you kgscott284, it works!

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag