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

如果我将向下滚动网页，如何使我的标题更小

2 个答案: