Viewport move addClass

Question

I´m trying to fadeIn an element when the user reach certain section of the website.

In this case it would be #blog section.

I´m using this code to move the viewport:

    function Global_viewport() {
        _viewport = this;
        _viewport.selector = $('#viewport');
        _viewport.inner = $('#viewport_inner');
        _viewport.section = '';
        $(window).bind({
            'resize' : function(){
                _viewport.inner.addClass('not_animate')
                _viewport.move(_viewport.section)
                if(this.resizeTO) clearTimeout(this.resizeTO);
                this.resizeTO = setTimeout(function() {
                    $(this).trigger('resizeEnd');
                }, 500);
            },
            'resizeEnd' : function(){
                _viewport.inner.removeClass('not_animate');
            }
        })
    }
    Global_viewport.prototype.move = function(s, noanimate){
        if(noanimate){
            _viewport.inner.addClass('not_animate')
        }
        var selector = $('#'+s);
        _viewport.section = s;
        if(selector.length){
            _viewport.inner.css({
                'top' : - selector.position().top
            })
            setTimeout(_viewport.refresh, 500)
            setTimeout(function(){
                _viewport.inner.removeClass('not_animate')
            }, 100)
        }else{
            _menu.pw_protected_target = s;
            main_menu.container.addClass('password');
            setTimeout(vp.refresh, 1000);
        }
    }
    Global_viewport.prototype.refresh = function(){
        var selector = $('#'+_viewport.section);
        var vp_height = Math.max(selector.height() , $(window).height())
        _viewport.selector.height(vp_height);
    }

How can I fadeIn an element that is called for example: .read_more_blog when the user reaches #blog section? any ideas how to do it?

score 0 · Answer 1 · edited May 23 '17 at 10:25

To point you out to the right direction use the following:

$(window).bind("scroll", function() {
    if ($(this).scrollTop() > 0 && $(this).scrollTop() < 800) {
        $("#divFade").fadeIn(800);      
    }

so between 0 and 800px #divFade will fadeIn.

if it is diffrent everytime use:

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop(),
        docViewBottom = docViewTop + $(window).height(),
        elemTop = $(elem).offset().top,
        elemBottom = elemTop + $(elem).height();
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

found it on: Check if element is visible after scrolling

this won´t help cause #blog is not always at the same height from top... sections above change dynamically — grafiker, Apr 04 '13 at 08:09

Viewport move addClass

1 Answers1