JQuery粘性面板适用于除谷歌浏览器以外的所有浏览器

Question

我在下面有这个代码，用于在滚动到屏幕上的某个点时固定div面板。这在大多数浏览器中都可以正常使用，但在Google Chrome中无效。有什么想法吗？

问题是，当页面在页面的一半处时，粘性面板会释放，就好像它是页面的底部一样。我试图评论代码，以便更容易理解。

    $(document).ready(function () {
        // Set up variables
        var panelTD = $('#stickyPanel');
        var panelDiv = $('#stickyPanelDiv');
        var screenHeight = $(window).height();
        var pageHeight = $(document).height();
        var topOfPanel = panelDiv.offset().top;
        var panelHeight = panelDiv.height();
        var floatingHeight = panelHeight;
        var panelScroll = panelDiv.scrollTop();

        var scrollEvent = function () {

            var topOfPage = $(document).scrollTop();

            // Reset screen height if needed
            if (screenHeight != $(window).height())
            {
                screenHeight = $(window).height();
            }

            // Change floating height depending on screen height
            if ((screenHeight - 52) < panelHeight)
            {
                floatingHeight = (screenHeight - 52);
            }
            else
            {
                floatingHeight = panelHeight;
            }

            // Bottom of page
            if ((pageHeight - (panelHeight + 144 - panelScroll)) < topOfPage)
            {
                panelTD.css('vertical-align', 'bottom');
                panelDiv.css({
                    'bottom': '52px',
                    'position': 'static',
                    'height': panelHeight,
                    'overflow-y': 'visible'
                });
                panelDiv.mouseover(function () { $(this).css('overflow-y', 'visible'); });
            }
            // Fixed in the middle
            else if (topOfPage > (topOfPanel - 52))
            {
                panelDiv.css({
                    'position': 'fixed',
                    'height': floatingHeight,
                    'overflow-y': 'hidden'
                });
                panelDiv.mouseover(function () { $(this).css('overflow-y', 'scroll'); });
                panelDiv.mouseout(function () { $(this).css('overflow-y', 'hidden'); });

                // Set fixed div scroll position
                if (panelScroll != 0)
                {
                    if ((topOfPage - (topOfPanel - 52)) < panelScroll)
                    {
                        panelDiv.scrollTop(topOfPage - (topOfPanel - 52));
                    }
                }

            }
            // Top of page
            else
            {
                panelTD.css('vertical-align', 'top');
                panelDiv.css({
                    'position': 'static',
                    'height': panelHeight,
                    'overflow-y': 'visible'
                });
                panelDiv.mouseover(function () { $(this).css('overflow-y', 'visible'); });
            }
        };

        // Fixed div scroll event
        panelDiv.scroll(function () {
            panelScroll = $(this).scrollTop();
        });

        // Main window scroll event
        $(window).scroll(function () {
            scrollEvent();
        });
    });