Grow your CSS skills. Land your dream job.

Make class disappear when scrolled to bottom of div

  • # 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 4:20 pm

    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…

    # September 7, 2012 at 5:00 pm

    Thank you kgscott284, it works!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".