StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery - how to make a fixed div scroll horizontally after scrolling vertically
text
Body
copied!<p>This is kind of a variation of the following, but a little different: <a href="https://stackoverflow.com/questions/4676131/how-do-i-get-a-fixed-position-div-to-scroll-horizontally-with-the-content-using">How do I get a fixed position div to scroll horizontally with the content? Using jQuery</a></p> <p>Here is my variation: <a href="http://jsfiddle.net/Bdwc4/" rel="nofollow noreferrer">http://jsfiddle.net/Bdwc4/</a></p> <p>Basically, I would like to be able to see that "x" on the far right of the div, and in order to do so, the div must be absolute. But at the same time, I need the div to be fixed when scrolling vertically. In other words, you should always be able to see the "x" in that fixed position, while scrolling vertically or horizontally. It kind of does what I want it to do, but only when you're at the top of the window. I'd like to be able to scroll horizontally, regardless of where you scroll vertically.</p> <p>If you choose not to use jsfiddle above, here is the code I'm using:</p> <pre><code><style> .scroll_fixed { left:500px; position:absolute } .scroll_fixed.fixed { position:fixed } .x { float:right } .foo { background-color: red; width: 150px; height:150px; left:500px } body { width: 500px } .header { margin-top: 100px } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script> $(window).scroll(function(event) { var x = 0 - $(this).scrollLeft(); var y = $(this).scrollTop(); // whether that's below the form if (y) { // if so, ad the fixed class $('.scroll_fixed').addClass('fixed'); } else { // otherwise remove it $('.scroll_fixed').removeClass('fixed'); } }); </script> <div class="header"></div> <div class="scroll_fixed foo"><div class="x">x</div></div> <div> Enter a very long string of text </div> </code></pre> <p>After you enter in the code, shrink the browser window horizontally and vertically until the "x" in the red box is out of view, which will force you to scroll horizontally to see it, and while you scroll vertically, the red box should be in a fixed position.</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