Question

我创建了一个粘性滚动条，但当我向下滚动时，它会显示一些故障并将滚动条重新放回顶部（分辨率1920x1080）。它在较小的分辨率下工作正常。

使用Javascript：

$(document).ready(function() {
    // Cache selectors for faster performance.
    var $window = $(window),
        $mainMenuBar = $('#mainMenuBar'),
        $mainMenuBarAnchor = $('#mainMenuBarAnchor');

    // Run this on scroll events.
    $window.scroll(function() {
        var window_top = $window.scrollTop();
        var div_top = $mainMenuBarAnchor.offset().top;
        if (window_top > div_top) {
            // Make the div sticky.
            $mainMenuBar.addClass('stick');
            $mainMenuBarAnchor.height($mainMenuBar.height());
        }
        else {
            // Unstick the div.
            $mainMenuBar.removeClass('stick');
            $mainMenuBarAnchor.height(0);
        }
    });
});

HTML

    <div id="top" style="width: 100%; height: 100px; background: #ccc; margin: 0;">Top Panel</div>

<div id="mainMenuBarAnchor"></div>
<div id="mainMenuBar" style="width: 100%; height: 50px; background: #999; margin: 0;">Sticky Panel</div>

<div id="content" style="width: 100%; height: 630px; background: #ccc; margin: 0;">
    Content Panel
    <br/>
    <br/>
    This panel will not jump when the sticky panel becomes stuck.
</div>

CSS

.stick {
    position: fixed;
    top: 0;
}

这是滚动条的按扣，我无法使用鼠标滚轮向下滚动。需要明确拖动滚动条 http://i67.tinypic.com/16i7c5y.png

这是一个小提琴，你可以看到https://jsfiddle.net/mnaveed76/jsm3quk9/9/

更新：该问题仅在Firefox浏览器中出现。

滚动上的粘性棒故障

0 个答案: