jquery navigation color and height change on scroll

Question

I'm looking to change the navigation from transparent to a color on scroll. Much like this site. http://createone.com/contact-us/ I've seen posts about changing size which is great, I'll use this as well but would like to mainly go from transparent to a color. Any help would be great. I do have a little experience with jquery but haven't been able to figure it out or modify someone else's previous questions to my needs.

I saw this but wasn't able to get it to work for me. jquery change opacity and height on scroll

A jsfiddle demo would be great!

Thanks in advance for the help. Also I'm using Bootstrap 4 so if there's any plugins out there. I'm open to that as well.

Answer 1

Hi you can check this to begin : http://jsfiddle.net/rcAev/177/

Here i made this function:

$(document).ready (function () {
 $(window).scroll (function () {
    var sT = $(this).scrollTop();
        if (sT >= 300) {
            $('.overlay').addClass('cambio')
        }else {
            $('.overlay').removeClass('cambio')
        }
  })
})

I'll explain you step by step:

• First this executes the function every time you scroll the window

$(window).scroll (function ()

• Second read the value from the top of the scroll to know how much you advance

var sT = $(this).scrollTop();

• Third compare to the breakpoint you want , in this case i choose 300 because i want to change the nav after pass the height form the image.

  if (sT >= 300) {
          /*action you want after the 300 or more scroll*/
      }else {
          /*action you want before the 300 scroll*/
      }
  

• Fourth to change the transparent to color the action i apply is add a class with new background and different height:

  $('.overlay').addClass('cambio')
  

Answer 2

In this site, the navigation height is not actually changing. It's fixed positioning. The navigation is positioned relative to the browser window.

jsfiddle

HTML:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>
<div id="first"></div><div id="second"></div><div id="third"></div>

CSS:

ul.nav{
    position:fixed;
}
div#first{
    height:600px;
    width:100%;
    background:#59071D;
}
div#second{
    height:600px;
    width:100%;
    background:#735448;
}
div#third{
    height:600px;
    width:100%;
    background:#F2DDB6;
}