在滾動條上顯示不同的標題，然后在滾動到頂部javascript / JQuery時將其隱藏

Question

這讓我發瘋，因為我可以使用它，現在卻不能了，我有2個標題，當頁面加載時，我想隱藏一個標題，這很容易，所以一旦用戶滾動，我就希望另一個標題顯示在它上面然后當它們滾動回到頂部時，將顯示原始標題。

我認為window.pageyoffset存在問題，因為我在if語句中放入的內容無法執行。

<script>

    var secondHeader = $('.headerN').hide();

    function testScroll(){
        if(window.pageYOffset>50){
            secondHeader.fadeIn();
        }
        else if(window.pageYOffset == 0){
            secondHeader.fadeOut();
        }
    }
    window.onscroll=testScroll;

Answer 1

這是您需要的：

 $("#header-scroll").hide(); $(window).scroll(function() { if ($(this).scrollTop() > 10) { $('#header-scroll').slideDown(500); $('#header-full').slideUp(500); } else { $('#header-scroll').slideUp(500); $('#header-full').slideDown(500); } }); 

 .header { border: 2px #3a3a3a solid; width: 97%; position: fixed; text-align:center; color: #3a3a3a; top: 0px; } #header-full { height: 100px; background-color: #FFF056; font-size:72px; } #header-scroll { height: 50px; background-color: #CBE32D; font-size:28px; } #content { height: 600px; width: 97%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="header-full" class="header"> Full Header </div> <div id="header-scroll" class="header"> Scroll Header </div> <div id="content"></div> 

Answer 2

嘗試使用以下代碼。

$(window).scroll(function () {

            if ($(this).scrollTop() > 50) {

                $('.headerN').fadeIn();
            } else {
                $('.headerN').fadeOut();
            }
});