Jquery removeClass - addClass within a section

Question

I have a div (#my-div) and an element in it (#element). The element is invisible at origin. I would like that when my-div is on the screen, the element becomes visible and when we leave up or down, the element becomes invisible again.

I use a script and it works when I scroll first down up to my-div but when I scroll downer or I scroll upper, the element remains visible, no further animation happens.

I use CSS for the transition.

The HTML:

<section>
    <div id="whatever">It is just a DIV</div>
    <div id="my-div">My DIV     
        <div id="element" class="invisible">The element</div>
    </div>
</section>

The CSS:

section {
    width:100%;
    min-height: 4000px;
    text-align: center;
    background-color: #e0e0e0;
}
#whatever {
    width: 80%;
    height: 500px;
    margin: 10%;
    background-color: #d0d0d0;
}
#my-div {width: 80%;
    height: 300px;
    margin: 10%;
    background-color: grey;
}
#element {
    width: 80%;
    height: 100px;
    background-color: red;
    -webkit-transition: all 1500ms cubic-bezier(0.680, 0, 0.265, 1); /* older webkit */
    -webkit-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
     -moz-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
     -ms-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
     -o-transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
     transition: all 1500ms cubic-bezier(0.680, -0.550, 0.265, 1.550); /* easeInOutBack */
}
.invisible {
    opacity: 0;
}
.visible {
    opacity: 1;
}

The jQuery script:

$(window).scroll(function(){            
    if ($(window).scrollTop() <= $('#my-div').offset().top) {
        $('#element').removeClass('invisible').addclass('visible');
    }
    if ($(window).scrollTop() > $('#my-div').offset().bottom) {
        $('#element').removeClass('invisible').addclass('visible');
    }
    else {
        $('#element').removeClass('visible').addclass('invisible');
    }
});

The fiddle to see it live: http://jsfiddle.net/igorlaszlo/u0tzu02b/

score 1 · Accepted Answer · edited May 23 '17 at 12:21

1

First off, here's a fiddle with the thing working.

I've remade the check that you were doing. I've used a function to determine if the div is on screen or not (I took it from here). Hope you don't mind.

$(window).scroll(function () {
    if (isScrolledIntoView('#element')) {
        $('#element').removeClass('invisible').addClass('visible');
    } else {
        $('#element').removeClass('visible').addClass('invisible');
    }
});

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

edited May 23 '17 at 12:21

Community

1
1

answered Jan 18 '15 at 21:56

acontell

6,792
1
19
32

Thanks a lot ! I did not know this function but it seems even more interesting. However, when i add the part of your code `function isScrolledIntoView(elem) {...`, my website can not be loaded. I changed the `(elem)` to my section name `('#my-section')` in your codes, were i right ? – Igor Laszlo Jan 19 '15 at 08:29
1

You're welcome :) You have to change "#element" to "#my-section" in the anonymous function of the scroll event (all occurrences, there are 3). Then place the function isScrolledIntoView(elem) as it is (don't change elem, it's a parameter, don't change anything inside the function either) along with $(window).scroll(...) inside your $(document).ready() function. Let me know if you have problems – acontell Jan 19 '15 at 08:51
Your thing works like angel, thanks a lot ! In the meantime i had a mistake in my codes, i said addclass instead of addClass, so maybe even my old script has worked well, it was just a typing problem... But i prefer your solution, so i take your answer as the solution ! – Igor Laszlo Jan 19 '15 at 09:29
@IgorLaszlo glad to help :) I noticed the typo but even correcting it, it didn't work that's why I proposed this solution, I think it's more reliable anyhow, cheers! – acontell Jan 19 '15 at 09:31

Jquery removeClass - addClass within a section

1 Answers1