当向下滚动时，页面顶部会卡住一段时间。

Question

最新更新: 能找到处理粘头的准确JS文件.附上同样的。

我最近开始维护一个已经使用Drupal建立的网站。

当用户访问网站首页时(https:/scholars.umd.edu。)，然后慢慢向下滚动(当我们快速向下滚动时，这个问题就神奇地消失了)，顶部的红色带子似乎卡住了一段时间，只有当用户越滚越多时，才最终能够向下滚动。

我附上相关的Javascript文件，我认为问题可能存在，但我是JS新手，所以不太清楚jQuery调用等是怎么回事。

更新。 我使用的chrome版本是59.0.3071.115 (Official Build)(64位)。此外，当我使用鼠标向下滚动或使用触摸板缓慢向下滚动时，问题也会发生。如果我点击并拖动右边的滚动器，问题就不会出现。 jQuery(document).ready(function ($) { function stickymenu() { 鼠标点击并拖动右边的滚动条，问题就不存在了。

var $this = this,
    $body = $("body"),
    header = $("#header"),
    headerContainer = header.parent(),
    menuAfterHeader = (typeof header.data('after-header') !== 'undefined'),
    headerHeight = header.height(),
    flatParentItems = $("#header.flat-menu ul.nav-main > li > a"),
    logoWrapper = header.find(".logo"),
    logo = header.find(".logo img"),
    logoWidth = logo.attr("width"),
    logoHeight = logo.attr("height"),
    logoPaddingTop = parseInt(logo.attr("data-sticky-padding") ? logo.attr("data-sticky-padding") : "28"),
    logoSmallWidth = parseInt(logo.attr("data-sticky-width") ? logo.attr("data-sticky-width") : "82"),
    logoSmallHeight = parseInt(logo.attr("data-sticky-height") ? logo.attr("data-sticky-height") : "40");

if(menuAfterHeader) {
    headerContainer.css("min-height", header.height());
}

$(window).afterResize(function() {
    headerContainer.css("min-height", header.height());
});

$this.checkStickyMenu = function() {

    if(!menuAfterHeader) {

        if($(window).scrollTop() > ((headerHeight - 15) - logoSmallHeight)) {

            $this.stickyMenuActivate();

        } else {

            $this.stickyMenuDeactivate();

        }

    } else {

        if($(window).scrollTop() > header.parent().offset().top) {

            header.addClass("fixed");

        } else {

            header.removeClass("fixed");

        }

    }

}

$this.stickyMenuActivate = function() {

    if($body.hasClass("sticky-menu-active"))
        return false;

    logo.stop(true, true);

    $body.addClass("sticky-menu-active").css("padding-top", headerHeight);
    flatParentItems.addClass("sticky-menu-active");

    logoWrapper.addClass("logo-sticky-active");

    logo.animate({
        width: logoSmallWidth,
        height: logoSmallHeight,
        top: logoPaddingTop + "px"
    }, 200, function() {});

}

$this.stickyMenuDeactivate = function() {

    if($body.hasClass("sticky-menu-active")) {

        $body.removeClass("sticky-menu-active").css("padding-top", 0);
        flatParentItems.removeClass("sticky-menu-active");

        logoWrapper.removeClass("logo-sticky-active");

        logo.animate({
            width: logoWidth,
            height: logoHeight,
            top: "0px"
        }, 200);

    }

}


$(window).on("scroll", function() {

    $this.checkStickyMenu();

});

$this.checkStickyMenu();


}

stickymenu();

});

Answer 1

你可能是由于Chrome应用你的轮子事件的方式而看到的。Ben Nadel详细解释了这个问题。

解决你的问题的方法很可能归结为设置以下几点 overscroll-behavior: contain 在你 overflow: auto 容器。