jquery floating left bar

Question

I am trying to replicate the following social bar that is off to the left:

Floating social bar

(the bar floats to the left and never scrolls off screen)

However, When I downloaded the source to that web page I noticed he was using he was using Sizzle.js. Does anybody know of a way to achieve this using jquery. Preferably without using a jQuery plugin.

I realize I could just use a fixed bar off to the left with CSS however I kind of want the feeling of it grabbing on to the top when I scroll past it.

score 1 · Accepted Answer · edited May 23 '17 at 12:07

var name                = "#rightsidebar";
var menu_top_limit      = 241;
var menu_top_margin     = 20;
var menu_shift_duration = 500;
var menuYloc = null;
///////////////////////////////////

$(window).scroll(function() 
{ 
    // Calculate the top offset, adding a limit
    offset = menuYloc + $(document).scrollTop() + menu_top_margin;

    // Limit the offset to 241 pixels...
    // This keeps the menu out of our header area:
    if(offset < menu_top_limit)
        offset = menu_top_limit;

    // Give it the PX for pixels:
    offset += "px";

    // Animate:
    $(name).animate({top:offset},{duration:menu_shift_duration,queue:false});
});

Actually this code is already there in SO

score 0 · Answer 2 · answered Dec 02 '15 at 14:55

0

You don't have to use jQuery for this. You can use simple HTML and CSS - using CSS3's property, position:fixed. See this article for more information.

answered Dec 02 '15 at 14:55

Rev Nosky

75
1
1
9

jquery floating left bar

2 Answers2