The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Make class disappear when scrolled to bottom of div

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #39715

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



    Thank you kgscott284, it works!

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.