We Keep Coding

Navbar fixed when scroll. With javascript

I don't code javascript so it is a problem for me to understand how to develop my navbar to look like this: http://www.bootply.com/kD5wiG5udv
I have obviously used common sense and swapped my selectors but it still isn't working. Could someone please advise me on what steps to take next?
Please use the above website to navigate through my code as I am not going to add the bootstrap files to this post. They are too large.
Benjamin
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="" src="">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li><a href="#">Projects</li>
<li><a href="#">Services</li>
<li><a href="#">About</li>
<li><a href="#">Contact</li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-default
{
background-color: #fbfbfb;
}
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
.scroll-top {
position:fixed;
bottom:0;
right:6%;
z-index:100;
background: #f2f3f2;
font-size:24px;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
color:#222;
}
.navbar-nav {
margin-left: 50px;
margin-top: -5px;
}
Javascript:
/* affix the navbar after scroll below header */
$('#nav').affix({
offset: {
top: $('header').height()-$('#nav').height()
}
});
/* highlight the top nav as scrolling occurs */
$('body').scrollspy({ target: '#nav' })
/* smooth scrolling for scroll to top */
$('.scroll-top').click(function(){
$('body,html').animate({scrollTop:0},1000);
})
/* smooth scrolling for nav sections */
$('#nav .navbar-nav li>a').click(function(){
var link = $(this).attr('href');
var posi = $(link).offset().top;
$('body,html').animate({scrollTop:posi},700);
});

In my opinion it would be great to do as much as possible in CSS if your website does not to be compatible with old versions of the browsers. I'm not sure if the Bootstrap has it's own way to implement something similar, but here you can get the idea on how you'd do this yourself.
The main role of jQuery here would be just to add a class on scroll event, which would trigger an animation of opacity. This should be much cleaner solution for the problem as it would be smooth and fast. Here is the working fiddle: https://jsfiddle.net/q5jo781c/1/
This part toggles class on scroll:
$(document).ready(function(){
$(document).scroll(function(){
var st = $(this).scrollTop();
if(st > 200) {
$("navbar").addClass('fixed');
} else {
$("navbar").removeClass('fixed');
}
});
});
And the CSS:
navbar {
width: 100%;
display: block;
height: 50px;
background-color: black;
}
navbar.fixed {
position: fixed;
top: 0;
left: 0;
background-color: white;
animation-name: example;
animation-duration: 1s;
}
#keyframes example {
from {opacity: 0;}
to {opacity: 1;}
}
You can find more of the CSS in the fiddle. Hope it helps.

.addClass when #mainNav :visible

Desired:
When menu button is clicked and navigation(#mainNav) slides in, check to see if visible. If so, .addClass .is-open to .nav-item. When navigation (#mainNav) is closed, .removeClass .is-open from .nav-item.
Issue:
Class is not being added to .nav-item when navigation is visible(Slides).
HTML
<header>
<!-- Logo and Burger -->
<div class="brand-wrap">
<div class="trigger-wrapper">
<button id="burger">
<div class="nav-trigger-line"></div>
<div class="nav-trigger-line"></div>
<div class="nav-trigger-line"></div>
</button>
</div>
</div>
<!-- End of Logo and Burger -->
<!-- Navigation -->
<nav id="mainNav" class="navbar main-nav">
<div class="nav-container">
<ul class="nav flex-column">
<li class="nav-item">
<span class="nav-number">01.</span><br>Our Company
</li>
<li class="nav-item">
<span class="nav-number">02.</span><br>Our People
</li>
<li class="nav-item">
<a href="services.html" class="nav-link">
<span class="nav-number">03.</span>
<br>Services</a>
</li>
<li class="nav-item">
<span class="nav-number">04.</span><br>Careers
</li>
<li class="nav-item">
<span class="nav-number">05.</span><br>Contact Us
</li>
</ul>
</div>
</nav>
<!-- End of Navigation -->
</header>
CSS
.brand-wrap {
position: fixed;
top: 20px;
right: 20px;
z-index: 999;
}
#burger {
float: right;
margin: 0;
}
.trigger-wrapper {
position: absolute;
right: 5px;
}
.main-nav a {
text-decoration: none;
}
.main-nav {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(35, 31, 32, 1);
}
.nav-container {
margin-top: 80px;
}
.nav-link {
color: #fff;
font-size: 1.5em;
font-weight: 800;
padding: .25em 1em;
}
.nav-link:hover {
color: #82bc00;
}
.nav-number {
font-size: .5em;
font-weight: 600;
}
.nav-trigger-line {
height: 3px;
width: 30px;
background-color: #fff;
margin: 6px auto;
}
JS
// Menu click function
$('#burger').click(function() {
$('#mainNav').toggle();
});
// Check if Nav is visible
if ($('#mainNav').is(':visible')) {
$(".nav-container .nav .nav-item").addClass("is-open");
} else {
$(".nav-container .nav .nav-item").removeClass("is-open");
}
jsfiddle: https://jsfiddle.net/WeebleWobb/auszo29m/2/

You need to send it inside the event handler:
// Menu click function
$('#burger').click(function() {
$('#mainNav').toggle(function () {
// Check if Nav is visible
if ($('#mainNav').is(':visible')) {
$(".nav-container .nav .nav-item").addClass("is-open");
} else {
$(".nav-container .nav .nav-item").removeClass("is-open");
}
});
});
The best thing you can do is, you should put it inside the callback function like above.

Transitions doesn't work

I was trying to add a search bar that extends itself on subscribe button, and I can't delay the button's display value with JQuery click event. If I use another hover function in js, it ignores click event, and transitionsdoesn't work as well.
It is my first post,so, I'm sorry if I made any mistake.
Here is my code:
HTML:
<nav class="navbar navbar-inverse affix-top container" id="navbar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="file:///C:/Users/Eren/Desktop/HTML-CSS/Project-BlackKnight/Project-BlackKnight.html?">Black Knight</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right hidden-xs">
<div class="container-2">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Search..." />
</div>
<li class="subs"><a data-toggle="modal" data-target="#subscribe" href="#"><span class="glyphicon glyphicon-user"></span> Subscribe</a></li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar { border: none; box-shadow: none; }
.navbar.affix {
position: fixed;
top: 0;
z-index:10;
}
.container-2 {
width: 200px;
vertical-align: middle;
white-space: nowrap;
position: relative;
}
.container-2 input#search {
width: 50px;
height: 50px;
background: #2b303b;
border: none;
font-size: 10pt;
float: left;
color: #262626;
padding-left: 45px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
-webkit-transition: width .70s ease;
-moz-transition: width .70s ease;
-ms-transition: width .70s ease;
-o-transition: width .70s ease;
transition: width .70s ease;
}
.container-2 input#search::-webkit-input-placeholder { color: #65737e; }
.container-2 input#search:-moz-placeholder { color: #65737e; }
.container-2 input#search::-moz-placeholder { color: #65737e; }
.container-2 input#search:-ms-input-placeholder { color: #65737e; }
.container-2 .icon {
position: absolute;
top: 50%;
margin-left: 17px;
margin-top: 17px;
z-index: 1;
color: #4f5b66;
}
.container-2 input#search:focus, .container-2 input#search:active { outline:none; width: 200px; }
.container-2:hover+.subs{ display: none; }
\#search { position: absolute; }
.subs { margin-left: 45px; transition: 5s all 5s ease; } //this is the problem
.container-2:hover input#search { width: 200px; }
.container-2:hover .icon { color: #93a2ad; }
js:
$('.navbar').affix ( {
offset: {
top: function () {
return (this.bottom = $('.top-images').height());
}
}
});
$('#search').click(
function() {
$('.subs').hide();
}
);
$(document).click(
function(e){
if (!$(e.target).is('#search')) {
setTimeout(function() {
$('.subs').show();
}, 500);
}
if (!$(e.target).is('#search')) {
$('.modal').modal(toggle)
}
if ($(e.target).is('.sub-button')) {
$('.modal').modal(toggle)
}
}
);
If you have any more effective ideas, I'm open for suggestions.
Thank you in advance!
Here is a fiddle with my code: fiddle link

You can use delay when you show/hide an element. For example, on you case, change this JQuery code:
if (!$(e.target).is('#search')) {
setTimeout(function() {
$('.subs').show();
}, 500);
}
to:
if (!$(e.target).is('#search')) {
setTimeout(function() {
$('.subs').delay(1000).fadeIn();
}, 100);
}
And remove margin in your li:
.navbar-nav>li {
margin: 0;
}
Finally, here is a fiddle: fiddle link
You can make with hover event too. I made another fiddle with hover:
hover function
Hope this is what you've been looking for!

I don't know what you want to make exactly but check thi jsfiddle
I have fixed that data-target='#subscribe' to data-target='#search'
Check it and let me know what else do you want to get

Make a navbar turn into a Hamburger push-out/slide-out menu when the screen gets too small

Welp... I'm stuck... again...
(FYI This is my first ever website that I am coding myself (not a template) so don't assume that I know anything.)
I am in the process of making my homepage more mobile / smaller screen sizes freindly. One of the biggest problems is that my navbar is too large on mobile and makes it so that in order to see the full navbar you have to scroll to the right, and this really breaks the website aesthetically. I have tried my best to implement things like flexnav into my website but I haven't been able to succeed in making it:
A. Be a Slide-Out / Push-Out menu on mobile which is triggered by a hamburger menu (which is preferably animated like style 2 in this tutorial: http://callmenick.com/post/animating-css-only-hamburger-menu-icons)
B. Have a TRANSPARENT background for both the hamburger menu and the navbar.
B1. Keep my navbar's color-scheme
C. Switch from the full nav-bar to the hamburger menu when the screen is less than 1200 px wide.
I know that I am asking a lot, but hopefully someone will be able to help me. As I am submitting my code in JSBin it would be really helpful If you could do the same (or if you prefer Codepen or JSFiddle or whatever). And I am sure that this stylish approach to a navbar which adapts to screen size would be appreciated by many people who find themselves in the same situation I do. Also, sorry for the messy code.
JSFBin: http://jsbin.com/jefosiweci/edit?html,css,js,output
Code:
<meta name="robots" content="noindex">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Lor emIp sumDo lorSita</title>
<link rel="stylesheet" href="CSS/lightbox.min.css">
<script src="https://use.typekit.net/pzl7njn.js"></script>
<link href="CSS/flexnav.css" rel="stylesheet" type="text/css" / >
</script>
<script>
try {
Typekit.load({
async: false
});
} catch (e) {}
</script>
<script src="JS/wow.min.js"></script>
<script>
new WOW().init();
</script>
<style id="jsbin-css">
/*----- Responsive Nav Start Credit - http://tinyurl.com/qepfqon -----*/
.clearfix:after {
display: block;
clear: both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width: 100%;
background: #DAE6EB;
margin: 0px auto
}
.menu {
width: 1200px;
margin: 0px;
margin-bottom: -55px;
opacity: 5;
}
.menu li {
margin: 0px;
list-style: none;
font-family: 'industry';
font-size: 18px;
}
.menu a {
transition: all linear 0.15s;
color: #98a1a4;
font-size: 18px;
}
.menu li:hover > a,
.menu li:active > a,
.menu .current-item > a {
text-decoration: none;
color: #414546;
font-size: 18px;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 18px;
}
.menu > ul > li > a {
padding: 10px 40px;
display: inline-block;
}
.menu > ul > li:hover > a,
.menu > ul > li:active > a,
.menu > ul > .current-item > a {
background: #98a1a4;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu,
.menu li:active {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
background: #98a1a4B;
text-align: left;
}
.sub-menu li {
display: block;
font-size: 18px;
}
.sub-menu li a {
padding: 10px 10px;
display: block;
font-size: 18px;
}
.sub-menu li a:hover,
.sub-menu li a:active,
.sub-menu .current-item a {
background: #98a1a4;
}
/*Jumbotron. Ignore*/
.jumbotron {
background-image: url('https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925');
background-repeat: no-repeat;
background-position: center top;
margin-top: 0px;
margin-bottom: -0px;
}
.jumbotron .container {
position: relative;
left: auto;
right: auto;
height: 100vh;
width: 100vw;
padding: 100px 0;
text-align: center;
}
.jumbotron h1 {
color: #fff;
font-size: 84px;
font-family: "industry", sans-serif;
font-style: normal;
font-weight: 900;
text-shadow: 3px 3px #000;
}
.jumbotron p {
font-size: 24px;
font-family: "industry", sans-serif;
font-style: italic;
font-weight: 1000;
color: #f7f7f7;
}
</style>
</head>
<section id="Top">
</section>
</div>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix" data-breakpoint="1200">
<li class="current-item wow fadeInDown"><i class="fa fa-home fa"></i> Lore</li>
<li class="wow fadeInDown delay05"><i class="fa fa-user fa"></i> mIpsu mD</li>
<li class="wow fadeInDown delay05"><i class="fa fa-map fa"></i> olorS</li>
<li class="wow fadeInDown delay15"><i class="fa fa-bolt fa"></i> itAmet.L</li>
<li class="wow fadeInDown delay2"><i class="fa fa-paint-brush fa"></i> or emIps</li>
<li class="wow fadeInDown delay25"><i class="fa fa-envelope fa"></i> umDolor</li>
<li class="wow fadeInDown delay3"><i class="fa fa-pencil fa"></i> Sita</li>
</ul>
</nav>
</div>
<div class="jumbotron">
<div class="container">
<h1 class="wow fadeInLeft Big">Lor emIp sumDo lorSitA</h1>
<p class="wow fadeInRight delay1">metLorem Ip sumDo lorSitAm.</p>
<div class="container">
<ul class="actions">
<li class="wow fadeInUp Big delay2"><i class="fa fa-chevron-down fa"></i></li>
</ul>
</div>
</div>
</div>

I see that you are already using Bootstrap. Bootstrap makes this very easy for you to do as they have it built in already you just need to use their structure. Below I have put in their navbar structure into your existing code. I have taken out the menu css that you had and added just a couple of lines of css to get you started. You can mess with the css and change it to your liking but it should look almost identical to the setup that you had. In this code the nav will have a class of navbar-default which I have given a background of none and a position of absolute top to keep it at the top of the page and a width of 100%. Inside of it is a navbar-header and a navbar-collapse. In the navbar-header is your menu-hamburger which bootstrap has already styled and given javascript to open at a max-width of 767px. Then the navbar-collapse is where you have your links which I have given a media query style background of transparent black. So when you get to the 767 px it will be hidden until you click on the hamburger. This is all built into Bootstraps framework making it very easy for developers to get started on their sites. I hope this helps. Here is your revised code you should be able to just copy and paste this as is:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<link rel="stylesheet" href="CSS/main.css">
<link rel="stylesheet" href="CSS/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Lor emIp sumDo lorSita</title>
<link rel="stylesheet" href="CSS/lightbox.min.css">
<script src="https://use.typekit.net/pzl7njn.js"></script>
<link href="CSS/flexnav.css" rel="stylesheet" type="text/css" / >
</script>
<script>
try {
Typekit.load({
async: false
});
} catch (e) {}
</script>
<script src="JS/wow.min.js"></script>
<script>
new WOW().init();
</script>
<style id="jsbin-css">
/*----- Responsive Nav Start Credit - http://tinyurl.com/qepfqon -----*/
.clearfix:after {
display: block;
clear: both;
}
.navbar-default {
background:none;
margin:0;
position:absolute;
top:0;
left:0;
width:100%;
border:none;
z-index:1;
}
.navbar-default .navbar-nav>li>a {
font-size:18px;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a.active{
background:#98a1a4;
color:#333;
}
#media screen and (max-width: 767px){
.navbar-collapse{background:rgba(0,0,0,0.8);}
}
/*Jumbotron. Ignore*/
.jumbotron {
background-image: url('https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&fit=crop&fm=jpg&h=1000&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925');
background-repeat: no-repeat;
background-position: center top;
margin-top: 0px;
margin-bottom: -0px;
}
.jumbotron .container {
position: relative;
left: auto;
right: auto;
height: 100vh;
width: 100vw;
padding: 100px 0;
text-align: center;
}
.jumbotron h1 {
color: #fff;
font-size: 84px;
font-family: "industry", sans-serif;
font-style: normal;
font-weight: 900;
text-shadow: 3px 3px #000;
}
.jumbotron p {
font-size: 24px;
font-family: "industry", sans-serif;
font-style: italic;
font-weight: 1000;
color: #f7f7f7;
}
</style>
</head>
<section id="Top">
</section>
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="wow fadeInDown"><a class="active" href="#"><i class="fa fa-home fa"></i> Lore</a></li>
<li class="wow fadeInDown delay05"><i class="fa fa-user fa"></i> mIpsu mD</li>
<li class="wow fadeInDown delay05"><i class="fa fa-map fa"></i> olorS</li>
<li class="wow fadeInDown delay15"><i class="fa fa-bolt fa"></i> itAmet.L</li>
<li class="wow fadeInDown delay2"><i class="fa fa-paint-brush fa"></i> or emIps</li>
<li class="wow fadeInDown delay25"><i class="fa fa-envelope fa"></i> umDolor</li>
<li class="wow fadeInDown delay3"><i class="fa fa-pencil fa"></i> Sita</li>
</ul>
</div>
</nav>
<div class="jumbotron">
<div class="container">
<h1 class="wow fadeInLeft Big">Lor emIp sumDo lorSitA</h1>
<p class="wow fadeInRight delay1">metLorem Ip sumDo lorSitAm.</p>
<div class="container">
<ul class="actions">
<li class="wow fadeInUp Big delay2"><i class="fa fa-chevron-down fa"></i></li>
</ul>
</div>
</div>
</div>
</body>
</html>

I'm not sure anyone is going to write the code for you, but we can point you in the right direction. What you are looking for, in terms of specifying different styles at different screen sizes are called media queries. They look like this:
#media screen and (max-width: 1199px) {...}
I have built something very similar to what you are looking for (although mine has probably more than what you are looking for) so if you need a reference on how things work or whatnot, I'll post a link.
http://codepen.io/mhodges44/pen/dGMMOK
You can ignore the angularJS stuff (all of the ng-* in the HTML and the javascript), just focus on the CSS media queries. That should give you a pretty good idea of how it all works and you should be able to apply it to your situation.

Change logo on scroll Jquery

All right? First of all I want to thank the help. Well, my question is as follows:
I would like to to scroll the mouse and create a background and decrease the space from the top, also change the logo. The question of the top bottom and then I could do as code below. However, I do not know what to do to change the logo.
HTML:
<div class="col-md-12">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<!-- copy into bootstrap -->
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
<span class="bar4"></span>
<!-- end of code for bootstrap -->
</button>
<h1 class="navbar-brand-spacing">
<a class="navbar-brand navbar-brand page-scroll" href="" title=""></a>
</h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
CSS:
.navbar-brand {
text-transform: none;
margin: 0px;
min-width: 214px;
text-indent: -9999px;
height: 70px;
background: url(../images/logo-telbox.png) no-repeat;
}
.navbar-brand-scroll {
background: url(../images/logo-telbox-scroll.png) no-repeat;
}
JS:
$(window).scroll(function () {
var e = $(this).scrollTop();
e > 60 ? $("header").css("background", "#16181F").css("padding", "0px 0px 10px") : $("header").css("background", "transparent").css("padding", "20px 0px 20px");
});
Thanks :)

So, first off, you have the same class added twice here - <a class="navbar-brand navbar-brand page-scroll" href="" title=""></a>
You may do the following to toggle a class based on the scrollTop
.navbar-brand {
text-transform: none;
margin: 0px;
min-width: 214px;
text-indent: -9999px;
height: 70px;
background: url(../images/logo-telbox.png) no-repeat;
}
.navbar-brand.navbar-brand-scroll {
background: url(../images/logo-telbox-scroll.png) no-repeat;
}
var $header = $("header");
var $logo = $("h1.navbar-brand-spacing > a");
$(window).scroll(function () {
var e = $(this).scrollTop();
if (e > 60) {
$header.css("background", "#16181F").css("padding", "0px 0px 10px");
$logo.addClass('navbar-brand-scroll');
} else {
$header.css("background", "transparent").css("padding", "20px 0px 20px");
$logo.removeClass('navbar-brand-scroll');
}
});
P.S. Scroll triggers for every pixel scrolled and way too much scripts on scroll may choke your browser. Use it sparingly!