Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Div scrolling with the page in a fixed position

Tags:

html

jquery

css

Even with firebug I can't figure how to achieve this out:

look at the social div on the left side of the page. It follows you smoothly: which css positioning did they use? I just read an absolute position, nothing more.

  1. I tried the same but it wont scroll in my page
  2. using jquery and animate makes it too pretty
  3. modyfing the css on each scroll looks pretty weird, it stuck for a millisecond and then move How to get their same effect?

http://techcrunch.com/2011/08/04/sources-livingsocial-close-to-acquiring-turkish-daily-deals-site-grupfoni/

like image 954
Damiano Barbati Avatar asked Aug 05 '11 06:08

Damiano Barbati


2 Answers

Here is a demo of a jquery plugin that takes care of this. This plugin has it's roots in the excellent tutorial that Joe suggested above, but it takes the solution provided in the tutorial a bit farther.

Demo: http://jsfiddle.net/y3qV5/

Plugin and source: https://github.com/bigspotteddog/ScrollToFixed

Usage:

$(document).ready(function() {
    $('#cart').scrollToFixed();
});
like image 65
bigspotteddog Avatar answered Sep 18 '22 04:09

bigspotteddog


Try this solution using a bit of jQuery and CSS. It should give you the same effect with quite a bit less work...

http://jqueryfordesigners.com/fixed-floating-elements/

like image 38
Joe Conlin Avatar answered Sep 18 '22 04:09

Joe Conlin