Looking for Plugin/Tutorial/HowTo

Hi Folks,

the whole day I’m looking for a plugin or a tutorial for what I would like to do. I’ve seen it a lot of times on some websites – also facebook makes use of it on the timeline – maybe you can point me in the right direction:

When you go to your facebook profile and scroll down a bit a “bar” magically appears with some useful controls. That’s exactly what I’m looking for. Do you have any suggestions for plugins or tutorials to see how this can be accomplished.

Many thanks in advance

Hi, u need to use this plugin https://github.com/paulirish/infinite-scroll

Pixelous said
Hi, u need to use this plugin https://github.com/paulirish/infinite-scroll

Many thanks but this isn’t what I’m looking for.

But I coincidentally found another website with the “effect” I’m looking for. When you visit: http://thenextweb.com/dd/2012/07/23/hey-everyone-its-a-great-time-to-be-a-programmer-hint-hint/ you see a bar with a home button, a sharing button, a g+, twitter and facebook buton – just right above the post. When you start scrolling you can see this bar scrolls also and stays in the viewport. That’s what I’m looking for.

Any suggestions?

Yep, actually it’s not a plugin but a few lines of code as u can see there:

var $toolbar = $("#post-toolbar").addClass("toolbar-absolute");
        if($toolbar.length !== 0) {
            var $view = $(document);
            var menuHeight = $toolbar.height();
            var $ghost = $('<div class="ghost">').height(menuHeight).insertBefore($toolbar);
            var originalMenuTop = $toolbar.offset().top;
            $view.bind("scroll resize", function () {
                var viewTop = $view.scrollTop();
                if ((viewTop >= originalMenuTop) && !$toolbar.is(".toolbar-fixed")) {
                    $toolbar.removeClass("toolbar-absolute").addClass("toolbar-fixed");
                } else if ((viewTop < originalMenuTop) && $toolbar.is(".toolbar-fixed")) {
                    $toolbar.removeClass("toolbar-fixed").addClass("toolbar-absolute");
                }
            });
        }
    }
</div>

As for Facebook example, it’s just css rule

position: fixed;

Hm, I’m going to try this out. Is that code snippet from your own repository or is it taken from the source code of tnw? Just to know where I can look some other details like html structure or css.

As for facebook – this can’t be just a simple css rule since it seems like there is a script which “listens” to the user scrolling and fires then the execution – in that case the bar appears and scrolls from this point within the viewport.

I actually find this quite new. I will check on this and try it out right away.

OK…sry for the late reply – was bit busy the last days.

Just wanted to say thx to Pixelous – that helped me out so far. It’s a bit rough but it does it’s purpose. Still could need a “pointer” into the right direction – a tutorial or howto or even a plugin. So if anyone has an idea I would be really thankful