894 posts
  • Europe
  • Has been a member for 3-4 years
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Most Wanted Bounty Winner
  • Envato Studio (Microlancer) Beta Tester
  • Grew a moustache for the Envato Movember competition
infuse01 says

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 :)

439 posts
  • Bought between 50 and 99 items
  • Europe
  • Exclusive Author
  • Has been a member for 2-3 years
  • Sold between 5 000 and 10 000 dollars
Pixelous says

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

894 posts
  • Europe
  • Has been a member for 3-4 years
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Most Wanted Bounty Winner
  • Envato Studio (Microlancer) Beta Tester
  • Grew a moustache for the Envato Movember competition
infuse01 says

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? :-D

439 posts
  • Bought between 50 and 99 items
  • Europe
  • Exclusive Author
  • Has been a member for 2-3 years
  • Sold between 5 000 and 10 000 dollars
Pixelous says

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>
439 posts
  • Bought between 50 and 99 items
  • Europe
  • Exclusive Author
  • Has been a member for 2-3 years
  • Sold between 5 000 and 10 000 dollars
Pixelous says

As for Facebook example, it’s just css rule

position: fixed;
894 posts
  • Europe
  • Has been a member for 3-4 years
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Most Wanted Bounty Winner
  • Envato Studio (Microlancer) Beta Tester
  • Grew a moustache for the Envato Movember competition
infuse01 says

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.

20 posts
  • Has been a member for 2-3 years
mydearcosmo says

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

894 posts
  • Europe
  • Has been a member for 3-4 years
  • Exclusive Author
  • Sold between 1 000 and 5 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Most Wanted Bounty Winner
  • Envato Studio (Microlancer) Beta Tester
  • Grew a moustache for the Envato Movember competition
infuse01 says

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 :)

332 posts
  • Exclusive Author
  • Sold between 5 000 and 10 000 dollars
  • Has been a member for 4-5 years
  • Europe
  • Envato Studio (Microlancer) Beta Tester
  • Bought between 1 and 9 items
  • Referred between 1 and 9 users
dekciw says
by
by
by
by
by
by