Jump to content

Recommended Posts

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

Link to comment
https://forums.phpfreaks.com/topic/249907-jquery-fixed-div/
Share on other sites

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>

Link to comment
https://forums.phpfreaks.com/topic/249907-jquery-fixed-div/#findComment-1282673
Share on other sites

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..

Link to comment
https://forums.phpfreaks.com/topic/249907-jquery-fixed-div/#findComment-1282723
Share on other sites

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

Link to comment
https://forums.phpfreaks.com/topic/249907-jquery-fixed-div/#findComment-1282734
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.