Bootstrap 3 fix after scroll collapse - html

Question

I am facing an issue with Bootstrap 3. I have a single page navigation with sections and a fix after scroll navbar. As it scrolls the navbar gets fixed and changes background color. However when it comes to small screens the navbar isnt collapsing and it doesnt remain fixed.
This is part of the html.
<div class="navigate clearfix">
<div class="inner">
<h3 class="navigate-brand">Brand</h3>
<nav class="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="menu">
<ul class="nav navigate-nav menu-right" >
<li class="active">Home</li>
<li>s1</li>
<li>S2</li>
<li>s3</li>
<li>s4</li>
</ul>
</div>
</nav>
</div>
</div>
The js with the background change:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > $(window).height()){
$(".navigate").css({"background-color" : "red"});
}else{
$(".navigate").css({"background-color":"transparent","background":"transparent"});
}
})
})

Answer 1

You may want to follow the instructions in: https://getbootstrap.com/components/#navbar
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Based on the above, I have prepared a fiddle for you where navbar remains fixed at any given width of screen: http://jsfiddle.net/dmv73fzr/
Hope it helps you!