Question

最新更新：可以找到处理粘性标题的确切JS文件。附上相同内容。

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

当用户访问主页（https://scholars.umd.edu/）并慢慢向下滚动时（当我们快速向下滚动时，问题会神奇地消失），顶部的红色条带似乎会卡住一段时间而且只是在滚动越来越多，用户最终可以向下滚动。请访问网站并向下滚动主页，您将了解问题。

我附加了相关的Javascript文件，我认为问题可能存在，但我是JS的新手，所以不确定是否会继续使用jQuery调用等。

更新： 此问题仅发生在Chrome中，而不发生在Firefox或IE中。我正在使用的chrome版本是版本59.0.3071.115（官方版本）（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 explain this in more detail.

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

向下滚动

1 个答案: