CSS Change Navbar Background color when scrolling

Question

My navbar has a white background, but it should be transparent on the landing page and white when i scroll down and white on every other page.

I used the code from: Changing nav-bar color after scrolling?

EDIT:
So I added a fiddle with the answer below but somehow its not working

https://jsfiddle.net/jy6njukm/

Here's my code:

javascript:

$(document).ready(function(){
  var scroll_start = 0;
  var change_color = $('#change_color');
  var offset = change_color.offset();
  if (change_color.length){
    $(document).scroll(function() {
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
        // the white normal navbar
        $(".navbar-add").removeClass("navbar-trans");
      } else {
        // what the users sees when he lands on the page
        $(".navbar-add").addClass("navbar-trans");
      }
    });
  }
});

Here is my navbar css:

.navbar-fixed {
  position: fixed;
  height: 70px;
  padding: 0px 30px;
  left: 0px;
  top: 0px;
  z-index: 50;
  width: 100%;
  background-color: white;
  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.07),0 1px 0 0 rgba(0,0,0,0.03);
}
.navbar-trans {
  background-color: transparent !important;
  box-shadow: none !important;
}

And I have my navbar html with only

<div class="navbar-fixed navbar-add">
.....
</div>

and my home.html.erb with

<div class="container-fluid banner bg-picture" id="change_color" 
  style="background-image: linear-gradient(-225deg, rgba(0,0,0,0.2) 0%, 
  rgba(0,0,0,0.35) 50%), url('<%= asset_path('banner_logo.jpeg') %>')">
</div>

It kind of works but the problem now is, that everytime I refresh the page, the navbar is still white and it only turns transparent when I scroll up, to the top of the page. It turns white when I scroll down though, like I want it to be.

I inspected the page and everytime I refresh it, the background-color of the class is still white even though I set this to be transparent in the javascript?
How can I make it possible that the background-color of my navbar is transparent on my landing page?

Nisarg Shah · Accepted Answer · 2017-07-21T16:25:17.380

1

Using HTML

Your HTML should be:

<div class="navbar-fixed navbar-add navbar-trans">
.....
</div>

Since it already contains the navbar-trans class, it will remain transparent. Once the user scrolls, the javascript will kick in, and remove/add navbar-trans class as per the code.

Using JS

var landingPage = 'YOUR_LANDING_PAGE_URL';

function updateNavStyle() {
  if(landingPage.length > 0 && location.href.toLowerCase().indexOf(landingPage.toLowerCase()) >= 0) {
    var offset = $('#change_color').offset();
    var scroll_start = $(document).scrollTop();
    if (scroll_start > offset.top) {
      // the white normal navbar
      $(".navbar-add").removeClass("navbar-trans");
    } else {
      // what the users sees when he lands on the page
      $(".navbar-add").addClass("navbar-trans");
    }
  }
}

$(document).ready(function() {
  var scroll_start = 0;
  var change_color = $('#change_color');

  if (change_color.length) {
    $(document).scroll(updateNavStyle);
    updateNavStyle(); // Note this.
  }
});

Here, in addition to binding the updateNavStyle function on scroll, I have added a call to it once the DOM is ready. As a result, as soon as the page loads, the function will be executed once and it will apply the styles based on scroll position.

Update:

If your landing page is 'index.html', where you want this function to work, write its value in variable landingPage. So the function will not run in other pages such as 'about.html' or 'contacts.html'.

edited Jul 21 '17 at 16:25

answered Jul 21 '17 at 15:36

Nisarg Shah

14,151
6
34
55

Hi, but when I do this, my navbar is transparent on all my other sites – WQ.Kevin Jul 21 '17 at 15:39
So do you have multiple pages using the same nav bar? I'm not sure how that works, but maybe you can try the JS solution I just added. If you are adding the javascript on specific sites, then this will fit your requirement. – Nisarg Shah Jul 21 '17 at 15:46
yeah, I am using the same navbar on multiple pages and want them to be white. only transparent on the landing page though, i will try your solution now – WQ.Kevin Jul 21 '17 at 15:50
Then, you could use `location.href` within the function `updateNavStyle` in order to check if the page is your landing page or not. If it is, then allow style changes, otherwise ignore the scroll event. – Nisarg Shah Jul 21 '17 at 15:52
Do I have to change something in the js you gave me? I added navbar-trans to the html and changed my javascript file to the code you gave me. Now the navbar just stays transparent and won't turn white. – WQ.Kevin Jul 21 '17 at 15:56
I had missed to add the variables earlier. Nevertheless, I just updated the code and answer. Hope it works. – Nisarg Shah Jul 21 '17 at 16:08
I tried your solution, but unfortunately, the navbar-trans just makes my navbar transparent permantly. I added a fiddle to my post, check it out. – WQ.Kevin Jul 21 '17 at 16:20
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/149828/discussion-between-wenqing-kevin-ma-and-nisarg-shah). – WQ.Kevin Jul 21 '17 at 16:32

CSS Change Navbar Background color when scrolling

1 Answers1

Using HTML

Using JS