【发布时间】：2017-07-14 16:08:32
【问题描述】：
最新更新：可以找到处理sticky header的确切JS文件。附加相同。
我最近开始维护一个已经使用 Drupal 构建的网站。
当用户访问主页（https://scholars.umd.edu/）并缓慢向下滚动（当我们快速向下滚动时问题神奇地消失了），顶部的红色带似乎卡了一段时间，只有在滚动更多之后以及用户最终能够向下滚动的更多内容。请转到网站并在主页上向下滚动，您就会明白这个问题。
我附上了我认为可能存在问题的相关 Javascript 文件，但我是 JS 的新手，所以不太确定 jQuery 调用等发生了什么。
更新： 此问题仅发生在 Chrome 中，而不发生在 Firefox 或 IE 中。我使用的 chrome 版本是版本 59.0.3071.115 (Official Build) (64-bit)。此外，当我使用鼠标向下滚动或使用触摸板并缓慢向下滚动时，也会出现此问题。如果我单击并拖动右侧的滚动条，则问题不存在。 jQuery（文档）.ready（函数（$）{ 功能粘性菜单（）{
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();
});
【问题讨论】：
-
谁投了反对票，请给个理由好吗？我会欣赏事实/规则而不是好奇心。
-
没有投反对票，但您需要在此处发布代码，而不仅仅是指向生产站点的链接。问题得到解答后，您将修复网站，然后任何人都可以看到问题所在？
-
有趣的事情：它只在我使用滚轮时发生，而不是在我拖动滚动条时发生。
-
发布数百行 Javascript 也不受欢迎。尝试将您的示例简化为您可以在此处发布的MCVE。将 Javascript 缩小到处理滚动事件的部分应该不难。
-
我无法重现该问题。我在 Sierra，Chrome 55.0。
标签： javascript jquery scroll drupal-7 frontend