0

ユーザーがウェブサイトの特定のセクションに到達したときに要素をフェードインしようとしています。

この場合、#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 と呼ばれる要素をフェードインするにはどうすればよいですか? それを行う方法はありますか？

4

1 に答える 1

0

正しい方向を示すには、次を使用します。

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

見つかった:スクロール後に要素が表示されるかどうかを確認する

于 2013-04-04T08:01:47.620 に答える