eduardomb / scroll-up-bar Goto Github PK

It would be great if it was possible to specify a "buffer height" where a certain amount of scroll-up is allowed before the sticky menu is triggered.

I'm seeing numerous cases where a user scrolls down but due to mouse/trackpad quirks a small amount (typically < 10px) of upwards scroll is accidentally added at the end causing the menu to suddenly pop up out of nowhere.

Being able to specify that at least 20px of upwards scroll is required before the menu functionality is triggered would alleviate that issue.

Hi,
I implemented Scroll-up-bar in a project. When I scroll down on the iPhone screen, the topbar hides, but if I scroll down again, the topbar-container doesn't hide automatically. It hides for a short time and appears again. Can anyone reproduce this or does anyone know what kind of bug this is?

I initiate the scrollbar like this:

$('#topbar').scrollupbar();

My HTML markup:

<div id="topbar" class="navbar">
    <div class="topbar-inner">
        <ul id="mobile-navigation" class="nav menu">
            <li>foo</li>
            <li>bar</li>
        </ul>
    </div>
</div>

My LESS file:

#topbar {
    box-sizing: border-box;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1337;
    margin-bottom: 0;
    position: absolute;

    .topbar-inner {
        background: @bodyFontColor;
        height: 100%;
    }
}

The other problem is when I click on the button to collapse in the menu, it expands the bootstrap navbar but it wiggles. Can you help me out?

I would love to see that you also provide this script with a plain JS version, without Jquery.

1. if I have a menu in scroolbar, which has page links (#) and scrooling is animated, would be good if scroolbar won't dissappear on page scrool down.
2. is there a way to call scroolbar apear on custom event? like window mouse position close to top?

it'd be nice to make it cancellable:

$('#header').scrollupbar({
  enterViewport: function () {
    // prevent entering if the page is still too high.
    if ($(window).scrollTop() < 1000) return false
  }
})

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);
});

Doesn't look as if this is required for production usage.

We should be able to define an offset for the top bar in case the default position isn't top: 0;

Hi,
I use your script and its working very smooth so far. Nice Work.
But i want to unbind it, if the viewport is under 768px.
I used $(window).unbind('scroll') but its killing all my scrollevents (like waypoint.js).

I think a destroy method is almost always useful, so for me its an "issue" :)

I have implemented this scripts on wordpress but Wordpress admin bar has displayed and i need to calculate it while scrolling up.

If scrolling up works then it has not included wordpress admin bar height. How to include it?

Sorry for my bad english, I hope you understand.

Thanks for your help?

the navbar doesn't hide if u click a link that makes the page smooth scroll upwards. is there a way to fix this?

is scroll-up-bar.min.js available or is going to be available on a CDN like https://cdnjs.com ? it would be cool ;)

thanks for the great work here! ;)

Hey, love this plugin. Thought I'd save some headaches and mention that the navbar will be positioned fixed relative to it's parent if the parent has transform styles. So, instead of being fixed to the top of the viewport, it will be fixed to the top of the parent and may not even appear when scrolling up.

For instance:

More reading:
http://stackoverflow.com/questions/15194313/webkit-css-transform3d-position-fixed-issue
http://codepen.io/markdebeer/pen/qrBDm
http://davidwalsh.name/translate3d

On iOS devices Scroll Up Bar overwrites an existing style attributes on the bar element. I believe in this section of code at line 138.

$bar.css({
    'position': 'absolute',
    'top': lastY > minY ? lastY : initialPosTop
});

The problem it causes in our case is that we use jQuery's show() and hide() method on the bar and scroll up bar is overwriting those attributes.

Could it be changed to replace only the position and top attributes and retain any others already existing?

On my iPhone (4s), the scroll up bar behaves a little bit jumpy.

First off; when I scroll down fast (not even very fast), without any intervals, the top bar does not disappear. Only when I stop scrolling, the bar disappears, while I expect the top bar to hide as soon as I scroll down.

When I scroll down, and immediately up, the top bar sometimes appears but from the middle of the page, as if it were flying around the page.

Bar with offset initially stays in the same position where it was originally loaded.
In other words, when the page loads initially, the position and overall function of the bar are correct, BUT if you happened to resize the browser window up or down, the bar retains the same location, whatever it was when the page has loaded.

http://developer.telerik.com/featured/scroll-event-change-ios-8-big-deal/

if ($(window).width() < 768) {
$.scrollupbar($('#topbar')).destroy
}

Hey @eduardomb! Thanks for a great little plugin.

Do you have plans to add a license to the repo? Right now, it's not actually legally permissible to use it on any projects 😉