1
我有这样的代码：scrollTop的（）不工作
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('header span').animate({
top: '0'
}, 400, function() {
// Animation complete.
});
} else {
$('header span').animate({
top: '-90px'
}, 400, function() {
// Animation complete.
});
}
});body {
margin: 0;
padding: 0;
}
header {
position: fixed;
top: 0;
width: 100%;
padding: 50px 0;
background: lightblue;
text-align: center;
}
header span {
position: relative;
top: -90px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<span>TEST</span>
</header>
<main>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor soluta officia repudiandae inventore itaque reprehenderit consequuntur possimus quam aliquam sit neque quis provident, beatae cupiditate non vero, aliquid velit veniam.</div>
<div>Temporibus quo aut quidem molestiae odit mollitia nulla ratione, repellat itaque facilis quos, aspernatur illo, impedit perferendis qui soluta. Dicta perferendis, suscipit maiores iure aspernatur ab officiis, architecto a consequuntur.</div>
<div>Autem, quisquam eos aut! Totam mollitia rem maxime, error quo quam eos. Nisi quam vero quasi! Eius ab quis dicta aperiam, illum id, iste, ratione ducimus facilis, delectus dolorum aspernatur.</div>
<div>Enim sed illo animi culpa veniam excepturi, accusamus, voluptates nulla vitae impedit atque doloribus. Et, esse aperiam, dolorem quae odio quos quaerat repellendus numquam saepe error asperiores. Maiores, tenetur neque!</div>
<div>Perferendis et dicta, expedita esse accusamus voluptates nam, fugit id. Consequatur quos ipsam magnam cupiditate impedit, nemo, aut voluptatibus vel quae perspiciatis soluta sit laboriosam fugit illo, voluptate earum eveniet!</div>
<div>Ex quam modi rerum non doloribus, suscipit dolorum, at beatae, voluptatem odit illo deleniti nostrum veritatis saepe. Consequatur dolor consequuntur ea eum, aut omnis quidem, dignissimos quam! Perspiciatis, ratione, incidunt!</div>
<div>Laboriosam ipsam vel recusandae quia corporis cum a animi nulla ipsum amet! Maiores aperiam, iusto eum suscipit molestiae eveniet molestias blanditiis ut, sunt odio quibusdam sit eius ratione qui illum!</div>
<div>Voluptatum aspernatur necessitatibus eius inventore. Quod illo odio nostrum id sapiente quidem ad blanditiis minima cumque fuga aliquid repellendus omnis saepe reiciendis, repellat harum suscipit nemo nesciunt incidunt maiores beatae!</div>
<div>Sint alias culpa nostrum, velit praesentium veniam labore aliquam libero fuga, in nihil maxime. Sunt aut quidem ut deserunt iure assumenda optio, delectus laborum esse alias sed velit iste ullam!</div>
<div>Debitis odit quod, mollitia optio dolorum, quo eos similique dolor in, eius doloribus accusantium esse voluptate a ipsum? Ipsam cum voluptatem deserunt expedita molestiae itaque placeat adipisci reiciendis perferendis obcaecati.</div>
<div>Iste quas eius beatae illo impedit consectetur, vero, perspiciatis sit non, perferendis quasi. Necessitatibus expedita, totam libero, perferendis fuga ipsam et illo modi, sit iusto dolore quo, atque error reprehenderit?</div>
<div>Cum eligendi aliquid ea, sequi perferendis quibusdam magni eum, tenetur quia alias inventore quidem minima. Ad ipsum cumque voluptas incidunt culpa nobis officiis natus nam, ut, vitae excepturi possimus quibusdam?</div>
<div>Praesentium inventore officia, soluta laudantium rerum quia earum. Doloribus dignissimos suscipit soluta veniam facere ab exercitationem ad corrupti, pariatur eos ut maxime deleniti cum qui enim, similique accusantium quam officia!</div>
<div>Sit nobis, tenetur quod distinctio beatae blanditiis suscipit delectus ea molestiae? Eveniet, doloribus aliquam saepe voluptatem exercitationem incidunt, ad quaerat beatae sint dolores in quibusdam illo, ducimus omnis nemo magni.</div>
<div>Culpa perspiciatis, sapiente quis ipsam quisquam. Enim dolorum at maiores tempora commodi veniam officiis incidunt sapiente rerum, possimus, voluptates temporibus sit nulla autem deserunt cumque aspernatur nostrum doloremque minima. Vel.</div>
<div>Corporis, recusandae eaque qui quae. Corrupti cum, rem distinctio eligendi dolorum dignissimos culpa, error deserunt, amet iure repellat sint cupiditate, dicta molestias perferendis. Pariatur quas ipsum quis suscipit ipsam excepturi.</div>
<div>Nisi magni odit animi illo et ea earum nemo assumenda quod accusamus, asperiores tempora omnis dicta ab dolorum veritatis doloremque exercitationem iste sit nostrum. Cumque non quasi deleniti, rem deserunt!</div>
<div>Doloremque quasi et ab aliquid ullam ipsum, laboriosam molestiae natus iure architecto, repudiandae, deleniti enim explicabo quas optio sunt provident pariatur autem laborum rerum. Ab ipsam nostrum et qui natus!</div>
<div>Accusamus nobis eligendi labore dignissimos minus, ad in, dicta rem magnam facilis adipisci et aut, eos possimus ab quaerat ex quisquam atque quos molestiae. Velit minus voluptatum praesentium, et accusantium!</div>
<div>Minus, dolores, expedita eligendi maiores perspiciatis molestias assumenda nostrum beatae odit ratione optio iure id at commodi! Deleniti commodi ipsam at temporibus, corrupti qui atque esse tempore incidunt! Fugit, delectus.</div>
<div>Tempora consectetur laboriosam sint quas architecto itaque perspiciatis, necessitatibus, quibusdam nesciunt nobis hic accusamus, molestias nisi. Animi minima, soluta expedita nostrum, facilis, molestias aliquam voluptate adipisci doloribus, tenetur
sed? Repudiandae.</div>
<div>Atque voluptas animi possimus hic molestiae adipisci, fugiat autem recusandae, consequatur cumque aliquid, voluptatibus commodi labore vel porro explicabo iure quam harum assumenda praesentium. Ullam ducimus fugit iusto animi qui.</div>
<div>Itaque nihil quam architecto, cumque similique quo sed eaque ab. Quibusdam deleniti dignissimos soluta eligendi, in incidunt magnam iure magni neque cupiditate porro molestias facere, impedit, atque culpa alias ea!</div>
<div>Maiores magni reiciendis, tempore, consectetur unde quibusdam atque sequi natus deleniti officia quos incidunt, expedita ipsa dolorem deserunt molestiae quo eius accusantium laboriosam rem repudiandae. Ratione, voluptates cumque mollitia nisi.</div>
<div>Magni reiciendis pariatur est rerum quidem corrupti, dolorem error suscipit et dolores. Adipisci, id, nam. Deleniti totam perferendis doloremque, et id hic. Natus voluptas, neque optio ullam accusantium nobis non.</div>
<div>Aperiam dicta enim, amet numquam dolor in reiciendis, earum iure deserunt placeat, asperiores! Cupiditate amet ut, in labore sunt quibusdam eligendi distinctio at doloremque magni, fuga, vitae placeat reiciendis optio.</div>
<div>Neque molestias rem, mollitia hic suscipit expedita. Modi vitae itaque, cum magni, laboriosam mollitia dolorem eaque ex ipsa eos. Dicta dolorum necessitatibus eligendi molestiae nemo quia ipsa! Corrupti, architecto, reprehenderit.</div>
<div>Nam iste quas unde distinctio maiores voluptas laudantium deleniti laboriosam quaerat cumque, non totam architecto accusamus, omnis adipisci deserunt optio animi accusantium quis et repudiandae dolorum enim quod officiis. Eveniet?</div>
<div>Dolores odit reprehenderit cum nisi voluptate dolorum officiis debitis hic, minima iure, sunt doloribus. Molestias dolorum sequi suscipit tenetur repellendus eum nulla eaque iure magnam, doloribus quo fugiat repudiandae in!</div>
<div>Fugiat nulla, dolor atque voluptate ad debitis voluptates neque saepe, quam dicta. Ipsam quo dolore dignissimos alias at aut deserunt obcaecati fugiat quod! Deserunt nihil dolorem id at sed cum.</div>
<div>Magni nesciunt eaque, quas, vero similique maxime perspiciatis, odit sit dignissimos dolores quod voluptatem velit quisquam doloremque ad molestias distinctio commodi optio! Veniam, vero, debitis natus sit deserunt enim mollitia.</div>
<div>Obcaecati beatae quaerat, ad mollitia ullam nisi error? Qui non dolor sit tenetur ratione ipsam consequatur id similique velit harum. Nesciunt eos, vitae aut debitis iste, accusantium repudiandae ratione at.</div>
<div>Sequi consequuntur, quos veritatis, consectetur aspernatur, sunt, sit at repellat eveniet molestias odit dignissimos esse laborum distinctio inventore ratione nesciunt incidunt officia dolore fugit. Natus doloremque ex neque veniam quam?</div>
<div>Quisquam, eum blanditiis mollitia expedita, natus similique amet molestiae, explicabo fugit quasi aspernatur sed porro, placeat debitis fuga sapiente quidem animi maiores quod cumque eligendi corrupti iusto. Ut, voluptates, totam.</div>
<div>Minima voluptas officiis atque quos velit deleniti veniam error, cum ullam aspernatur non quidem voluptatibus illo doloribus dolorum autem. Atque possimus voluptas quod quaerat distinctio perferendis omnis cumque culpa beatae.</div>
<div>Perspiciatis numquam consequuntur fuga tenetur perferendis aperiam asperiores dolorem dolorum consequatur repudiandae, voluptate explicabo, tempora eaque, omnis maxime blanditiis fugiat molestias quam est consectetur illum officiis voluptatibus quo.
Veritatis, sint!</div>
<div>Dolores asperiores, fugiat ipsa ratione provident soluta. Ratione quibusdam earum maiores deleniti explicabo praesentium nemo itaque, laboriosam laborum vel quo quam ad pariatur eos atque nam! Obcaecati aliquam praesentium repellat.</div>
<div>Corporis iusto provident voluptatem sed voluptates, perferendis praesentium quo non nostrum ipsum sit, adipisci odit odio esse ducimus illo, qui in dolorum. Assumenda possimus consequuntur iure, vitae natus, ab adipisci?</div>
<div>Pariatur, nobis, nostrum ducimus quaerat officia maxime vel nisi illum aspernatur ab voluptatibus rerum at adipisci distinctio, deleniti facere quo fugit? Ipsum ut quod sunt sit voluptatem at, cumque quasi?</div>
<div>Nulla perspiciatis obcaecati necessitatibus dignissimos minus eligendi quae illum magnam quo inventore vero minima, distinctio accusantium aliquam, quam fugiat maiores. Voluptate fugit, excepturi doloribus tempora aperiam esse reiciendis, autem ab?</div>
<div>Error vitae dicta quis et cumque esse, voluptatibus doloremque incidunt ad quam rem quos numquam impedit. Iste enim eius, nesciunt laudantium deleniti amet commodi possimus aperiam et impedit, aliquam expedita?</div>
<div>Esse labore iusto atque commodi, aliquid aut! Excepturi repellat nisi pariatur animi tenetur labore quos deleniti maiores, ratione temporibus cumque et eveniet, perspiciatis, voluptas illo dolorem cum aliquam earum autem!</div>
<div>Officia dolorem esse eos adipisci atque, laudantium neque dicta dignissimos sapiente dolorum ipsum ut magnam aspernatur rerum, minus sunt vitae eum laborum animi maiores quaerat similique illo itaque repellat? Dicta.</div>
<div>Deleniti laudantium unde nam ipsum aliquid earum odio blanditiis praesentium laborum inventore. Natus aspernatur perferendis, doloribus fugit tenetur beatae corporis unde maiores nemo dolorem sint numquam, eligendi, eius sit earum?</div>
<div>Repellendus fugit molestias voluptatum, earum odit numquam alias, nemo debitis sequi nisi velit, esse veniam ea praesentium quas. Facilis consequuntur beatae aut, repellat laudantium molestias maxime dolor vitae ut cum.</div>
<div>Neque cumque possimus odit porro architecto vero ex, nihil repellat, mollitia suscipit nam nisi atque pariatur, eos voluptates. Sed reiciendis hic assumenda doloremque fuga, rem eos itaque voluptatum ea atque.</div>
<div>Dolorem inventore porro magni quis, incidunt ex enim beatae, repudiandae perspiciatis omnis maxime id harum voluptas minima excepturi vel nostrum labore aperiam rem, nemo praesentium. Dolore unde beatae aliquid tempora!</div>
<div>Non, tempora accusamus sit. Est iste necessitatibus fugit rerum, nobis. Aperiam vero ullam delectus a, nobis impedit sequi. Ipsum non sequi perferendis labore repudiandae quisquam quidem iure, fugiat corrupti! Adipisci.</div>
<div>Laboriosam vel atque quaerat facere doloribus saepe accusantium cum eligendi facilis, aperiam voluptatum, corrupti ipsam quam omnis molestias illum magni quis. Quidem porro mollitia maiores provident fugiat sunt eos quas?</div>
<div>Deserunt numquam, dolore quidem. Odit dolorem laboriosam deleniti maiores. Fuga reiciendis quis maxime eius aliquam, itaque impedit asperiores voluptas odit! Praesentium, blanditiis. Dignissimos harum, necessitatibus, illum molestiae distinctio cupiditate
fugit.</div>
</main>当我滚动时，<span>Test</span>从顶部，因为我想出现底部。
但是当我滚动到页面的顶部，我想那span从底部移动到顶部像它的初始状态。
感谢您的帮助！
您需要添加一个条件，如果'$（本）.scrollTop（）=== 0'撤消jQuery的动画。 –
@JamesDonnelly那里似乎已经成为一个'else'其中涵盖。我编辑了这个问题来格式化代码，使其更清晰。 –