Question

简单地说，我的主页与其他页面的主要不同之处在于，在您向下滚动400px之前，标题不会显示。在任何其他页面中，它显示加载和滚动无关紧要。

我为每个作业编写了两段代码，但其中一段是jQuery，另一段是Plain JS。我需要将它们组合起来，因为它们只能根据“主页”条件和y＆gt; = 400条件工作。

这就是我所拥有的：

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

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;
}

先谢谢你们！

Answer 1

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

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

1 个答案: