How can I make a div stick to the top of the screen once it s been scrolled to

Question

I would like to create a div  that is situated beneath a block of content but that once the page has been scrolled enough to contact its top boundary  becomes fixed in place and scrolls with the page

User · Answer

And here s how without jquery  UPDATE  see other answers where you can now do this with CSS only    x000D   x000D  var startProductBarPos -1  x000D  window onscroll function    x000D    var bar   document getElementById  nav    x000D    if startProductBarPos lt 0 startProductBarPos findPosY bar   x000D   x000D    if pageYOffset gt startProductBarPos   x000D      bar style position  fixed   x000D      bar style top 0  x000D     else  x000D      bar style position  relative   x000D      x000D   x000D     x000D   x000D  function findPosY obj    x000D    var curtop   0  x000D    if  typeof  obj offsetParent      undefined   amp  amp  obj offsetParent    x000D      while  obj offsetParent    x000D        curtop    obj offsetTop  x000D        obj   obj offsetParent  x000D        x000D      curtop    obj offsetTop  x000D      x000D    else if  obj y  x000D      curtop    obj y  x000D    return curtop  x000D    x000D     margin 0 padding 0   x000D   nav   x000D    border  1px red dashed  x000D    background   00ffff  x000D    text-align center  x000D    padding  21px 0  x000D   x000D    margin  0 auto  x000D    z-index 10   x000D    width 100   x000D    left 0  x000D    right 0  x000D    x000D   x000D   header   x000D    text-align center  x000D    padding  65px 0  x000D    border  1px red dashed  x000D    x000D   x000D   content   x000D    padding  500px 0  x000D    text-align center  x000D    border  1px red dashed  x000D    x000D   footer   x000D    padding  100px 0  x000D    text-align center  x000D    background   777  x000D    border  1px red dashed  x000D    x000D   lt header class  header  gt This is a Header lt  header gt  x000D   lt div id  nav  class  nav  gt Main Navigation lt  div gt  x000D   lt div class  content  gt Hello World  lt  div gt  x000D   lt footer class  footer  gt This is a Footer lt  footer gt  x000D   x000D   x000D

User · Answer

This is how i did it with jquery  This was all cobbled together from various answers on stack overflow  This solution caches the selectors for faster performance and also solves the  jumping  issue when the sticky div becomes sticky   Check it out on jsfiddle  http   jsfiddle net HQS8s   CSS    stick       position  fixed      top  0      JS     document  ready function            Cache selectors for faster performance      var  window     window            mainMenuBar       mainMenuBar             mainMenuBarAnchor       mainMenuBarAnchor            Run this on scroll events       window scroll function             var window top    window scrollTop            var div top    mainMenuBarAnchor offset   top          if  window top  gt  div top                   Make the div sticky               mainMenuBar addClass  stick                 mainMenuBarAnchor height  mainMenuBar height                       else                  Unstick the div               mainMenuBar removeClass  stick                 mainMenuBarAnchor height 0

User · Answer

You could use simply css  positioning your element as fixed    fixedElement       background-color   c0c0c0      position fixed      top 0      width 100       z-index 100      Edit  You should have the element with position absolute  once the scroll offset has reached the element  it should be changed to fixed  and the top position should be set to zero   You can detect the top scroll offset of the document with the scrollTop function     window  scroll function e      var  el       fixedElement       var isPositionFixed     el css  position       fixed      if    this  scrollTop    gt  200  amp  amp   isPositionFixed         el css   position    fixed    top    0px            if    this  scrollTop    lt  200  amp  amp  isPositionFixed        el css   position    static    top    0px                 When the scroll offset reached 200  the element will stick to the top of the browser window  because is placed as fixed

User · Answer

Not an exact solution but a great alternative to consider  this CSS ONLY Top of screen scroll bar  Solved all the problem with ONLY CSS  NO JavaScript  NO JQuery  No Brain work  lol    Enjoy my fiddle  D all the codes are included in there     CSS   menu   position  fixed  height  60px  width  100   top  0  left  0  border-top  5px solid  a1cb2f  background   fff  -moz-box-shadow  0 2px 3px 0px rgba 0  0  0  0 16   -webkit-box-shadow  0 2px 3px 0px rgba 0  0  0  0 16   box-shadow  0 2px 3px 0px rgba 0  0  0  0 16   z-index  999999      w       width  900px      margin  0 auto      margin-bottom  40px    lt br type   moz  gt    Put the content long enough so you can see the effect here     Oh  and the reference is in there as well  for the fact he deserve his credit   CSS ONLY Top of screen scroll bar

User · Answer

In javascript you can do   var element   document getElementById  myid    element style position    fixed   element style top    0

User · Answer

I had the same problem as you and ended up making a jQuery plugin to take care of it  It actually solves all the problems people have listed here  plus it adds a couple of optional features too   Options  stickyPanelSettings            Use this to set the top margin of the detached panel      topPadding  0          This class is applied when the panel detaches      afterDetachCSSClass              When set to true the space where the panel was is kept open      savePanelSpace  false          Event fires when panel is detached        function detachedPanel  panelSpacer            onDetached  null          Event fires when panel is reattached        function detachedPanel            onReAttached  null          Set this using any valid jquery selector to         set the parent of the sticky panel         If set to null then the window object will be used      parentSelector  null      https   github com donnyv sticky-panel  demo  http   htmlpreview github io  https   github com donnyv sticky-panel blob master jquery stickyPanel Main htm

User · Answer

As of January 2017 and the release of Chrome 56  most browsers in common use support the position  sticky property in CSS    thing to stick     position  sticky    top  0px      does the trick for me in Firefox and Chrome   In Safari you still need to use position  -webkit-sticky   Polyfills are available for Internet Explorer and Edge  https   github com wilddeer stickyfill seems to be a good one

User · Answer

I came across this when searching for the same thing  I know it s an old question but I thought I d offer a more recent answer   Scrollorama has a  pin it  feature which is just what I was looking for   http   johnpolacek github io scrollorama

User · Answer

I used some of the work above to create this tech  I improved it a bit and thought I would share my work  Hope this helps  jsfiddle Code function scrollErrorMessageToTop         var flash error   jQuery   flash error        var flash position   flash error position         function lockErrorMessageToTop             var place holder   jQuery  quot  place holder quot            if  jQuery this  scrollTop    gt  flash position top  amp  amp  flash error attr  quot position quot       quot fixed quot                 flash error css                    position    fixed                    top    quot 0px quot                    quot width quot   flash error width                     quot z-index quot    quot 1 quot                              place holder css  quot display quot    quot  quot              else               flash error css  position                    place holder css  quot display quot    quot none quot                         if  flash error length  gt  0            lockErrorMessageToTop             jQuery  quot  flash error quot   after jQuery  quot  lt div id  place holder  gt  quot             var place holder   jQuery  quot  place holder quot            place holder css                quot height quot   flash error height                 quot display quot    quot none quot                      jQuery window  scroll function e                lockErrorMessageToTop                        scrollErrorMessageToTop      This is a little bit more dynamic of a way to do the scroll  It does need some work and I will at some point turn this into a pluging but but this is what I came up with after hour of work

User · Answer

Here is another option   JAVASCRIPT  var initTopPosition      myElementToStick   offset   top       window  scroll function        if   window  scrollTop    gt  initTopPosition              myElementToStick   css   position   fixed   top   0px         else             myElementToStick   css   position   absolute   top  initTopPosition  px           Your  myElementToStick should start with position absolute CSS property

User · Answer

You can add 3 extra rows so when the user scroll back to the top  the div will stick on its old place   Here is the code   if    this  scrollTop    lt  200  amp  amp   el css  position       fixed            fixedElement   css   position    relative    top    200px

User · Answer

The accepted answer works but doesn t move back to previous position if you scroll above it  It is always stuck to the top after being placed there       window  scroll function e         el       fixedElement        if    this  scrollTop    gt  42  amp  amp   el css  position       fixed               fixedElement   css   position    fixed    top    0px           else if    this  scrollTop    lt  42  amp  amp   el css  position       relative               fixedElement   css   relative    fixed    top    42px      this was just my previous position formating               jleedev s response whould work  but I wasn t able to get it to work  His example page also didn t work  for me

User · Answer

You ve seen this example on Google Code s issue page and  only recently  on Stack Overflow s edit page   CMS s answer doesn t revert the positioning when you scroll back up  Here s the shamelessly stolen code from Stack Overflow   function moveScroller         var  anchor       scroller-anchor        var  scroller       scroller         var move   function             var st     window  scrollTop            var ot    anchor offset   top          if st  gt  ot                 scroller css                   position   fixed                   top   0px                            else                scroller css                   position   relative                   top                                            window  scroll move       move           lt div id  sidebar  style  width 270px   gt      lt div id  scroller-anchor  gt  lt  div gt      lt div id  scroller  style  margin-top 10px  width 270px  gt       Scroller Scroller Scroller    lt  div gt   lt  div gt    lt script type  text javascript  gt       function         moveScroller           lt  script gt     And a simple live demo   A nascent  script-free alternative is position  sticky  which is supported in Chrome  Firefox  and Safari  See the article on HTML5Rocks and demo  and Mozilla docs

User · Answer

As Josh Lee and Colin  t Hart have said  you could optionally just use position  sticky  top  0  applying to the div that you want the scrolling at     Plus  the only thing you will have to do is copy this into the top of your page or format it to fit into an external CSS sheet    lt style gt   sticky div s name here   position  sticky  top  0     lt  style gt    Just replace  sticky div s name here with the name of your div  i e  if your div was  lt div id  example  gt  you would put  example   position  sticky  top  0

User · Answer

I have links setup in a div so it is a vertical list of letter and number links    links       float left      font-size 9pt      margin-left 0 5em      margin-right 1em      position fixed      text-align center      width 0 8em      I then setup this handy jQuery function to save the loaded position and then change the position to fixed when scrolling beyond that position   NOTE  this only works if the links are visible on page load    var listposition false  jQuery function         try                stick the list links to top of page when scrolling         listposition   jQuery   links   css   position    static    top    0px    position            console log listposition             window  scroll function e                top     this  scrollTop                 el   jQuery   links                  if typeof console    undefined                      console log listposition top  top                               if   top  gt  listposition top  amp  amp   el css  position       fixed                     el css   position    fixed    top    0px                               else if   top  lt  listposition top  amp  amp   el css  position       fixed                     el css   position    static                                      catch e            alert  Please vendor admin mydomain com  Myvendor JavaScript Issue

User · Answer

Here is an extended version to Josh Lee s answer  If you want the div to be on sidebar to the right  and float within a range  i e   you need to specify top and bottom anchor positions   It also fixes a bug when you view this on mobile devices  you need to check left scroll position otherwise the div will move off screen    function moveScroller         var move   function             var st     window  scrollTop            var sl     window  scrollLeft            var ot       scroller-anchor-top   offset   top          var ol       scroller-anchor-top   offset   left          var bt       scroller-anchor-bottom   offset   top          var s       scroller            if st  gt  ot                if  st  lt  bt - 280    280px is the approx  height for the sticky div                               s css                       position   fixed                       top   0px                       left  ol-sl                                                else                               s css                       position   fixed                       top  bt-st-280                      left  ol-sl                                              else               s css                   position   relative                   top                      left                                             window  scroll move       move

User · Answer

My solution is a little verbose  but it handles variable positioning from the left edge for centered layouts      Ensurs that a element  usually a div  stays on the screen      aElementToStick     The jQuery selector for the element to keep visible global makeSticky   function  aElementToStick        var  elementToStick     aElementToStick       var top    elementToStick offset   top      var origPosition    elementToStick css  position         function positionFloater a Win               Set the original position to allow the browser to adjust the horizontal position          elementToStick css  position   origPosition               Test how far down the page is scrolled         var scrollTop   a Win scrollTop               If the page is scrolled passed the top of the element make it stick to the top of the screen         if  top  lt  scrollTop                   Get the horizontal position             var left    elementToStick offset   left                 Set the positioning as fixed to hold it s position              elementToStick css  position    fixed                   Reuse the horizontal positioning              elementToStick css  left   left                  Hold the element at the top of the screen              elementToStick css  top   0                           Perform initial positioning     positionFloater   window            Reposition when the window resizes       window  resize function  e            positionFloater   this                    Reposition when the window scrolls       window  scroll function  e            positionFloater   this

User · Answer

Here s an example that uses jquery-visible plugin  http   jsfiddle net 711p4em4    HTML    lt div class    wrapper  gt       lt header gt Header lt  header gt       lt main gt           lt nav gt Stick to top lt  nav gt          Content      lt  main gt       lt footer gt Footer lt  footer gt   lt  div gt    CSS           margin  0      padding  0     body       background-color   e2e2e2      wrapper  gt  header   wrapper  gt  footer       font  20px 2 Sans-Serif      text-align  center      background-color   0040FF      color   fff      wrapper  gt  main       position  relative      height  500px      background-color   5e5e5e      font  20px 500px Sans-Serif      color   fff      text-align  center      padding-top  40px      wrapper  gt  main  gt  nav       position  absolute      top  0      left  0      right  0      font  20px 2 Sans-Serif      color   fff      text-align  center      background-color   FFBF00      wrapper  gt  main  gt  nav fixed       position  fixed      top  0      left  0      right  0      JS  include jquery-visible plugin     function                     Copyright 2012  Digital Fusion        Licensed under the MIT license         http   teamdf com jquery-plugins license                 author Sam Sehnert         desc A small plugin that checks whether elements are within              the user visible viewport of a web browser               only accounts for vertical position  not horizontal              var  w     window         fn visible   function partial hidden direction            if  this length  lt  1              return           var  t          this length  gt  1   this eq 0    this              t            t get 0               vpWidth      w width                vpHeight     w height                direction    direction    direction    both               clientSize   hidden     true   t offsetWidth   t offsetHeight   true           if  typeof t getBoundingClientRect      function                    Use this native browser method  if available              var rec   t getBoundingClientRect                    tViz   rec top     gt   0  amp  amp  rec top     lt   vpHeight                  bViz   rec bottom  gt   0  amp  amp  rec bottom  lt   vpHeight                  lViz   rec left    gt   0  amp  amp  rec left    lt   vpWidth                  rViz   rec right   gt   0  amp  amp  rec right   lt   vpWidth                  vVisible     partial   tViz    bViz   tViz  amp  amp  bViz                  hVisible     partial   lViz    rViz   lViz  amp  amp  rViz               if direction      both                   return clientSize  amp  amp  vVisible  amp  amp  hVisible              else if direction      vertical                   return clientSize  amp  amp  vVisible              else if direction      horizontal                   return clientSize  amp  amp  hVisible            else                var viewTop            w scrollTop                    viewBottom        viewTop   vpHeight                  viewLeft           w scrollLeft                    viewRight         viewLeft   vpWidth                  offset             t offset                     top              offset top                   bottom            top    t height                     left             offset left                   right             left    t width                    compareTop        partial     true    bottom    top                  compareBottom     partial     true    top    bottom                  compareLeft       partial     true    right    left                  compareRight      partial     true    left    right               if direction      both                   return   clientSize  amp  amp    compareBottom  lt   viewBottom   amp  amp   compareTop  gt   viewTop    amp  amp    compareRight  lt   viewRight   amp  amp   compareLeft  gt   viewLeft                else if direction      vertical                   return   clientSize  amp  amp    compareBottom  lt   viewBottom   amp  amp   compareTop  gt   viewTop                else if direction      horizontal                   return   clientSize  amp  amp    compareRight  lt   viewRight   amp  amp   compareLeft  gt   viewLeft                         jQuery      function           window  scroll function                 wrapper  gt  header   visible true                    wrapper  gt  main  gt  nav   removeClass  fixed                     wrapper  gt  main  gt  nav   addClass  fixed

User · Answer

The info provided to answer this other question may be of help to you  Evan   Check if element is visible after scrolling  You basically want to modify the style of the element to set it to fixed only after having verified that the document body scrollTop value is equal to or greater than the top of your element

User · Answer

sticky till the footer hits the div   function stickyCostSummary         var stickySummary       sticky-cost-summary        var scrollCostSummaryDivPosition     window  scrollTop        var footerHeight       footer   height        var documentHeight     document  height        var costSummaryHeight   stickySummary height        var headerHeight   83      var footerMargin   10      var scrollHeight   252      var footerPosition       footer   offset   top       if  scrollCostSummaryDivPosition  gt  scrollHeight  amp  amp  scrollCostSummaryDivPosition  lt    documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin             stickySummary removeAttr  style            stickySummary addClass  fixed           else if  scrollCostSummaryDivPosition  gt   documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin             stickySummary removeClass  fixed            stickySummary css              position     absolute              top     documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin - scrollHeight     px                  else           stickySummary removeClass  fixed            stickySummary css                position     absolute                top     0                        window scroll stickyCostSummary

User · Answer

Here s one more version to try for those having issues with the others  It pulls together the techniques discussed in this duplicate question  and generates the required helper DIVs dynamically so no extra HTML is required   CSS    sticky   position fixed  top 0      JQuery   function make sticky id        var e     id       var w     window           lt div  gt    insertBefore id           lt div  gt    hide   css  height  e outerHeight    insertAfter id       var n   e next        var p   e prev        function sticky relocate           var window top   w scrollTop          var div top   p offset   top        if  window top  gt  div top            e addClass  sticky            n show            else           e removeClass  sticky            n hide                      w scroll sticky relocate       sticky relocate        To make an element sticky  do   make sticky   sticky-elem-id      When the element becomes sticky  the code manages the position of the remaining content to keep it from jumping into the gap left by the sticky element  It also returns the sticky element to its original non-sticky position when scrolling back above it

[javascript] How can I make a div stick to the top of the screen once it's been scrolled to?

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to scroll

Examples related to positioning