Topic: Hide Navbar on scroll down and show on scroll up

Bryon Swanson pro asked 5 years ago


Hi how would I hide my navbar when scrolling down and have it appear on the up scroll? Thank you Bryon

Bryon Swanson pro answered 5 years ago


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>

Hi, Bryon! Please share your code with us

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags