StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If you set the <strong>position</strong> element of the "step" and "content" classes you created to <strong>inherit</strong>, you can detect whether or not a particular content section is in view of the client window.</p> <h2>CSS</h2> <pre><code>.step, .content { position: inherit !important; } </code></pre> <h2>jQuery sample 1</h2> <pre><code>var diff = $('#content1').position().left - $(window).scrollLeft(); if ( diff <= 0 ) { $(".wrapper").css('background','url(img/naboutus.png) 95% top no-repeat fixed'); } </code></pre> <p>When the "diff" value above reaches 0, that means that the left side of div#content1 is touching the left side of the client's browser. When the value drops below zero, it means that the left side of the div is beginning to be hidden from the client's window.</p> <p>You could then use the width of the client's browser to determine when to switch the wrapper's background image.</p> <h2>jQuery Sample 2</h2> <pre><code>var diff = $('#content2').position().left - $(window).scrollLeft(); var windowWidth = $(window).width(); var content2Width = $('#content2').width(); if ( ( diff - ( windowWidth - content2Width ) ) <= 0 ) { $(".wrapper").css('background','url(img/nwhatwedo.png) 95% top no-repeat fixed'); } </code></pre> <p>So, I'm thinking that if the width of the content div is greater than the client window, the above condition will essentially make sure that the user moves the scroll bar by that incremental amount, before the background image will change. You could adjust the logic to change the image earlier in the scrolling process...</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