I tried making it with the bootstrap affix but it didn't work for me. How can I make the sticky navigation bar using JavaScript and the scroll animation using CSS transition or JavaScript?
The data-spy="affix" data-offset-top=""630"> is from bootstrap.
<div class="topnavhome">
<nav class="navbar" data-spy="affix" data-offset-top="630">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-4 col-xs-12">
<div class="logo-wrapper">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="N logo" /></a>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div class="col-md-6 col-sm-8 col-xs-12">
<div class="social-link">
<span><i class="fa fa-phone phone" aria-hidden="true"></i> 000 000 000000</span>
<ul>
<li><a href="#" class="facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#" class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
</ul>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right ">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="supplements.html">Supplements</a></li>
<li><a href="faq.html">FAQs</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>I assume you mean the navigation bar is sticky after you scroll over the fullscreen carousel. Please correct me if I'm wrong.
To do that, you can use scroll event of the window element and check when the offset().top is higher than the screen height then only at that point, the sticky class or whatever you use to make the navbar sticky will be triggered.