894 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
  • Located in Europe
+1 more
Pixelous says

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

894 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
  • Located in Europe
+1 more
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
  • Located in Europe
+1 more
Pixelous says

As for Facebook example, it’s just css rule

position: fixed;
894 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.

894 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
+3 more
dekciw says
by
by
by
by
by
by