Javascript for fixed position to scroll

Question

I have this div, which is just a title.

<div class="container-fluid DFOCpadding"> <div class="row"> <div class="col-lg-12"> <div class=" text-center "> <span class="toptext">DANCE FOR OVARIAN CANCER</span> </div> </div> </div> 

and the navigation bar below it, which I would like to set as fixed

 <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle glyphicon glyphicon-chevron-down" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Dance Dance</span> </button> </div> <div class="collapse navbar-collapse" id="navbar"> <ul class="nav navbar-nav"> <li><a href="http://danceforovariancancer.com.au">HOME</a></li> <li><a class="scroll" href="#register"><span class="register">REGISTER</span></a></li> <li><a class="scroll" href="#faq">FAQ's</a></li> <li><a class="scroll" href="#acts">ACTS</a></li> <li><a class="scroll" href="#about">ABOUT</a></li> <li><a class="scroll" href="#contact">CONTACT</a></li> </ul> </div> </div> </nav> 

and I need a page to just intercept the navigation bar when you scroll it, like on this site: https://ovariancancer.net.au/

I saw the answers for this, but they are very limited to the case of using the OP, so I can not get it to work on my page.

amuses

Answer 1

Her code is similar to https://ovariancancer.net.au/ '

hope this helps

 $(window).scroll(function() { if ($(window).scrollTop() > 100) { $(".navbar").css({ 'position': 'fixed', 'top': '0px', 'width': '100%', 'background': '#cfcfcf', 'z-index': '99' }); } else { $(".navbar").css({ 'position': 'relative', 'background': '#FFFFFF', 'width': '100%' }) } }); 

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-fluid DFOCpadding"> <div class="row"> <div class="col-lg-12"> <div class=" text-center "> <span class="toptext">DANCE FOR OVARIAN CANCER</span> </div> </div> </div> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle glyphicon glyphicon-chevron-down" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Dance Dance</span> </button> </div> <div class="collapse navbar-collapse" id="navbar"> <ul class="nav navbar-nav"> <li><a href="http://danceforovariancancer.com.au">HOME</a> </li> <li><a class="scroll" href="#register"><span class="register">REGISTER</span></a> </li> <li><a class="scroll" href="#faq">FAQ's</a> </li> <li><a class="scroll" href="#acts">ACTS</a> </li> <li><a class="scroll" href="#about">ABOUT</a> </li> <li><a class="scroll" href="#contact">CONTACT</a> </li> </ul> </div> </div> </nav> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> <P>&nbsp;</p> 

Answer 2

Try the following:

 .navbarfixed { position: fixed; } $(function() { var nav = $(".navbar"); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 500) { nav.addClass("navbarfixed"); } else { nav.removeClass("navbarfixed"); } }); });