Get help. Give help. A Web Design and Development Community.

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() {
    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);}


    # September 7, 2012 at 4:20 pm

    This reply has been reported for inappropriate content.


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

    I would highly recommend trying out the waypoints plugin… 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.

We have a pretty good* newsletter.