How to fix div on scroll

Question

If you scroll down the page in the following URL  the  share  div will lock onto the browser   http   knowyourmeme com memes pizza-is-a-vegetable  I m assuming they are applying a position  fixed  attribute  How can this be achieved with jQuery

User · Answer

I made a mix of the answers here  took the code of  Julian and ideas from the others  seems clearer to me  this is what s left   fiddle http   jsfiddle net wq2Ej   jquery    store the element var  cache       my-sticky-element       store the initial position of the element var vTop    cache offset   top - parseFloat  cache css  marginTop   replace  auto   0        window  scroll function  event           what the y position of the scroll is     var y     this  scrollTop            whether that s below the form     if  y  gt   vTop             if so  ad the fixed class        cache addClass  stuck          else            otherwise remove it        cache removeClass  stuck                  css    my-sticky-element stuck       position fixed      top 0      box-shadow 0 2px 4px rgba 0  0  0   3

User · Answer

You can find an example below  Basically you attach a function to window s scroll event and trace scrollTop property and if it s higher than desired threshold you apply position  fixed and some other css properties    x000D   x000D  jQuery function      x000D      window  scroll function fix element     x000D          target   css  x000D          window  scrollTop    gt  100 x000D               position    fixed    top    10px    x000D               position    relative    top    auto    x000D         x000D      return fix element  x000D          x000D      x000D  body   x000D    height  2000px  x000D    padding-top  100px  x000D    x000D  code   x000D    padding  5px  x000D    background   efefef  x000D    x000D   target   x000D    color   c00  x000D    font  15px arial  x000D    padding  10px  x000D    margin  10px  x000D    border  1px solid  c00  x000D    width  200px  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div id  target  gt This  lt code gt div lt  code gt  is going to be fixed lt  div gt  x000D   x000D   x000D

User · Answer

On jQuery for designers there s a well written post about this  this is the jQuery snippet that does the magic  just replace  comment with the selector of the div that you want to float   Note  To see the whole article go here  http   jqueryfordesigners com fixed-floating-elements     document  ready function        var  obj       comment      var top    obj offset   top - parseFloat  obj css  marginTop   replace  auto   0         window  scroll function  event           what the y position of the scroll is     var y     this  scrollTop            whether that s below the form     if  y  gt   top             if so  ad the fixed class        obj addClass  fixed          else            otherwise remove it        obj removeClass  fixed

User · Answer

function        var triggers           fn floatingFixed   function options        options     extend       floatingFixed defaults  options       var r     this  each function           var  this     this   pos    this position          pos position    this css  position           this data  floatingFixedOrig   pos          this data  floatingFixedOptions   options         triggers push  this               windowScroll        return r            floatingFixed     fn floatingFixed      floatingFixed defaults         padding  0         var  window     window     var windowScroll   function         if triggers length     0    return        var scrollY    window scrollTop        for var i   0  i  lt  triggers length  i            var t   triggers i   opt   t data  floatingFixedOptions          if  t data  isFloating              var off   t offset            t data  floatingFixedTop   off top           t data  floatingFixedLeft   off left                 var top   top   t data  floatingFixedTop          if top  lt  scrollY   opt padding  amp  amp   t data  isFloating              t css  position   fixed   top  opt padding  left  t data  floatingFixedLeft    width  t width      data  isFloating   true           else if top  gt   scrollY   opt padding  amp  amp  t data  isFloating              var pos   t data  floatingFixedOrig            t css pos  data  isFloating   false                          window scroll windowScroll  resize windowScroll      jQuery     and then make any div as floating fixed by calling      id of the div   floatingFixed      source  https   github com cheald floatingFixed

[javascript] How to fix div on scroll

fiddle http://jsfiddle.net/wq2Ej/

jquery

css:

Examples related to javascript

Examples related to jquery