如何让我的头部更小，如果我将向下滚动网页

Question

我有我的标题位置：固定;和高度：200px;并在网站上的主要位置的绿色。我怎样才能把高度降低到100px;如果当我向下滚动网页？

我做了一些小JSFIDDLE，所以你可以看到它。 http://fiddle.jshell.net/#&js=ybR4h7OViQ

标题设置为200px高度。我只想知道我需要在这里添加什么JS/Jquery代码，以便它可以继续。

Answer 1

你在找这样的事吗？

$(function() { 
 
    $(window).scroll(function() { 
 
    if ($(window).scrollTop() > 5) 
 
     $("header").addClass("small"); 
 
    else 
 
     $("header").removeClass("small"); 
 
    }); 
 
});

* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';} 
 
body {padding-top: 100px;} 
 
p {margin: 0 0 10px;} 
 
header {height: 100px; line-height: 100px; text-align: center; background-color: #ccf; position: fixed; left: 0; top: 0; right: 0; transition: all 0.5s ease;} 
 
header.small {height: 50px; line-height: 50px;}

<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
<header> 
 
    <h1>Hello</h1> 
 
</header> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus aliquam fugiat corporis ratione. Eius maiores qui unde aperiam officia, dolorum quo, hic animi harum natus optio adipisci ipsa ratione totam.</p> 
 
<p>Pariatur repellendus repellat, dolores odio reprehenderit provident culpa nostrum molestias optio officia magni impedit iusto? Repellendus fugit est, dicta, non voluptatum similique perspiciatis facilis voluptates magnam. Veritatis iste quis corporis?</p> 
 
<p>Repellat totam deleniti officia sunt amet nisi libero ad, sint quidem, inventore sequi dolorum quae cum suscipit, molestias eum velit quod cupiditate. Soluta doloremque quis laboriosam unde ad laudantium praesentium.</p> 
 
<p>Laborum ab asperiores sequi, placeat expedita. Optio nostrum soluta temporibus numquam repellendus expedita, impedit ducimus reiciendis laudantium minima nobis harum adipisci labore vitae earum magni quo animi facere. Quas, fugit!</p> 
 
<p>At excepturi eius architecto dolorum aliquid. Ex ullam repellendus non id nulla modi quasi numquam, consectetur nam! Cum tempora quisquam, officiis. Atque ipsa culpa saepe, officiis modi error tempora sint!</p> 
 
<p>Ab minus, tempore! Modi nemo praesentium voluptatibus accusamus sit doloremque dignissimos facere illo dolor! Dicta hic consequatur sint voluptatum necessitatibus similique fugit culpa modi eius ab, maiores quam ipsa officia.</p> 
 
<p>In vero minus, dolorum deserunt voluptatibus accusamus, mollitia quasi, sapiente dicta distinctio explicabo cupiditate autem nisi placeat dolores odit harum molestiae aspernatur! Porro, optio vero dolorum architecto cumque incidunt quasi!</p> 
 
<p>Pariatur blanditiis et quod officiis illo iste numquam, temporibus, in neque doloremque. Facere dignissimos exercitationem nisi veritatis possimus vitae debitis quas animi natus excepturi fugit repellat, porro, voluptatum aliquid reiciendis.</p> 
 
<p>Facere, laudantium. Eaque reprehenderit laudantium distinctio quos, in obcaecati fuga. Quia provident, temporibus voluptates, totam delectus nesciunt corrupti optio et voluptatem possimus facere tempore ad quod vel soluta velit itaque?</p> 
 
<p>Quisquam, itaque tenetur accusantium nemo temporibus odit, id qui atque ab magnam sunt voluptas soluta deserunt impedit neque amet nesciunt eaque unde dignissimos. Sequi eligendi, quos consectetur, laborum commodi maxime.</p> 
 
<p>Temporibus et facilis, ipsum aspernatur omnis provident aliquam illum neque laboriosam libero voluptatum voluptates dicta labore ut saepe harum consequuntur eligendi facere quibusdam dolores, ex reiciendis enim aut, impedit! Tempora.</p> 
 
<p>Beatae, ullam, odit. Animi, maiores facere fuga et. Laborum quae sequi veritatis, incidunt dignissimos dolorem, labore, error maxime quam ullam modi fugit accusantium possimus architecto id blanditiis pariatur aperiam ducimus?</p> 
 
<p>Illum magni porro consequatur veritatis earum. Illum delectus, earum quidem error facilis animi ad aperiam temporibus, nesciunt cum nemo fuga quod, assumenda alias ipsum atque. Animi beatae aliquid, voluptatum ratione!</p> 
 
<p>Tempore architecto enim quibusdam, aperiam reprehenderit. Culpa laboriosam commodi ipsum cumque, suscipit cupiditate! Earum repellat totam quo eaque vitae, numquam natus laborum reprehenderit hic, rerum illo, nostrum nobis id. Odio?</p> 
 
<p>In accusamus voluptatum alias doloremque repellat, minima at fugiat commodi praesentium perspiciatis similique quaerat, iste quibusdam, a consectetur ullam modi quod maiores nihil quam velit maxime ad. Ipsum, aut, architecto.</p>

Answer 2

只要做到这一点是这样的：

var heightFromTop = 50, //Height from top where header will shrink 
    headerHeight = 100, //height that header will shrink to. 
    header = document.querySelector(".header"), //Selects .header element 
    defaultHeight = getComputedStyle(header).height; //Gets the default height of the element 

window.onscroll = function() { //Runs function when you scroll window 
    if (document.documentElement.scrollTop > heightFromTop) header.style.height = headerHeight + "px"; //Checks if the body is scroll down more then heightFromTop 
    else header.style.height = defaultHeight + "px"; //Otherwise, set it to the default height 
} 

JSFiddle Demo