905 posts
  • Author Level 3
  • Affiliate Level 1
  • Collector Level 2
  • 4 Years of Membership
+4 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
  • 3 Years of Membership
  • Author Level 4
  • Collector Level 3
  • Exclusive Author
Pixelous
says

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

905 posts
  • Author Level 3
  • Affiliate Level 1
  • Collector Level 2
  • 4 Years of Membership
+4 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
  • 3 Years of Membership
  • Author Level 4
  • Collector Level 3
  • Exclusive Author
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
  • 3 Years of Membership
  • Author Level 4
  • Collector Level 3
  • Exclusive Author
Pixelous
says

As for Facebook example, it’s just css rule

position: fixed;
905 posts
  • Author Level 3
  • Affiliate Level 1
  • Collector Level 2
  • 4 Years of Membership
+4 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
  • 3 Years of Membership
mydearcosmo
says

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

905 posts
  • Author Level 3
  • Affiliate Level 1
  • Collector Level 2
  • 4 Years of Membership
+4 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
  • Affiliate Level 1
  • Author Level 4
  • Beta Tester
  • Collector Level 1
+2 more
dekciw
says
by
by
by
by
by
by