CODEWITHSUNDEEP
javascriptjqueryhtmlcss
joseph young
joseph young

Reputation: 27

navbar changes background when scroll down, but doesnt change back when scrolled up

I have the JS code here:

  var fixmeTop = $('.navbar').offset().top;
  $(window).scroll(function() {
      var currentScroll = $(window).scrollTop();
      if (currentScroll >= fixmeTop) {
          $('.navbar').css({
              position: 'fixed',
              top: '0',
              margin:'auto',
              background: 'white',
              color: 'rgba(0,0,0,0.6)',
              padding: '10px'
          });
          $('li a').css({
              color: 'rgba(0,0,0,0.6)'
          });
      } else {
          $('.navbar').css({
              position: 'static'
          });
      }
  });

The problem is, when i scroll down it does change. but when i scroll back up to the original position, it doesnt change back. I want the nav to change its background, padding and color when it goes down, but when its back to its original position (its the topbar, on top of the browser), it should change back to background:none, color: rgba(0,0,0,0.6) and padding:20px thanks.

this is the html

<div class="navbar">
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li> <a href="#">About</a></li>
        <li> <a href="#">Portfolio</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

and the css:

.navbar{
    margin:auto;
    text-align: center;
    padding:20px;
    float:left;
    width:100%;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
li {
    display:inline-block;
}
li a {
    min-width:140px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: white;
    background: none;
    text-decoration: none;
    padding:15px;
}
li:hover a {
    border-bottom:3px solid #EB9532;
}

Upvotes: 1

Views: 1542

Answers (4)

dfsq
dfsq

Reputation: 193281

You need to reset applied styles when you scroll back. In general, avoid using css method like this, as it's not very flexible. You can significantly simplify your code if you move styles to CSS and just toggle class name on navbar:

var $navbar = $('.navbar'),
    fixmeTop = $navbar.offset().top;

$(window).scroll(function () {
    var currentScroll = $(window).scrollTop();
    $navbar.toggleClass('fixed', currentScroll >= fixmeTop);
});

with CSS:

.navbar.fixed {
    position: fixed;
    top: 0;
    margin: auto;
    background: white;
    color: rgba(0,0,0,0.6);
    padding: 10px;
}

.navbar.fixed li a {
    color: rgba(0,0,0,0.6);
}

Demo: http://jsfiddle.net/fgm3yvL9/

Upvotes: 2

Woody Payne
Woody Payne

Reputation: 605

If you change CSS values with jQuery, you will always have to change them back with jQuery. jQuery does not add a new class to your page. It appends its styling to the tag itself in the source. Inspect your navbar tag and then scroll down to see what I mean.

Since inline styling usually always takes priority, your navbar will never change back without either removing the CSS you added (with jQuery) or overwriting the CSS you added (with jQuery.)

I would recommend overwriting, as it's a lot simpler. You just need to add the opposite comparison with the initial CSS you want to apply. In this case, no background with slightly transparent text:

if (currentScroll >= fixmeTop) {
      $('.navbar').css({
          position: 'fixed',
          top: '0',
          margin:'auto',
          background: 'white',
          color: 'rgba(0,0,0,0.6)',
          padding: '10px'
      });
      $('li a').css({
          color: 'rgba(0,0,0,0.6)'
      });
  }
  if (currentScroll < fixmeTop) {
      $('.navbar').css({
          'background':'none',
          'color':'rgba(0,0,0,0.6)'
      });
    }

From personal experience I would suggest using the 'currentscroll < fixmetop' comparison. I've had nothing but problems with IE8 and not specifying the less than scroll (horizontal scrolling in particular.) Just make sure it behaves as you want it to.

Upvotes: 0

Sathish
Sathish

Reputation: 2460

Its has possible of two ways.,

1)you add background property on .navbar class in stylesheet

2)add background property in else part

like

.navbar{
    margin:auto;
    text-align: center;
    padding:20px;
    background: none;
    float:left;
    width:100%;
}

or

else {
          $('.navbar').css({
              position: 'static',
              background: 'none',
          });

Upvotes: 0

Afshin
Afshin

Reputation: 2437

var fixmeTop = $('.navbar').offset().top;
  $(window).scroll(function() {
      var currentScroll = $(window).scrollTop();
      if (currentScroll >= fixmeTop) {
          $('.navbar').css({
              position: 'fixed',
              top: '0',
              margin:'auto',
              background: 'white',
              color: 'rgba(0,0,0,0.6)',
              padding: '10px'
          });
          $('li a').css({
              color: 'rgba(0,0,0,0.6)',

          });
      } else {
          $('.navbar').css({
              position: 'static',
              background:none, 
              color: rgba(0,0,0,0.6),
              padding:20px
          });
      }
  });

Upvotes: 0

Related Questions