Question

我试图在用户到达网站的某个部分时淡化元素。

在这种情况下，它将是#blog部分。

我正在使用此代码移动视口：

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

当用户到达#blog部分时，如何淡化一个被调用的元素：.read_more_blog？任何想法怎么做？

Answer 1

要指出正确的方向，请使用以下内容：

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

所以在0到800px之间#divFade会淡入。

如果每次使用都不同：

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

发现它：Check if element is visible after scrolling

视口移动addClass

1 个答案: