3

Hi I am new to web development. I have a problem with navbar in bootstrap 4 beta while changing the color. How can I change the color of a fixed navigation bar while scrolling in bootstrap 4 beta. And please consider any tutorial about this.

KalyanLahkar
  • 835
  • 8
  • 21
Dev_Nav
  • 33
  • 4

2 Answers2

2

i given some idea,just this is an example,

$(document).ready(function(){
  $(window).scroll(function(){
   var scroll = $(window).scrollTop();
   if (scroll > 300) {
     $(".black").css("background" , "blue");
   }

   else{
    $(".black").css("background" , "#333");   
   }
  })
})
body{
  margin:0;
  padding:0;
  height:1000px;
}
.black{
  position:fixed;
  top:0;
  background:#333;
  width:100%;
  height:50px;
  
}
.black ul{
  list-style-type:none;
  padding:0;
}

.black ul li{
  display:inline-block;
  width:100px;
  color:red;
}

.blue{
  position:fixed;
  top:0;
  background:blue;
  width:100%;
  height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="black">
  <ul>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    <li>link</li>
  </ul>
</div>
core114
  • 5,155
  • 16
  • 92
  • 189
0

I am not sure what problem exactly you are facing but I am attaching one click which will give you idea about change navbar color on scroll by using Scroll event

https://jsfiddle.net/we9L9h2r/

Nishant Dixit
  • 5,388
  • 5
  • 17
  • 29
  • its not working on bootstrap 4 beta because they change the class navbar-fixed-top to fixed-top. – Dev_Nav Oct 07 '17 at 10:57
  • You can do I thing if I am not wrong you can fetch which class is active current when user scroll then toggle that class with different color class – Nishant Dixit Oct 07 '17 at 11:13
  • it works only on the links not the navbar.but now i used jquery to change the color of navbar on scroll and it works. – Dev_Nav Oct 08 '17 at 09:58