jQuery fixed div

[bigheadedd]

Hi,

 

I'm having a little trouble trying to force a div to the bottom of the screen.

What i'm effectively trying to do is make a div with a fixed position of bottom: 0, but when going past a certain point, it stays there.

 

For example, I have a div on the left/top with a height of 400 pixels, and the div I want to fix at the bottom is 400 pixels high. When I scroll down, the div at the bottom would be at the bottom, but when scrolling up, the top of that bottom div would 'stick' to the bottom of the top div (like being relative rather than fixed).

 

I came across this plugin for jQuery

 

http://www.chmoddesign.com/testbed/jquery/scrollToFixed/scrollExample.html

 

It works really well, however they only give examples of headers or items on the top of the page. Theres nothing that does it from the bottom.

 

I've tried using this code:

 

$(document).ready(function() {
    $('#image').scrollToFixed({ marginBottom: 10 });
});

 

But no luck unfortunately. If anyone could shed some light on this, that'd be great!

 

Thanks,

 

Edd

[ZulfadlyAshBurn]

you should have this code

 

try this.

<script>
/* jquery.scrollToFixed * code copyright 2010 David Vedder / changeMode design */
(function(a){a.fn.scrollToFixed=function(b){b=b||0;return this.each(function(){if(!(a.browser.msie&&parseInt(a.browser.version,10)<=6)){var e=5,f=window.innerHeight||a(window).height(),i=a(this),h=a(window),n=a(document),j=i.offset().top,l=i.offset().left,k=parseInt(i.css("margin-top"),10),d=parseInt(i.css("margin-left"),10),o=i.width(),m=j-k-b,c=l-d,g=0+b;if(isNaN(k)){k=e}if(isNaN(d)){d=e}if(i.height()<f){h.scroll(function(){var p=n.scrollTop();if(p>=m){if(i.css("position")!=="fixed"){i.css({position:"fixed",top:g,left:c,width:o})}}else{if(i.css("position")!=="relative"){i.css({left:"0",position:"relative",top:0})}}})}}})}}(jQuery));

    jQuery( function(){
       jQuery( '#image' ).scrollToFixed();
    });
</script>

[bigheadedd]

Hi,

 

Thanks for the code, it made it work by sticking the div to the top of the page after moving past the top div, however i'm in need of it sticking to the bottom of the page. Any ideas?

 

Thanks!

Edd

[AyKay47]

once you have the plugin code you can actually modify the positioning in the code. perhaps make another plugin and name the function something else for the bottom fixed positioned div. It looks like the code governing the position is at the end of the code..

[ZulfadlyAshBurn]

why no use this.

<style>
.sticky {
position:fixed;
bottom:0px;
padding: 5px;
}
</style>
<div class="sticky">
content
</div>

that way it would stay at the bottom no matter what.

[AyKay47]

why no use this.

<style>
.sticky {
position:fixed;
bottom:0px;
padding: 5px;
}
</style>
<div class="sticky">
content
</div>

that way it would stay at the bottom no matter what.

because I believe that he wants it to scroll until it gets to the bottom.. like the one at the top does.. however OP if this is incorrect.. yes you can simply set the div to position:fixed with bottom:0px and left: 0px