Navigation color and scroll jquery height change

Question

I want to change the navigation from transparent to scroll color. Very similar to this site. http://createone.com/contact-us/ I saw messages about resizing, which is great, I will use this too, but I would like to basically switch from transparent to color. Any help would be great. I have little experience with jquery, but I have not been able to figure this out or change some other previous questions for my needs.

I saw this, but could not get it to work for me. jquery change opacity and scroll height

The jsfiddle demo will be great!

Thanks in advance for your help. I also use Bootstrap 4, so if there are any plugins there. I am also open to this.

Answer 1

Hi, you can check this to get started: 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 will explain to you step by step:

• This function is executed first every time the window is scrolled.

$ (window) .scroll (function ()

• Second, read the value from the top of the scroll to see how much you are promoting.

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

• In the third comparison with the breakpoint you want, in this case I choose 300 because I want to change the navigation after going through the height of the image shape.

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

• Fourthly, to change the transparency of the color applied by me, add classwith a new background and a different height:

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

Answer 2

. . .

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;
}