Navbar changing from transparent to black on scroll / resize - load?

Question

So I have a JS that allows me to get my navbar to change from transparent at the top of the screen, to black once you start scrolling. However, with this script my page loads (on refresh for ex) and the bar starts off black and slowly fades to transparent. How can I edit this code so that on load (AT THE TOP) the bar is always transparent. And only on scroll or resize it changes.

**Please don't point out that I have "load" in the JS.. without this it starts off black until i scroll down then back up to the top.

function checkScroll() {
  var startY = $('.navbar').height() * 1; //The point where the navbar changes in px

  if ($(window).scrollTop() > startY) {
    $('.navbar').addClass("navbar-inverse");
  } else {
    $('.navbar').removeClass("navbar-inverse");
  }
}

if ($('.navbar').length > 0) {
  $(window).on("scroll load resize", function() {
    checkScroll();
  });
}

body {
  height: 1000px;
}

.btn-gs {
  background: blue;
  border: 2px solid blue;
  padding: 5px 23px !important;
  border-radius: 25px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 25px;
  color: #fff !important;
  text-transform: uppercase;
  &.btn-gs-lg {
    padding: 10px 33px !important;
    .transition(background-color ease .3s);
    &: hover {
      background-color: transparent;
    }
  }
  &.btn-gs-lg-alt {
    padding: 10px 33px !important;
    .transition(background-color ease .3s);
    &: hover {
      background-color: lighten(blue, 10%);
    }
  }
}
.navbar.navbar-inverse {
  background: transparent;
  transition: all .5s linear;
  border: none !important;
}
.navbar.navbar-inverse.scrolled {
  background: black;
}
.navbar-alt {
  height: 80px;
}
.navbar-brand-alt {
  padding: 0;
}
.navbar-signup {
  margin-top: 3px;
  margin-left: 10px;
}
.navbar-right-alt {
  position: static !important;
  padding-top: 20px !important;
  a {
    color: #fff !important;
    font-size: 16px !important;
    text-transform: uppercase;
    &: hover {
      color: darken(blue, 10%) !important;
    }
  }
}

TIA.

Deep · Accepted Answer

The issue is class navbar-inverse in your div.

bootstarp applies blackbackground color on the element where this class is used.

you should remove this class from html and use the below code in script.

Hope this helps.

 if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse");} else {
$('.navbar').removeClass("navbar-inverse");}

updated snippet

function checkScroll() {
    var startY = $('.navbar').height() * 1; //The point where the navbar changes in px

    if ($(window).scrollTop() > startY) 
    {
       $(".navbar").fadeIn(1, function() {
         $(this).css({opacity: 1.0}); 
         $(this).addClass("navbar-inverse")
       });
    }
    else 
    {
      $(".navbar").fadeIn(1000, function() {
        if($(window).scrollTop() <= startY)
        {
        $(this).fadeOut(1000, function()
          {
           $(this).css({opacity: 1.0});            $(this).removeClass("navbar-inverse")
        });
        }

       });
    }
}

if ($('.navbar').length > 0) {
    $(window).on("scroll load resize", function () {
        checkScroll();
    });
}

body {
  height:1000px;
    }

.btn-gs {
    background: blue;
    border: 2px solid blue;
    padding: 5px 23px !important;
    border-radius: 25px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 25px;
    color: #fff !important;
    text-transform: uppercase;

}


.navbar-alt {
    height: 80px;
}

.navbar-brand-alt {
    padding: 0;
}

.navbar-signup {
    margin-top: 3px;
    margin-left: 10px;
}

.navbar-right-alt {
    position: static !important;
    padding-top: 20px !important;

    a {
        color: #fff !important;
        font-size: 16px !important;
        text-transform: uppercase;

        &:hover {
            color: darken(@blue,10%) !important;
        }
    }
}

.navbar.navbar-inverse {
    background: transparent;
    transition: all .5s linear;
    border: none !important;
}

.navbar.navbar-inverse.scrolled {
    background: black;
}



	
		
		
		
		Title Page
		
		
      	
	
      
        
            
                    
                        
                    
            
            
            
                
                    
                        
                            
                            Free Trial
                        
                    
                
                
                    
                        Home
                    
                    
                        Features
                    
                    
                        FAQ
                    
                    
                        Pricing
                    
                
            
        
    

    
        
            
                LOREM IPSUM
                LOREM IPSUM DOLOR SIT AMET. LOREM IPSUM DOLOR SIT AMET.
                

                
                    
                    Free Trial

Navbar changing from transparent to black on scroll / resize - load?

Answers (1)

Related Questions