gpt4 book ai didi

javascript - 仅在特定页面中滚动显示 div

转载 作者:行者123 更新时间:2023-12-03 04:55:26 24 4
gpt4 key购买 nike

简单地说,我的主页与其他页面的一个主要不同之处是,只有向下滚动 400 像素后,标题才会显示。在任何其他页面中,它都会在加载时显示,并且滚动并不重要。

我为每项工作编写了两段代码,其中一段是 jQuery,另一段是 Plain JS。我需要将它们组合起来,因为它们只应该基于“主页”条件和 y >= 400 条件工作。

这就是我所拥有的:

我的主页以编程方式添加了“home”类,因此我可以将其用作 Hook 类。

jQuery(document).ready(function($) {

//this hides the header until after slider has loaded on the homepage. Otherwise I get a glitch because the header attempts to load before the slider. So, I'm slowing it down only on the home page, else, timeout is Zero = show right away.
if ($("body").hasClass("home")){
setTimeout(function() {
$('header').removeClass("hide-header");
}, 5000);
} else {
setTimeout(function() {
$('header').addClass("show-header");
}, 0);
}
});

这是滚动的JS函数。因为它不以主页为条件,所以它正在全局范围内发生。我需要以某种方式将这两者结合起来,以便滚动的事情只发生在主页中

//show header on scroll
topHeader = document.getElementById("masthead");

var myScrollFunc = function () {
var y = window.scrollY;
if (y >= 400) {
topHeader.className = "site-header show-header"
} else {
topHeader.className = "site-header hide-header"
}
};

window.addEventListener("scroll", myScrollFunc);

如果有帮助,这里是相关的 HTML:

<body class="home page-template">
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content">Skip to content</a>

<header id="masthead" class="site-header" role="banner">
....
</header>
.... blah blah blah
</body>

以及您在此处看到的类的 CSS

.site-header{
width: 100%;
position: fixed;
z-index: 1;
}
.hide-header {
opacity:0;
}
.show-header {
opacity:1;
}

提前谢谢大家!

最佳答案

只需在 if ($("body").hasClass("home")) 条件内添加 window.addEventListener("scroll", myScrollFunc); .

关于javascript - 仅在特定页面中滚动显示 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42448982/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com