Question

有人可以帮我解决我的剧本问题吗？

$(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 > 100) {
        if (y < maxY) {
            $('#sidebar').addClass('stickyside').removeAttr('style');
        } else {
            $('#sidebar').removeClass('stickyside').css({
                position: 'absolute',
                top: (maxY - top) + 'px'
            });
        }
    } else {
        $('#sidebar').removeClass('stickyside');
    }
});
});

现场网站 - https://tregothnan.co.uk/tea-herbal-infusions/

Sticky sidenav正在溢出页脚div，无论我尝试什么，我都无法让它工作。它在我的jsfiddle原型中工作正常。

Answer 1

问题是您在计算中遗忘了侧边栏的margin-top：

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

在你的Prototype JSFiddle中，边栏恰好没有margin-top。

旁注：您可能希望缓存选择器以提高性能。如果您多次使用同一个选择器，例如$("#sidebar")，请将其放在变量中：
var sidebar = $("#sidebar");。

Answer 2

好的 - 非常感谢@ dark-ashelin

结束了这个 - 一点点黑客，但它确实有效。

$(function () {
var sidebar = $("#sidebar");
var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0))-60;
var maxY = footTop - $('#sidebar').outerHeight() - 85;
$(window).scroll(function (evt) {
    var y = $(this).scrollTop();

    if (y > 100) {
        if (y < maxY) {
            $('#sidebar').addClass('stickyside').removeAttr('style');
        } else {
            $('#sidebar').removeClass('stickyside').css({
                position: 'absolute',
                top: (maxY + 50) + 'px'
            });
        }
    } else {
        $('#sidebar').removeClass('stickyside');
    }
});
});

Jquery粘性菜单没有被页脚抓住

2 个答案: