Хочу по скроллу внизу зафиксировать хедер, при обратном скролле, ставить хедер на место.
<header>
<h1>header</h1>
</header>
<div class="wrap">
<ul id="ul">
li*5>a
</ul>
</div>
<footer>
<h4>Footer</h4>
</footer>
Вот так реализовал
$(function() {
$(window).on('scroll',function(){
var $scrollTop = $(window).scrollTop(),
$endzone = $('ul').position().top,
$header = $('header');
if ($endzone < $scrollTop) {
$header.hide().fadeIn(500);
$header.css({'position' : 'fixed'});
} else {
$header.css({'position' : 'unset'});
}
});
});
Проблема. Как избавиться от повторения hide() при скролле? Предполагаю, возможно, флагом, но кажется, что можно как-то более красиво)
Как по мне, и с флагом красиво смотрится.
$(document).ready(function() {
var $showHeader = false;
$(window).on('scroll',function(){
var $scrollTop = $(window).scrollTop(),
$endzone = $('ul').position().top,
$header = $('header');
if ($endzone < $scrollTop) {
if ($showHeader === false) {
$header.hide().fadeIn(500);
}
$header.css({'position' : 'fixed'});
$showHeader = true;
} else {
$header.css({'position' : 'unset'});
$showHeader = false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h1>header</h1>
</header>
<div class="wrap">
<ul id="ul">
li*5>a
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta distinctio, error eum fugiat harum inventore libero nesciunt officia possimus quibusdam recusandae, sit vel voluptate! Aut consequatur eius id, in magni neque obcaecati porro quisquam? Consectetur cupiditate harum iure modi molestias perferendis voluptatem voluptatibus? Accusantium adipisci cumque deleniti deserunt ex fugit id incidunt inventore ipsam iure laborum laudantium magni minima nobis odio, optio provident quia quibusdam quod saepe, sapiente tempora totam, vel. Accusamus dolor fugiat incidunt ipsam laborum mollitia nostrum quia unde. Amet corporis, cum distinctio facere fugiat, ipsa iure, magnam nihil nulla omnis perferendis quibusdam reprehenderit sunt tempora voluptatem? Doloremque enim modi natus nihil, sapiente soluta velit. Accusantium ad alias aperiam dicta facere molestias, mollitia neque perferendis quaerat repudiandae similique sunt temporibus veritatis! Amet eius magnam mollitia nesciunt porro quaerat sequi voluptatum! A alias aliquam architecto aut blanditiis consequatur deleniti doloremque dolores doloribus eveniet exercitationem illo illum inventore ipsam ipsum iusto labore laborum, magni maiores modi molestias mollitia nemo nesciunt omnis optio pariatur quia quibusdam quod, recusandae repellat sapiente, similique sit sunt totam ullam voluptas voluptatibus. Atque culpa cumque cupiditate eaque eius harum illo illum inventore ipsam, ipsum nobis placeat quae quo rem repellendus similique suscipit voluptate? Adipisci aliquid beatae consequuntur, corporis deleniti deserunt dignissimos dolor earum expedita facilis, illum, ipsum iste itaque labore libero maxime molestias mollitia necessitatibus nihil nobis nostrum possimus provident reiciendis rem repellendus repudiandae rerum sit unde voluptate voluptates. Accusantium aperiam autem deleniti enim ex fugit nemo sequi voluptatibus! Aperiam consectetur cumque, delectus dolor eos eum hic impedit ipsa nulla pariatur, quae quam quidem quis repellendus reprehenderit tempora veritatis. Ab alias assumenda commodi distinctio dolores hic illum iusto, laborum modi necessitatibus nihil nulla placeat quaerat quod, sit totam ullam vitae voluptatum? Asperiores aut dolore ducimus esse excepturi fuga, ipsa nam non quae quod reiciendis sapiente sint temporibus vel velit? Laboriosam placeat quae sequi! Aliquid amet commodi, debitis delectus dolores dolorum, explicabo harum inventore iusto labore laborum laudantium minima minus molestias necessitatibus officia quia quisquam repellat sapiente sed. A ad aliquam consequatur consequuntur debitis dolorem ea eius eligendi est facere fugiat mollitia neque officiis perspiciatis praesentium reiciendis repellat repudiandae saepe sint soluta tenetur voluptas, voluptatum. Adipisci, amet animi architecto assumenda aut deserunt dolorem hic magni molestiae tempora. Consectetur eius excepturi minima nostrum officiis praesentium ratione vel vitae voluptatum? Aliquid architecto at aut commodi cumque esse illo, iste iure molestiae placeat? Accusantium ad aliquid animi at consequatur deleniti ea eius excepturi facere iste itaque iusto laboriosam maiores nemo nostrum porro quae qui quisquam, recusandae repellat suscipit tempora tenetur unde ut, velit veritatis voluptas? Magni maiores nisi vero. Accusantium asperiores commodi consectetur cum ea eius enim, expedita itaque molestias, neque perferendis perspiciatis quam quia ratione, ullam ut vel! Ab assumenda beatae consequatur cupiditate dolor eum id magnam, magni maxime minus mollitia nesciunt quas, recusandae voluptate voluptates? Aliquam aperiam aut blanditiis cumque, debitis expedita nemo officiis quaerat voluptas voluptatibus? Ad consequatur esse itaque quod reiciendis, repudiandae saepe voluptatum! A aspernatur assumenda at atque consectetur consequatur dignissimos earum eius enim et eveniet excepturi explicabo harum illo impedit labore, laboriosam, modi molestias mollitia neque non quasi quia quibusdam quis recusandae reiciendis reprehenderit saepe sequi sunt suscipit veritatis vitae voluptas voluptate. A accusamus adipisci aperiam at autem consectetur deserunt doloribus dolorum error, est, et expedita harum incidunt ipsam, ipsum itaque iusto maxime natus nobis nostrum obcaecati perspiciatis ratione rem. Ad assumenda consequatur dicta enim error ipsam, iusto nobis nulla perferendis possimus provident soluta sunt suscipit ut vel. Accusamus cum debitis dolore dolorum ipsum itaque, minus perspiciatis sapiente sed soluta voluptate voluptatem. Asperiores aspernatur, consequuntur dolore error esse est et eveniet itaque labore molestias nam, natus nemo, nobis omnis praesentium quaerat quis vel. Ab blanditiis cupiditate distinctio dolores ducimus ea eaque ex harum illum impedit ipsum itaque laborum, magni minus, nisi numquam obcaecati optio praesentium quasi quia quidem repellendus rerum sed unde vel voluptas voluptate. Dolores dolorum, ducimus expedita facere id laborum necessitatibus nihil nobis temporibus vel? Animi est natus nesciunt officia officiis pariatur quasi quibusdam quo unde voluptatibus! Aperiam dignissimos eaque ex laboriosam minima natus necessitatibus nesciunt, possimus qui quo recusandae vel voluptas. Adipisci aliquid, commodi cupiditate delectus facilis iste nam nostrum obcaecati perspiciatis tenetur veritatis voluptates! Dicta dignissimos eum expedita explicabo fugiat neque possimus quia quis rerum. Aliquid, deserunt excepturi hic maxime obcaecati quasi reiciendis! Accusamus, adipisci ducimus eligendi error ipsam quidem! A aperiam consequatur distinctio dolorem maxime minima necessitatibus numquam odit quos, unde ut vero. Accusamus at, autem commodi consectetur culpa deleniti distinctio, dolor labore nemo quasi reiciendis, rem similique sit! Ad blanditiis corporis, dicta ea, impedit ipsa libero molestiae nostrum nulla omnis pariatur possimus quae quo rem tempore vel vero. Accusantium aliquid, architecto assumenda atque doloremque dolores ea ex fuga illo inventore ipsum iure laudantium molestias mollitia nam neque, officiis porro quam quis recusandae repellendus sunt suscipit vero vitae voluptates! Aliquam cumque dicta eum, fuga quasi quia quisquam sequi veniam! Ad distinctio sequi vel. Aspernatur, dolorum exercitationem neque nihil omnis tempora tenetur voluptas. Ad aperiam assumenda atque beatae consequatur cum deleniti deserunt dolor dolores explicabo fuga illum laborum magni minus nam necessitatibus officia porro praesentium quam quasi reiciendis suscipit tempora temporibus totam, ullam ut voluptatum. Adipisci consequatur corporis cupiditate deleniti, eius eos ex exercitationem facere impedit, ipsum laboriosam mollitia nobis officia porro praesentium provident quas quasi quia quibusdam repellat repellendus sequi sint tenetur totam velit! Beatae dolore hic laborum magni nam non voluptatem voluptatum. Consequatur dolor ducimus eius et iure maxime nostrum quisquam totam. A aliquid amet corporis doloremque eius esse eveniet fugiat fugit id inventore laborum magni minima nemo neque officiis pariatur perspiciatis porro praesentium quas quibusdam quis ratione, rem rerum saepe sed, tenetur ullam, vel vero vitae voluptatibus? Delectus dignissimos doloremque dolores error esse ex in reprehenderit? Assumenda dicta earum eius, error eum iure minima obcaecati pariatur reiciendis sapiente? A animi corporis deleniti doloribus ea expedita illum, incidunt, itaque iusto libero modi neque perspiciatis placeat quam quasi ratione recusandae repellat rerum sapiente sunt tenetur voluptatibus voluptatum. Enim eos esse expedita illo minus perspiciatis quis. At perspiciatis reprehenderit voluptates!</p>
</div>
<footer>
<h4>Footer</h4>
</footer>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Доброго времени суток, Помогите разобратьсяКак сделать что бы при открытии вкладки аккордеона,к i которая находится во вкладке добавлялся...
Читаю книгу Pro AngularНе понимаю в чем смысл записи в функции
Здравствуйте, у меня есть input type='range'С помощью js я задаю ему значения max, min, value