Topic: Hide Navbar on scroll down and show on scroll up
Hi how would I hide my navbar when scrolling down and have it appear on the up scroll?
Thank you
Bryon
Add comment
Here is my code. Thank you in advance for your help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Private Estate</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header>
<!--Navbar-->
<nav class="navbar navbar-toggleable-md navbar-dark bg-primary">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
Navbar
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
Home <span class="sr-only">(current)</span>
<li class="nav-item">
Features
<li class="nav-item">
Pricing
<li class="nav-item dropdown btn-group">
Dropdown
<div class="dropdown-menu dropdown" aria-labelledby="dropdownMenu1">
Action
Another action
Something else here
</div>
<form class="form-inline waves-effect waves-light">
<input class="form-control" type="text" placeholder="Search">
</form>
</div>
</div>
</nav>
</header>
<main>
<div class="container" style="margin-top:50px;">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio. Ab blanditiis voluptates id tempora aliquid ipsam quidem animi, odio mollitia, dignissimos cupiditate iste, reprehenderit architecto culpa tempore doloremque, itaque.</div>
<div>Repellendus cupiditate distinctio ex adipisci doloribus quidem ad nihil vitae necessitatibus quasi harum excepturi, repellat a molestias incidunt maiores accusantium quaerat veritatis inventore numquam impedit? Alias, facilis culpa in necessitatibus.</div>
<div>Maiores dignissimos, sit molestiae distinctio aperiam fugit adipisci dolorum sed ut, modi assumenda repudiandae placeat aliquid pariatur? In eum quis quidem facere sequi quod sapiente, architecto veritatis. Aut, reiciendis, fugiat.</div>
<div>Maiores at optio eveniet possimus voluptatibus ex quis dolorum repellat quos impedit eum natus voluptas sint dignissimos, sapiente deserunt aperiam iusto. Aperiam dignissimos quidem eum nobis dolores dolore consequatur, voluptas.</div>
<div>Sequi, et! Laborum corporis provident eius illo est ratione ut suscipit, repellat veniam sapiente asperiores minima amet dolore soluta libero at facere eos! Odio obcaecati rem culpa quos odit, magnam?</div>
<div>Repudiandae corporis aliquid, pariatur a laboriosam culpa eum omnis itaque ea accusamus voluptates autem iure laudantium sed alias labore delectus ratione nemo aspernatur in nulla. At illum esse cupiditate eum?</div>
<div>Iure voluptatum nulla voluptates consectetur modi rem dignissimos minus. Magnam animi amet inventore nesciunt iste ipsam officia fugiat, cumque consectetur voluptatum molestiae voluptatibus eligendi aspernatur suscipit illo nobis ratione sequi.</div>
<div>Neque laudantium placeat odit suscipit dolor recusandae consectetur sequi, nisi sint doloremque quis in at, maxime ratione minus aspernatur. Esse quae molestias, dolor a perferendis rerum temporibus dolores deleniti sit!</div>
<div>Incidunt eveniet magnam hic blanditiis quasi, est, illum ab mollitia explicabo, laboriosam facilis quas necessitatibus sit? Aliquid vitae fugiat quo nesciunt tempore, laborum ducimus at, rem tenetur amet alias saepe.</div>
<div>Assumenda quam iste ad blanditiis, autem illum debitis soluta, id facere nemo est, quia totam explicabo tempore adipisci vel veniam praesentium laboriosam voluptatum ab non maxime eos. In, repellat, rem.</div>
<div>Eos rerum molestias praesentium cupiditate commodi officia quia, assumenda perferendis et, voluptas obcaecati quidem expedita consectetur explicabo facilis nam quaerat, aliquid in accusamus reiciendis consequuntur repudiandae ex similique debitis. Inventore.</div>
<div>Asperiores debitis laudantium similique consequuntur suscipit est esse eaque quas sit vitae iure id facere excepturi officiis voluptate, expedita ullam reiciendis consectetur, corrupti optio! Voluptatem quos autem distinctio voluptatibus magni.</div>
<div>Excepturi ut aspernatur, eos ipsum perspiciatis, nisi officia id sint quam! Ab ipsum nam laboriosam magnam ipsam, obcaecati eligendi pariatur culpa officiis sed libero praesentium nemo tempora soluta. Nihil, illum?</div>
<div>Doloremque ex, harum optio quam blanditiis cum reprehenderit illo quaerat enim dolore iusto tenetur non beatae, molestias eius corrupti vitae reiciendis sapiente. Cupiditate adipisci, voluptates. Ab earum, id reprehenderit voluptas.</div>
<div>Porro consequatur culpa nostrum doloribus itaque est modi at. Veritatis deserunt aliquid mollitia ut optio blanditiis, dolores deleniti officiis assumenda placeat ad ab nobis alias rerum obcaecati cumque exercitationem architecto!</div>
<div>Animi aliquam illum rem neque eligendi numquam, magni enim. Debitis voluptatem, inventore dicta amet accusamus incidunt harum itaque laudantium eum, non officia est impedit ullam labore, doloribus tempore quisquam voluptates.</div>
<div>Rem vitae doloremque quis quo necessitatibus, fugit nihil obcaecati quisquam porro, ratione dolor, incidunt temporibus fuga ea! Accusantium ipsa voluptates perspiciatis tempora, esse quidem delectus quibusdam voluptatem quaerat aspernatur voluptas.</div>
<div>Deserunt quas, iure minima dignissimos earum eum dolorem provident fuga illo officia quam perspiciatis illum nihil qui, reiciendis cum numquam! Facere necessitatibus debitis cumque praesentium sunt error id aut at!</div>
<div>Rerum, expedita. Laborum consectetur magnam id illum tempora nemo error cupiditate tenetur fuga maiores enim ratione modi, deserunt suscipit praesentium hic consequuntur autem non laboriosam placeat assumenda quod esse eum.</div>
<div>Ab quas ipsam vel. Recusandae quia suscipit aperiam dolores perspiciatis asperiores qui et, ipsa, blanditiis unde nisi quis consequatur minus quidem laudantium odit odio. Voluptatibus cupiditate, temporibus reprehenderit modi adipisci.</div>
<div>Ut nesciunt qui, ex incidunt delectus modi officia quisquam! Velit dolorum pariatur fugiat voluptatem, itaque eius fugit libero amet a, repellat exercitationem aspernatur facilis commodi aperiam. Explicabo quidem sed velit.</div>
<div>Earum molestiae consectetur, nam blanditiis aut, laborum possimus maxime, quaerat molestias accusantium beatae fuga. Sit unde numquam voluptatibus blanditiis, sed tenetur quo vitae eius, quae excepturi soluta repellat nulla libero.</div>
<div>Quibusdam culpa nemo, in, beatae deleniti quasi esse voluptas iusto est error nostrum sit voluptatibus facilis fugiat optio, eaque perferendis ab recusandae! Aperiam tempore magnam eos nobis corporis expedita ad.</div>
<div>Nemo saepe voluptates doloremque! Sed facere sunt, repellat autem odio doloremque laudantium aperiam sit et, nihil architecto, tempora suscipit temporibus officia! Cupiditate error ipsum laborum, eos dolorem culpa nemo repellat.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed consequuntur assumenda quam est voluptas, nisi eligendi iure, nemo magnam quibusdam ipsa dolores, impedit neque vitae quia blanditiis, asperiores soluta. Dignissimos.</div>
<div>Eius voluptatibus, quos assumenda at, quo autem libero soluta fugiat vero, asperiores repudiandae. Magnam placeat veritatis ex molestiae esse numquam quos exercitationem hic ipsum obcaecati nobis, odit nam culpa fugit.</div>
<div>Sapiente, itaque aliquid laudantium voluptates, id, quia quos minus veniam hic, alias eveniet officiis nemo at similique nam eum excepturi provident reprehenderit. Perferendis dignissimos praesentium sunt officia rem aperiam quam.</div>
<div>Ducimus hic similique, neque. At optio consequuntur beatae quas facere delectus reiciendis incidunt iusto tempore, sit magni. Possimus ex blanditiis fuga laudantium nihil porro ipsa totam illo qui, accusamus nam.</div>
<div>Natus est quae iste deserunt nemo ipsa atque deleniti illo cumque distinctio, reiciendis provident enim non optio nostrum nulla labore cupiditate, culpa a? Magnam adipisci ipsum eius, placeat, rem nobis!</div>
<div>Possimus quisquam minima cumque sed numquam, molestiae nobis excepturi cupiditate commodi beatae ab perferendis nostrum amet quis, suscipit rerum aperiam quas ducimus dolorem totam, reiciendis quo vero voluptatibus non! Vitae.</div>
<div>Quod ipsa autem inventore iste et maiores doloremque sunt odit unde ratione repellendus suscipit minus architecto sed deleniti dolores tenetur quae sequi laborum, repellat pariatur eos, dolore labore. Autem, odit!</div>
<div>Hic error laborum, aperiam. Laudantium rem tempore explicabo, adipisci voluptas. Fugiat, officia! Ad laborum neque, officiis consequuntur fuga quos, tempore quisquam similique quibusdam dignissimos modi inventore architecto vero magnam aliquid.</div>
<div>Ab reprehenderit explicabo voluptates corrupti neque, distinctio id dignissimos quam a. Aliquam nemo aliquid reprehenderit cupiditate deserunt nam amet mollitia illo. Quaerat eos aperiam excepturi quia amet voluptate, inventore quod.</div>
<div>Eos quod accusantium ea asperiores sapiente voluptatem voluptatum accusamus! Mollitia aliquid sit, laboriosam dolorem, neque odio nam perferendis. Neque tenetur blanditiis accusantium, maiores optio atque. Quibusdam commodi unde minima incidunt?</div>
<div>Sunt eius, ratione maxime suscipit quidem ea aliquid beatae, laudantium dolores a commodi nobis, sint omnis maiores deleniti! Voluptate mollitia, iusto non neque ullam officia deleniti eaque. Commodi, quis, nihil.</div>
<div>Quae sapiente pariatur dignissimos. Qui, sed ut magni corporis dolores saepe? Fugiat harum, veritatis cupiditate beatae tenetur. Beatae nulla, tenetur obcaecati, voluptate dolore, nihil, eos inventore veritatis culpa officia in?</div>
<div>Consequuntur saepe vitae assumenda quaerat sed suscipit, laudantium nemo magnam eum voluptatibus totam repudiandae praesentium fugiat possimus aliquid odio! Hic dolor voluptatem quibusdam maxime tempore libero excepturi ipsum veniam voluptatibus?</div>
<div>Aspernatur amet porro, consectetur perferendis in placeat autem debitis et facilis a sit, at sequi, quibusdam expedita dolore commodi quam ad quisquam nisi. Totam incidunt rerum, sint deserunt omnis magni.</div>
<div>Rem magni facere aspernatur magnam reprehenderit quam incidunt, vero vitae ullam natus. Fugit perferendis ad neque id amet, repellat et veritatis laudantium ratione, error, perspiciatis eius expedita officiis earum iure!</div>
<div>Nostrum reiciendis porro animi ullam at, sint, modi eius, voluptas suscipit odit magni necessitatibus? Sapiente dicta, distinctio libero molestias quibusdam neque. Tenetur laborum dolor alias odio, consectetur praesentium nulla, culpa?</div>
<div>Non pariatur earum quisquam alias suscipit aspernatur unde eveniet id, veniam dolorum tenetur eligendi, doloribus tempore optio fuga laborum atque officiis, dolor architecto est illum, ipsa accusamus aliquam dolores. Exercitationem.</div>
<div>Quos distinctio fuga inventore pariatur dolorum. Blanditiis vitae obcaecati recusandae. Consequatur laboriosam fugiat debitis deleniti laborum ab quis rerum aut accusantium deserunt temporibus, sint, officiis voluptate molestias delectus cupiditate incidunt!</div>
<div>Recusandae pariatur cum mollitia autem at repudiandae accusamus unde ipsa quasi maxime nemo praesentium quam officia quidem esse enim itaque tempora omnis, quis! Molestiae quia quos tempore eos, modi doloribus!</div>
<div>Facere animi quasi laborum, itaque nemo magnam eum, porro ex repudiandae, doloremque incidunt illo id ipsum assumenda? Nulla sint, animi est. Dicta temporibus cumque tempora sint necessitatibus aspernatur repellendus laboriosam.</div>
<div>Voluptatem at esse impedit nihil assumenda fugit aperiam, officia quia blanditiis tempore, excepturi inventore culpa quisquam magni commodi? Mollitia nisi ut id soluta incidunt nihil provident quasi porro hic pariatur.</div>
<div>Omnis rem hic blanditiis odit sed ad id nemo, eligendi vel, dolor voluptas tempora, ut architecto eos harum inventore in recusandae vitae debitis. Facere magnam, excepturi assumenda. Eligendi, culpa quae.</div>
<div>Perferendis asperiores unde voluptates natus nemo quasi placeat quibusdam, aspernatur corrupti quaerat. Sunt, suscipit sit esse, totam accusantium atque! Dolores culpa laboriosam est natus quibusdam, cupiditate quasi omnis nostrum sit.</div>
<div>Unde quaerat maxime, sint impedit natus ipsa voluptates non temporibus quos culpa laudantium blanditiis quisquam odio ut, aliquid eos quia consequatur nemo praesentium at? Earum, distinctio, perspiciatis. Enim placeat, quasi.</div>
<div>Non dolorem recusandae ea tempora, assumenda, temporibus consequuntur minima, hic quidem iure iusto enim accusantium cumque! Eveniet enim a voluptate mollitia, voluptatem dicta atque assumenda omnis nemo odit consectetur facilis.</div>
<div>Laborum eum ea, debitis tempore soluta unde facere eveniet non nobis. Dolor praesentium odit, illum quisquam debitis ipsa magni exercitationem consequatur facere id natus, illo tempora voluptatibus ut? Doloribus, dolores.</div>
<div>Ea ut earum cupiditate, cum quam facere facilis repudiandae fugiat commodi, omnis. Nostrum dolorem eius officiis dolorum minus provident, sed, sequi quos. Laborum voluptatibus aperiam, voluptas magnam natus esse delectus.</div>
<div>Atque error ratione quod tempore amet molestiae obcaecati nihil voluptatibus hic incidunt architecto magni nam perspiciatis officiis laudantium, sit placeat porro corrupti deleniti et consequuntur accusamus nisi unde aliquam fugiat.</div>
<div>Distinctio nulla sequi perspiciatis accusamus eligendi, porro voluptate dolores, non eos a perferendis tempore facere necessitatibus. Exercitationem eos quia harum ipsam fuga suscipit assumenda nulla maxime? Ipsa eius, suscipit. Ea.</div>
<div>Neque consectetur similique, at quis ipsa porro expedita, totam quae rem tenetur aperiam esse consequuntur nulla repudiandae a quo necessitatibus voluptates! Inventore debitis dolore mollitia voluptas itaque temporibus, et delectus.</div>
<div>Quisquam suscipit, iste. Adipisci ut iusto nesciunt sit repellat ipsa repudiandae dolores similique ad illum beatae saepe exercitationem repellendus, est provident cum totam temporibus, nulla vel doloribus! Quidem, dicta, voluptate.</div>
<div>Sint veniam repudiandae reprehenderit quaerat, facere recusandae quae officiis amet incidunt? Eum sapiente et earum officia asperiores accusantium repudiandae, molestias dolorem veritatis, perspiciatis quod quos veniam nemo minus, ipsum ea.</div>
</div>
</main>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
if( !window.jQuery ) document.write('<script src="js/jquery-3.0.0.min.js"></script>');
</script>
<script src="js/navMain.js"></script> <!-- Resource jQuery -->
</body>
</html>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags