898 posts
  • Has sold $1,000+ on Envato Market
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 3 years
+5 more
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 :)

438 posts
  • Has been part of the Envato Community for over 2 years
  • Has sold $5,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Sells items exclusively on Envato Market
Pixelous says

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

898 posts
  • Has sold $1,000+ on Envato Market
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 3 years
+5 more
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

438 posts
  • Has been part of the Envato Community for over 2 years
  • Has sold $5,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Sells items exclusively on Envato Market
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>
438 posts
  • Has been part of the Envato Community for over 2 years
  • Has sold $5,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Sells items exclusively on Envato Market
Pixelous says

As for Facebook example, it’s just css rule

position: fixed;
898 posts
  • Has sold $1,000+ on Envato Market
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 3 years
+5 more
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 part of the Envato Community for over 2 years
mydearcosmo says

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

898 posts
  • Has sold $1,000+ on Envato Market
  • Has referred 1+ members
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 3 years
+5 more
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
  • Has referred 1+ members
  • Has sold $5,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 1+ items on Envato Market
+2 more
dekciw says

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by