我在右侧边栏上有一个滚动 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();
});
});
}