Jquery粘性菜单不被页脚捕获 [英] Jquery sticky menu not being caught by footer

问题描述

任何人都可以帮我找出我的脚本问题吗？

Can anyone help me pinpoint the issue with my script please?

$(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/

粘性sidenav溢出在页脚div和无论我尝试我不能得到它的工作。

Sticky sidenav is spilling over the footer div and no matter what I try I can't get it to work. It works fine in my jsfiddle prototype.

推荐答案

问题是你忘记了 margin-top

The problem is that you are forgetting the margin-top of your sidebar in your calculation:

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

在你的Prototype JSFiddle中sidebar刚好没有 margin-top 。

In your Prototype JSFiddle the sidebar just happened to have no margin-top.

在sidenote上：您可能希望缓存选择器以提高性能。如果您多次使用相同的选择器，例如 $（＃sidebar），请将其放在一个变量中：
var sidebar = $（＃sidebar）; 。

On a sidenote: you may want to cache your selectors to improve performance. If you use the same selector more than once, for example $("#sidebar"), put it in a variable:
var sidebar = $("#sidebar");.

这篇关于Jquery粘性菜单不被页脚捕获的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！