右側のサイドバーにスクロール 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();
});
});
}