codepen: jQuery .css() edit when scrolldown past anchor, vice versa

Question

codepen http://codepen.io/mathiasvanderbrempt/pen/mJjjrx

I need to figure out why this jquery isn't working...

I want to make the .navigationfx drop down (top = 0px) when its scrolltop() reaches the first section (should I add a class or id?). Accordingly, I want to make it move up (top = -30px) when it scrolls back up past it.

  $(function(){
  //last scroll will always save the current scroll position value
  var CurrentScroll = 0;
  $(window).scroll(function(event){
      var NextScroll = $(this).scrollTop();
      if (NextScroll > CurrentScroll){
         //codes related to down-ward scrolling here
                if    ($(window).scrollTop() > $('section').scrollTop())
              {
                $('navigationfx').css('top', '0px')
              }
              else {
                $('navigationfx').css('top', '-100px')
              }
      }
      else {
         //codes related to upward-scrolling here
                if ($(window).scrollTop() < $('section').scrollTop())
              {
                $('navigationfx').css('top', '-100px')
              }
              else {
                $('navigationfx').css('top', '0px')
              }
      }
      //Updates current scroll position
      CurrentScroll = NextScroll;
  });
});

css

  .navigationfx {
  visibility: ;
  position: fixed;
  z-index: 2;
  margin: 0 auto;
  padding: 5px 0 0 0;
  width: 100%;
  top: -50px;
  left: 0;
  background: rgba(250,250,250,0.5);
  text-align: center;
  color: #333;
  border-bottom: 1px solid #dddedf
}

Answer 1

Few things:

You select the first section form the matched set as:

$('section').first();

Since, the section has no scroll, you would have to use the offset top as:

$('section').first().offset().top;

Do not scan the DOM over and over for the same element. Store a reference and use it as you need as:

var $nav = $(".navigationfx");
var $firstSection = $('section').first();

Not sure if this is what you wanted, but, here is your pen updated

PS It's okay to use .css() to add/update top for this specific scenario and doesn't have to be add/remove a class.

Answer 2

Because $('section').scrollTop() permanently equal 0 .

Change it to $("section").offset().top .

http://codepen.io/anon/pen/jPpeKv

Answer 3

When you log $('section').scrollTop() to the console, you'll see that it always returns zero. Instead, use $('section').offset().top .

You are also missing a . in the navigationfx selector.

$(function(){
    //last scroll will always save the current scroll position value
    var CurrentScroll = 0;
    $(window).scroll(function(event){
        var NextScroll = $(this).scrollTop();
        if (NextScroll > CurrentScroll){
            //codes related to down-ward scrolling here
            if($(window).scrollTop() > $('section').offset().top)
            {
                $('.navigationfx').css('top', '0px')
            }
            else {
                $('.navigationfx').css('top', '-100px')
            }
        }
        else {
            //codes related to upward-scrolling here
            if($(window).scrollTop() < $('section').offset().top)
            {
                $('.navigationfx').css('top', '-100px')
            }
            else {
                $('.navigationfx').css('top', '0px')
            }
        }
        //Updates current scroll position
        CurrentScroll = NextScroll;
    });
});

Answer 4

$('navigationfx') => $('.navigationfx')

and I think all this code can be shorten to that:

$(function(){
    $(window).scroll(function(event){
            var offset = $(window).scrollTop() > $('section').offset().top?'0px':'-100px';
            $('.navigationfx').css('top', offset);
    });
    $(window).scroll();
});

codepen: http://codepen.io/anon/pen/YXjJLG