僅在特定頁面上滾動顯示div

Question

簡而言之，我的主頁與其他頁面在一個主要方面是不同的，直到向下滾動400px才顯示標題。 在其他任何頁面上，它在加載時都顯示，滾動無所謂。

我為每個工作編寫了兩段代碼，但其中一個是jQuery，另一個是Plain JS。 我需要將它們組合在一起，因為它們僅應基於“主頁”條件和y> = 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 個解決方案

解決方案1
1 已采納 2017-02-24 22:13:45

僅在特定頁面上滾動顯示div

問題描述

1 個解決方案

解決方案1 1 已采納 2017-02-24 22:13:45

解決方案1
1 已采納 2017-02-24 22:13:45