Add active class / events

[nmec]

It would be good to have an active class or event emitted when the top bar is revealed, in my case I need to style the top bar differently when the user has scrolled. Currently I'm using the following workaround:

var $header = $('#header'),
    height = $header.height(),

$header.scrollupbar();

var hasScrolled = function() {

    if ( $(window).scrollTop() > height ) {
        $header.addClass('scrolled');
    } else {
        $header.removeClass('scrolled');
    }
};

$(window).on('scroll', function() {
    debounce(hasScrolled, 100);
});

[eduardomb]

Hi, Jonathan.

The revealing / hiding events would be very useful indeed. I'll try to implement it this week, then you'll be able to pass callbacks like enterViewport, fullyEnterViewport, exitViewport and partiallyExitViewport.

In your case, specifically, you would use it this way:

var $header = $('#header');

$header.scrollupbar({
  enterViewport: function() {
    $header.addClass('scrolled');
  },
  exitViewport: function() {
    $header.removeClass('scrolled');
  }
});

[eduardomb]

Release 0.3.0 is published! It implements this feature.

Checkout the demo: http://eduardomb.github.io/scroll-up-bar/callback.html

[nmec]

Awesome, thanks!