Databases
StackOverflow2013
Postsdbo
POKeep element in view when scrolling, but stop it once it 'collides' with another specified element, using jQuery
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POKeep element in view when scrolling, but stop it once it 'collides' with another specified element, using jQuery
    primarykey
    data
    text
    <p>I have seen this effect on a few sites ( <a href="http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/" rel="nofollow">CSS Wizardry</a> - watch the logo/nav ) where an element stays in view while scrolling down the page (this is not the hard part) &amp; then stops scrolling when it 'collides' (for want of a better word) with a specified element (the hard part).</p> <p>I have found two plugins that aim to do just this but do not have all the functionality I need:</p> <p><strong>1. jQuery lockScroll</strong> <a href="http://www.anthonymclin.com/code/7-miscellaneous/108-jquery-lockscroll-13" rel="nofollow">http://www.anthonymclin.com/code/7-miscellaneous/108-jquery-lockscroll-13</a></p> <p>This forces the desired element to have position fixed to begin with, which could mean that if the element starts below the fold, it is never seen. (Demo: <a href="http://www.anthonymclin.com/media/demos/jquery.lockScroll.1.3/" rel="nofollow">http://www.anthonymclin.com/media/demos/jquery.lockScroll.1.3/</a>)</p> <p><strong>2. jQuery fixedScroll</strong> Used on <a href="http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/" rel="nofollow">CSS Wizardry</a></p> <p>This forces position fixed again &amp; it needs a top offset in order to work. This offset is applied on DOMReady &amp; moves the element if it is not at that position - it is the offset used when scrolling.</p> <p>Plugins that I am aware of that do not produce the desired effect:</p> <ul> <li><a href="https://github.com/dutchcelt/Keep-in-View" rel="nofollow">https://github.com/dutchcelt/Keep-in-View</a></li> <li><a href="http://imakewebthings.github.com/jquery-waypoints/sticky-elements/" rel="nofollow">http://imakewebthings.github.com/jquery-waypoints/sticky-elements/</a></li> </ul> <p><strong>I need to be able to have the best of both worlds &amp; unfortunately, I am unable to do that myself, does anyone know of a plugin that I haven't listed or knows a way to modify another?</strong></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USZander
    1. USZander
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POKeep element in view when scrolling, but stop it once it 'collides' with another specified element, using jQuery
      1. USZander
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload