Stopping fixed position scrolling at a certain point

Question

I have an element that is position fixed and so scrolls with the page how i want it to however  when the user scrolls up I want the element to stop scrolling at a certain point  say when it is 250px from the top of the page  is this possible  Any help or advice would be helpful thanks   I had a feeling that I would need to use jquery to do so  I tried getting the scrolling or location of the where the user is but got really confused  is there any jquery solutions

User · Answer

A possible CSS ONLY solution can be achived with position  sticky   The browser support is actually really good  https   caniuse com  search position 3A 20sticky  here is an example  https   jsfiddle net 0vcoa43L 7

User · Answer

Just improvised mVChr code      sidebar   css  position    fixed        var windw   this         fn followTo   function pos            var  this   this                   window     windw             window scroll function e                if   window scrollTop    gt  pos                    topPos   pos      this  height                     this css                       position   absolute                       top  topPos                                   else                    this css                       position   fixed                       top  250   set your value                                                           var height      body   height   -     footer   height             sidebar   followTo height           sidebar   scrollTo    html   offset   top

User · Answer

Here s a quick jQuery plugin I just wrote that can do what you require     fn followTo   function  pos        var  this   this           window     window         window scroll function  e            if   window scrollTop    gt  pos                 this css                   position   absolute                   top  pos                           else                this css                   position   fixed                   top  0                                           yourDiv   followTo 250     See working example   x2192

User · Answer

I wrote a blog post about this that featured this function     fn myFixture   function  settings      return this each function              default css declaration      var elem     this  css  position    fixed         var setPosition   function                     var top   0           get no of pixels hidden above the the window            var scrollTop     window  scrollTop                 get elements distance from top of window       var topBuffer     settings topBoundary    0  - scrollTop            update position if required       if  topBuffer  gt   0    top    topBuffer         elem css  top   top                       window  bind  scroll   setPosition       setPosition

User · Answer

I loved  james answer but I was looking for its inverse i e  stop fixed position right before footer  here is what I came up with  var  fixed element       some element   if  fixed element length           var  offset       footer   position   top               wh     window  innerHeight                 diff    offset -  wh               scrolled     window  scrollTop             fixed element css  bottom   Math max 0   scrolled- diff            So now the fixed element would stop right before footer  and will not overlap with it

User · Answer

In a project  I actually have some heading fixed to the bottom of the screen on page load  it s a drawing app so the heading is at the bottom to give maximum space to the canvas element on wide viewport    I needed the heading to become  absolute  when it reaches the footer on scroll  since I don t want the heading over the footer  heading colour is same as footer background colour    I took the oldest response on here  edited by Gearge Millo  and that code snippet worked for my use-case  With some playing around I got this working  Now the fixed heading sits beautifully above the footer once it reaches the footer   Just thought I d share my use-case and how it worked  and say thank you  The app  http   joefalconer com web projects drawingapp index html         CSS         media screen and  min-width  1100px             heading               height  80px              width  100               position  absolute      heading is  absolute  on page load  DOESN T WORK if I have this on  fixed                 bottom  0                          jQuery        Stop the fixed heading from scrolling over the footer       fn followTo   function  pos          var  this   this         window     window           window scroll function  e            if   window scrollTop    gt  pos               this css    position   absolute   bottom   -180px                 else              this css    position   fixed   bottom   0                                         This behaviour is only needed for wide view ports     if       heading   css  position        absolute                heading   followTo 180

User · Answer

Here is a complete jquery plugin that solves this problem   https   github com bigspotteddog ScrollToFixed  The description of this plugin is as follows   This plugin is used to fix elements to the top of the page  if the element would have scrolled out of view  vertically  however  it does allow the element to continue to move left or right with the horizontal scroll   Given an option marginTop  the element will stop moving vertically upward once the vertical scroll has reached the target position  but  the element will still move horizontally as the page is scrolled left or right  Once the page has been scrolled back down past the target position  the element will be restored to its original position on the page   This plugin has been tested in Firefox 3 4  Google Chrome 10 11  Safari 5  and Internet Explorer 8 9   Usage for your particular case    lt script src  scripts jquery-1 4 2 min js  type  text javascript  gt  lt  script gt   lt script src  scripts jquery-scrolltofixed-min js  type  text javascript  gt  lt  script gt     document  ready function             mydiv   scrollToFixed   marginTop  250

User · Answer

I adapted  mVchr s answer and inverted it to use for sticky ad positioning  if you need it absolutely positioned  scrolling  until the header junk is off screen but then need it to stay fixied visible on screen after that     fn followTo   function  pos        var stickyAd     this       theWindow     window         window  scroll function  e          if    window  scrollTop    gt  pos            stickyAd css   position    fixed   top    0             else           stickyAd css   position    absolute   top   pos                               sticky-ad   followTo 740     CSS    sticky-ad       float  left      display  block      position  absolute      top  740px      left  -664px      margin-left  50       z-index  9999

User · Answer

A Solution using Mootools Framework   http   mootools net docs more Fx Fx Scroll   Get Position x  amp  y  of the element where you want to stop the scroll using    myElement   getPosition   x     myElement   getPosition   y For a animation sort of scroll use    new Fx Scroll  scrollDivId    offset   x  24 y  432     toTop    To just set scroll immediately use    new Fx Scroll myElement  set x y     Hope this Helps     D

User · Answer

You can do what James Montagne did with his code in his answer  but that will make it flicker in Chrome  tested in V19    You can fix that if you put  margin-top  instead of  top   Don t really know why it works with margin tho     window  scroll function            theFixed   css  margin-top  Math max -250 0-  this  scrollTop            http   jsbin com idacel

User · Answer

my solution     window  scroll function            if   this  scrollTop   gt 425                    theRelative   css  margin-top    this  scrollTop  -425                   else                       theRelative   css  margin-top    this  scrollTop  -0

User · Answer

Do you mean sort of like this   http   jsfiddle net b43hj     window  scroll function            theFixed   css  top   Math max 0  250 -   this  scrollTop             x000D   x000D    window  scroll function    x000D          theFixed   css  top   Math max 0  100 -   this  scrollTop      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt  x000D   x000D   lt div id  theFixed  style  position fixed top 100px background-color red  gt SOMETHING lt  div gt  x000D   x000D   lt  -- random filler to allow for scrolling -- gt  x000D  STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt STUFF  lt BR gt  x000D   x000D   x000D

User · Answer

I liked this solution       window  scroll function            theFixed   css  margin-top  Math max -250 0-  this  scrollTop            my problem was that I had to deal with a position relative container in Adobe Muse   My solution     window  scroll function        if   this  scrollTop   gt 425                 theRelative   css  margin-top    this  scrollTop  -425

[jquery] Stopping fixed position scrolling at a certain point?

Examples related to jquery

Examples related to css

Examples related to positioning