Scroll上的標題更改

Question

在我正在創建的網站中，我希望將一個標題更改爲滾動大小。我已經完成了理論上應用的兩種方法。這個頭文件是包含JS的大文檔的一部分，當我測試其他JS正在工作時，所以我不相信這是一個主要的語法錯誤。另外當我檢查它時，我沒有看到控制檯中的任何錯誤。

$(document).on('scroll', function(e) { 
 
    var value = $(this).scrollTop(); 
 
    if (value < 100) 
 
     $("header").css("height", "100px"); 
 
    else 
 
     $("header").css("height", "45px"); 
 
});

header { 
 
    height: 300px; 
 
    background-color: #69D2E7; 
 
    font-family: 'Raleway', sans-serif; 
 
    z-index: 30; 
 
    width: 100vw; 
 
    box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6); 
 
    position: fixed; 
 
}

<header> 
 
    <a href="index.html"> 
 
     <h1>MEH Web Design</h1> 
 
    </a> 
 
    </header>

我試圖做到這一點還沒有工作的另一種方法是：

$(function() { 
 
    var header = $(".hlarge"); 
 
    $(window).scroll(function() {  
 
     var scroll = $(window).scrollTop(); 
 
    
 
     if (scroll >= 200) { 
 
      header.removeClass('hlarge').addClass("hsmall"); 
 
     } else { 
 
      header.removeClass("hsmall").addClass('hlarge'); 
 
     } 
 
    }); 
 
});

.hlarge { 
 
    height: 300px; 
 
    background-color: #69D2E7; 
 
    font-family: 'Raleway', sans-serif; 
 
    z-index: 30; 
 
    width: 100vw; 
 
    box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6); 
 
    position: fixed; 
 
} 
 
.hsmall { 
 
    height: 150px; 
 
    background-color: #69D2E7; 
 
    font-family: 'Raleway', sans-serif; 
 
    z-index: 30; 
 
    width: 100vw; 
 
    box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6); 
 
    position: fixed; 
 
}

 
    <header class="hlarge"> 
 
    <a href="index.html"> 
 
    <h1>MEH Web Design</h1> 
 
    </a> 
 
    </header>

在第二個中的JS不會甚至改變類

Answer 1

我認爲在你的任何一個例子中身體都不夠高，無法滾動發生。

$(document).on('scroll', function(e) { 
 
    var value = $(this).scrollTop(); 
 
    if (value < 100) 
 
     $("header").css("height", "100px"); 
 
    else 
 
     $("header").css("height", "45px"); 
 
});

header { 
 
    height: 300px; 
 
    background-color: #69D2E7; 
 
    font-family: 'Raleway', sans-serif; 
 
    z-index: 30; 
 
    width: 100vw; 
 
    box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6); 
 
    position: fixed; 
 
} 
 

 
body { 
 
    min-height:1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<header> 
 
    <a href="index.html"> 
 
     <h1>MEH Web Design</h1> 
 
    </a> 
 
    </header>

Answer 2

你的代碼的工作，但頁面顯得太短，實際上需要滾動，你才能觸發滾動事件需要。即使觸發它，$ .scrollTop（）也會返回視口上方頁面部分的像素高度，因此您必須讓頁面比視口高至少100像素才能獲得所需的效果。嘗試在頁面中添加更多內容或設置比文檔正文上的視口更大的最小高度。

$(document).on('scroll', function(e) { 
 
    var value = $(this).scrollTop(); 
 
    if (value < 100) 
 
     $("header").css("height", "100px"); 
 
    else 
 
     $("header").css("height", "45px"); 
 
});

body{ 
 
    min-height: 1000px 
 
} 
 
header { 
 
    height: 300px; 
 
    background-color: #69D2E7; 
 
    font-family: 'Raleway', sans-serif; 
 
    z-index: 30; 
 
    width: 100vw; 
 
    box-shadow: 1px 1px 10px rgba(40, 40, 40, 0.6); 
 
    position: fixed; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <a href="index.html"> 
 
    <h1>MEH Web Design</h1> 
 
    </a> 
 
</header>