StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I don't think there's a straight way to do this...</p> <p>But here's a way.</p> <p>First, You need to be able to detect the direction of the scrolling when window.onscroll event happens. You would do this by comparing the current page offsets with the newly acquired page offsets whenever the scroll event happens. (http://stackoverflow.com/questions/1222915/can-one-use-window-onscroll-method-to-include-detection-of-scroll-direction)</p> <p>Now suppose you know the direction of the scroll, you want to change the styling for the divs depending on the direction of the scroll.</p> <p>Let <strong>FixAtX</strong> be the value of the x coordinate that you want to fix your divs at. Let <strong>OriginalY</strong> be the y coordinate of the divs. Also whenever scrolling happens, despite of the direction, you want to remember the pageoffset X and Y. Let's call them <strong>OldX</strong> and <strong>OldY</strong></p> <p>If scrolling vertically:</p> <ul> <li>Set position value for divs' style to be absolute.</li> <li>Set top value for divs' style to be <strong>OriginalY</strong></li> <li>Set left value for divs' style to be <strong>OldX + FixAtX</strong></li> </ul> <p>If scrolling horizontally:</p> <ul> <li>Set position value for divs' style to be fixed.</li> <li>set top value for divs' style to be <strong>OriginalY - OldY</strong> (<- this may be different depending on how the browser computes pageOffset value,)</li> <li>Set Left value for divs' style to be <strong>FixAtX</strong></li> </ul> <p>I think this should work... Since you are just using browser's rendering for positioning, it should be very smooth!</p> <p>hope I understood the question correctly.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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