0

右側のサイドバーにスクロール div があります。別の静的 div の下にとどまります。上下にスクロールしている間は正常に動作し、常に静的 div の下にとどまります。しかし、ajax を使用してより多くのデータをページにロードすると、ページを一番上までスクロールすると、このスクロール div は静的 div の上に留まります。誰でもこの問題を解決するのを手伝ってもらえますか?

編集 3: ajax を呼び出した後、スクロール機能を再度バインドすると機能します。問題は解決しました。

編集 2: 問題が見つかりました: ajax が呼び出された後、ページをスクロールしても $(document).scrollTop() は新しい値を返しません。scrollTop() 値を取得するにはどうすればよいですか?

編集:これは私のスクロール div 処理コードです:

var init_pos_y = null;
var right_column_height = null;
var margin_top = 20;
var top_position = null;
var left_position = null;
var position_type = null;
var AdsHeight = $('#ads_follow').height();
function absoluteBottomPositionWindow()
{
    return $(document).scrollTop() + windowHeight();
}
function absoluteTopPositionWindow()
{
    return $(document).scrollTop();
}
function absoluteTopPositionAds()
{
    if (top_position != null && position_type != null && position_type != 'fixed')
        return top_position;
    else
    {
        offset_ads = $('#ads_follow').offset();
        return offset_ads.top - margin_top;
    }
}
function absoluteBottomPositionAds()
{
    if (top_position != null && position_type != null && position_type != 'fixed')
        return top_position + $('#ads_follow').height();
    else
    {
        offset_ads = $('#ads_follow').offset();
        return offset_ads.top + $('#ads_follow').height();
    }
}
function absoluteLeftPositionRightContainer()
{
    offset_ads = $('#right-boxes').offset();
    return offset_ads.left;
}
function absoluteBottomPositionRightContainer()
{
    offset_right_column = $('#right-boxes').offset();
    return offset_right_column.top + $('#right-boxes').height() + 30;
}
function windowHeight()
{
    return $(window).height();
}
function absoluteBottomPositionContent()
{
    offset_left_column = $('#left-column-content').offset();
    return offset_left_column.top + $('#left-column-content').height() + 30;
}
$(window).resize(function()
{
    if ($('#ads_follow').css('position') == 'absolute' || $('#ads_follow').css('position') == 'fixed')
        $('#ads_follow').css('left', absoluteLeftPositionRightContainer() + 'px');
});
$(window).scroll(function()
{
    if (right_column_height == null)
    {
        right_column_height = (absoluteBottomPositionRightContainer());
    }
    if (right_column_height < absoluteBottomPositionContent())
    {
        if (init_pos_y == null)
        {
            init_pos_y = absoluteTopPositionAds();
        }
        if (absoluteTopPositionWindow() <= init_pos_y)
        {
            position_type = 'static';
        }
        else if (absoluteTopPositionWindow() >= absoluteTopPositionAds() && position_type != 'fixed' && position_type != 'absolute')
        {
            top_position = margin_top;
            left_position = absoluteLeftPositionRightContainer();
            position_type = 'fixed'
        }
        if ((absoluteBottomPositionContent() - AdsHeight - margin_top) < absoluteTopPositionAds())
        {
            if ($('#ads_follow').css('position') != 'absolute')
            {
                top_position = absoluteBottomPositionContent() - AdsHeight;
                left_position = absoluteLeftPositionRightContainer();
                position_type = 'absolute';
            }
        }
        else if (absoluteTopPositionWindow() - margin_top < absoluteTopPositionAds() && position_type == 'absolute')
        {
            top_position = margin_top;
            left_position = absoluteLeftPositionRightContainer();
            position_type = 'fixed';
        }
        if (position_type != null)
            $('#ads_follow').css('position', position_type);
        if (left_position != null)
            $('#ads_follow').css('left', left_position + 'px');
        if (top_position != null)
            $('#ads_follow').css('top', top_position + 'px');
        left_position = null;
        top_position = null;
    }
});

これは、ページにより多くのデータをロードするための私のコードです

$(window).scroll(function() {
    scrollFunc();
});


function scrollFunc()
{
    if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
        var offset = $('[id^="container-img-"]').length;
        $(window).unbind("scroll");

        if (offset < 15)
        {
            $("#seeMore").hide();
            $("#loadingPhoto").show();
            loadMoreRecords(offset);
        }
        else
        {
            $("#seeMore").show();
        }

    }

}


function loadMoreRecords(offset) {
    $.ajax({
        type: 'POST',
        url: getBaseURL() + 'ajax/loadMorePhoto',
        data: {
            offset: offset,
            currentpage: $("#currentPage").val()
        },
        success: function(data) {
            $("#loadingPhoto").hide();
            $("#listPhoto").html($("#listPhoto").html() + data);
        },
        error: function(data) {
            $("#loadingPhoto").hide();
            alert("Error loading photos");
        }

    }).done(function() {

        $(window).bind("scroll", function() {
            scrollFunc();

        });
    });

}
4

0 に答える 0