CODEWITHSUNDEEP
javascripthtmltwitter-bootstrapcss
End User
End User

Reputation: 109

How to make fixed navbar transparent based on page scroll?

I want mynavbar to be transparent when the page is scrolled to the top, however when the user scrolls I would like it to be made opaque. I tried this with javascript, but something still isn't working. http://jsfiddle.net/6A6qy/

function myFunction() {
  if ($(window).scrollTop() < 50) {
    document.getElementById("masthead").style.opacity = "0.5";
  }
}
#masthead {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  background-color: #00a087;
  opacity: 1;
}
#container {
  background-color: blue;
  height: 1000px;
  display: block;
  margin-top: -50px;
}
<body onload="myFunction()">
  <nav id="masthead">
    <!-- Fixed navigation bar content -->
  </nav>
  <div id="container"></div>
</body>

Upvotes: 0

Views: 1028

Answers (3)

Roope
Roope

Reputation: 4507

How about this:

JS:

// listen for scroll
$(window).scroll( function() {
  // apply css classes based on the situation
  if ($(".masthead").offset().top > 100) {
    $(".masthead").addClass("navbar-scrolled");
  } else {
    $(".masthead").removeClass("navbar-scrolled");
  }
}

CSS:

.navbar-scrolled {
  /* some css for navbar when scrolled */
}

JSFiddle example: http://jsfiddle.net/8ruwnaam/

And then of course you could add some optimization to not apply the classes all the time if they are already there. But it works quite fine without such things as well.

Additional things:

The first version of this answer and your question use IDs for styling, which is not really a good idea according to a lot of people. Styling IDs goes against the DRY principles, and causes all these funny little problems when you forget to think about CSS specificity. IDs are quite alright for a lot of things when it comes to the logic in the JS or something, but try to use classes for styling.

Upvotes: 1

Heidar
Heidar

Reputation: 689

You need to set it to be transparent by default (as it will be on the top) like that 

#masthead {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  background-color: #00a087;
  opacity: 0.5; /*edited the opacity to be 50% by default*/
}

then use this script to achieve your needs:

$(document).ready(function () {
    $(window).scroll(function(){
        var ScrollTop = parseInt($(window).scrollTop());

        if (ScrollTop < 100) {
            document.getElementById("masthead").style.opacity = "0.5";
        } else {
            document.getElementById("masthead").style.opacity = "1";
        }
    });
});

Upvotes: 0

Rob M.
Rob M.

Reputation: 36511

You should create an .opaque css class and attach it based on actively scrolling or if scrollTop is < 50:

.opaque {
   opacity: 0.5;
}

Then attach that class on('scroll') or at scrollTop (this is using the debounce plugin):

function myFunction() {
  var $masthead = $('#masthead')
    , $window = $(window);
  // currently scrolling
  $window.scroll($.debounce( 250, true, function(){
    $masthead.addClass('opaque');
  }));
  // done scrolling
  $window.scroll($.debounce( 250, function(){
    // if at the top, add or keep opaque class
    if($(this).scrollTop() < 50) {
      if(!$masthead.hasClass('opaque')) {
         $masthead.addClass('opaque');
      }
    } else {
      $masthead.removeClass('opaque');
    }
  }));
}

Upvotes: 0

Related Questions