Question

我的网站上有一个浮动侧边栏

www.rayshaft.com

我也有ajax分页，所以边栏应该是浮动的，直到它到达页面的页脚，但问题是它有效只有第一页，当第二页通过ajax加载时，侧边栏不浮动。我被建议改变我的js代码，以便每次在ajax页面加载后我需要再次调用scroll函数或者我需要重新计算maxY和footTop ech时间滚动发生。我不知道任何js编程所以你能帮助我。如何修改此代码以获得我想要的内容？

$(window).load(function(){
$(function() {
    var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
    var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

    var maxY = footTop - $('#sidebar').outerHeight();

    $(window).scroll(function(evt) {
        var y = $(this).scrollTop();
        if (y > top) {
            if (y < maxY) {
                $('#sidebar').addClass('fixed').removeAttr('style');
            } else {
                $('#sidebar').removeClass('fixed').css({
                    position: 'absolute',
                    top: (maxY - top) + 'px'
                });
            }
        } else {
            $('#sidebar').removeClass('fixed');
        }
    });

Answer 1

使滚动条的功能成为一个独立的功能，然后在ajax脚本完成时调用它。

function ScrollBar()
{
$(function() {
var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

var maxY = footTop - $('#sidebar').outerHeight();

$(window).scroll(function(evt) {
    var y = $(this).scrollTop();
    if (y > top) {
        if (y < maxY) {
            $('#sidebar').addClass('fixed').removeAttr('style');
        } else {
            $('#sidebar').removeClass('fixed').css({
                position: 'absolute',
                top: (maxY - top) + 'px'
            });
        }
    } else {
        $('#sidebar').removeClass('fixed');
    }});
}
}

$(window).load(function(){
    ScrollBar();
});

现在ajax分页完成后，调用此函数：ScrollBar（）重新定位滚动条。

如何更改浮动侧边栏js代码，以便它与ajax分页一起使用？

1 个答案: