css question... I think

[webstudent123]

I am trying to figure out the code behind a sidebar that will scroll with the site until it hits a certain point, then stops and remains visible while the main content continues to scroll. -

Sorry I dont have an example - but any advice on how to do this or what the technique is called would be greatly appreciated. Thanks-

 

[chrishirst]

Use position: fixed

But read up on positioning first

 

[webstudent123]

Sorry, I should have been descriptive-

I know it is that it is possible to achieve something similar to this effect with the css 'fixed' positioning, but I am not sure how the element/div can begin to scroll, then hit a point at which it stops and becomes fixed...

 

[ronaldroe]

That would require javascript, which would change the value of the position property based on the distance the user has scrolled from the top.

 

[webstudent123]

Had a feelin it was javascript-

thanks again Mr. Roe!

 

[webstudent123]

How to do it

Just thought I would share this in case anyone else was interested -

http://jsfiddle.net/EahRx/

 

[webstudent123]

mod my js...

okay, so I just about have this exactly where I need it, but I need to configure it so that the sidebar begins scrolling again when the footer comes up.. I dont know too much about javascript so im not sure if I need to modify the function I have, or create a new on with '.scrollBottom' -

Here's what I got so far:

var fixed = false;

$(document).scroll(function() {
if( $(this).scrollTop() >= 145 ) {
if( !fixed ) {
fixed = true;
$('#sidebar').css({position:'fixed',top:5});
}
} else {
if( fixed ) {
fixed = false;
$('#sidebar').css({position:'absolute', top:145});
}
}
});

Thanks!

 

[ronaldroe]

There is no scrollBottom method. You'll have to add an else if and test for percentage from the top, ie 90%. Unfortunately, scrollTop can't use percent OOB, so you'll have to finagle it a bit. Here's a StackOverflow page on it: http://stackoverflow.com/questions/6736582/scroll-to-top-offset-using-percentage

 

[webstudent123]

hmm..

would this method with percentages be possible if I were using the same code on pages with different heights?

 

[webstudent123]

on second thought..

Im thinking of giving the footer a higher z-index with absolute positioning.. then the sidebar might slink behind it..

 

[ronaldroe]

It'll be a bit of a guess, and it wouldn't be consistent across the pages.

One other way you could try would be to get the height, in px of the page, subtract how far you want the trigger to happen from the bottom and set that variable as your height from the top, if that makes sense. Shouldn't be too difficult with jQuery's .height() method. I'll mess around with it and see what I can come up with.

 

[ronaldroe]

Ok, so I had to play a little and do some research, but you'll find what I believe you're looking for here: http://codepen.io/ronaldroe/pen/mjfpg

Basically, once you scroll all the way to the bottom, where the sidebar is just above the footer, it disappears. It works like so: you use a scrollTop function where you set the action to occur when scrollTop is >= the document height minus the window height. You could play with the disappear() function to make it fire sooner if you like by subtracting even more from the height.

 

[webstudent123]

Wow-

Thanks a mil for this. I am working on this at my day job and we are nearing completion of a new design that I am hoping to go live with soon. Boss is saying just to make the footer tiny.. Anyhow I have tried to implement your JS code but I can firgure out quite how to adjust the height element to account for 300px tall footer...

<script>
var fixed = false;

$(document).scroll(function() {
if( $(this).scrollTop() >= 471 ) {
if( !fixed ) {
fixed = true;
$('#dancelessonfix').css({position:'fixed',top:5});
}
} else {
if( fixed ) {
fixed = false;
$('#dancelessonfix').css({position:'absolute', top:471});
}
}
});

var disappear = function(){
return $(document).height() - $(window).height();
};

$(function(){
$(window).scroll(function(){
if($(this).scrollTop() >= disappear()){
$('.#dancelessonfix').fadeOut();
}
else{
$('.#dancelessonfix').fadeIn();
}
});
});

</script>


I cant express how greatful I am for your help! I'm starting to see how JS works!

 

[webstudent123]

also

It's actually not too bad when I absolute position the footer with a higher z-index- side bar goes behind it, plus the footer has a nice drop shadow that overlays the sidebar for a neat effect-