I was in the middle of writing up a long description of what I wanted to do, when I realized that the "How To Ask / Format" sidebar box on this very same "Ask A Question" page does exactly what I want.
Basically, it scrolls up and down in unison with the rest of the screen, staying top-aligned with the main section, unless the main section starts to scroll off the top of the visible window. At that point, the sidebar box stops scrolling, and starts to act as if its positioned absolutely, against the top of the visible window.
I've tried digging into source code and scripts on this "Ask" screen, but there's so much going on that it's pretty much impossible (for me, at least). I'm assuming that jQuery actually makes this kind of thing pretty straightforward, but I'm new to it, so I'm having a hard time figuring it out for myself. (And if this turns out to be a common question, my apologies -- I've been searching for about an hour, but there are so many closely-worded jQuery questions that I haven't been able to dig up an answer.)
Thanks in advance for any help.
You need to put position: fixed; on the div element. That will anchor it to the viewport.
To know whether the element is fully visible in viewport, you will need to check whether top >= 0, and bottom is less than the screen height. In a similar way you can also check for partial visibility, top is less than screen height and bottom >= 0. The Javascript code could be written as : window.
jQuery scroll() MethodThe scroll event occurs when the user scrolls in the specified element. The scroll event works for all scrollable elements and the window object (browser window). The scroll() method triggers the scroll event, or attaches a function to run when a scroll event occurs.
The scrollTo method: The scrollTo() is used to scroll to the specified element in the browser.
This is an example for a shoppingcart Apple has on the Applestore Page.
The logic:
The jQuery:
$(document).ready(function() {
// check where the shoppingcart-div is
var offset = $('#shopping-cart').offset();
$(window).scroll(function () {
var scrollTop = $(window).scrollTop(); // check the visible top of the browser
if (offset.top<scrollTop) $('#shopping-cart').addClass('fixed');
else $('#shopping-cart').removeClass('fixed');
});
});
The CSS:
.fixed {
position: fixed;
top: 20px;
margin-left: 720px;
background-color: #0f0 ! important; }
example Link
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With