becca becca - 4 months ago 41
HTML Question

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

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

<!DOCTYPE html>
<html lang="">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title Page</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
<div class="navbar navbar-inverse navbar-alt navbar-fixed-top scrolled">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand navbar-brand-alt">
<img src="#" />
</a>
</div>
<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#o-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
<ul class="nav navbar-nav navbar-right navbar-signup">
<li>
<a href="#" class="btn-gs">
<i class="fa fa-paper-plane-o"></i>
Free Trial
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-right-alt">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#features">Features</a>
</li>
<li>
<a href="#faq">FAQ</a>
</li>
<li>
<a href="#pricing">Pricing</a>
</li>
</ul>
</div>
</div>
</div>

</html>





TIA.

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;
}
<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title Page</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      	</head>
	<body>
      <div class="navbar  navbar-alt navbar-fixed-top scrolled">
        <div class="container">
            <div class="navbar-header">
                    <a href="#" class="navbar-brand navbar-brand-alt">
                        
                    </a>
            </div>
            <button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#my-navbar-collapse" aria-expanded="false">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-collapse collapse" id="my-navbar-collapse" aria-expanded="false" style="height:1px;">
                <ul class="nav navbar-nav navbar-right navbar-signup">
                    <li>
                        <a href="#" class="btn-gs">
                            <i class="fa fa-paper-plane-o"></i>
                            Free Trial
                        </a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right navbar-right-alt">
                    <li>
                        <a href="#home">Home</a>
                    </li>
                    <li>
                        <a href="#features">Features</a>
                    </li>
                    <li>
                        <a href="#faq">FAQ</a>
                    </li>
                    <li>
                        <a href="#pricing">Pricing</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
<section class="page-section page-section-xlg bs-bg" id="home">
    <div class="container">
        <div class="row wrap wrap-alt">
            <div class="col-md-offset-6 col-md-6">
                <h1 class="text-white heading-responsive largest">LOREM IPSUM</h1>
                <h4 class="subheading subheading-md subheading-md-white thin">LOREM IPSUM DOLOR SIT AMET. LOREM IPSUM DOLOR SIT AMET.</h4>
                <br />
                <a href="#" class="btn-gs btn-gs-lg text-normalize">
                    <i class="fa fa-paper-plane-o"></i>
                    Free Trial
                </a>
            </div>
        </div>
    </div>
</section>

		<script src="http://code.jquery.com/jquery.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	</body>
</html>