bigheadedd Posted October 27, 2011 Share Posted October 27, 2011 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 Quote Link to comment https://forums.phpfreaks.com/topic/249907-jquery-fixed-div/ Share on other sites More sharing options...
ZulfadlyAshBurn Posted October 27, 2011 Share Posted October 27, 2011 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> Quote Link to comment https://forums.phpfreaks.com/topic/249907-jquery-fixed-div/#findComment-1282673 Share on other sites More sharing options...
bigheadedd Posted October 27, 2011 Author Share Posted October 27, 2011 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 Quote Link to comment https://forums.phpfreaks.com/topic/249907-jquery-fixed-div/#findComment-1282679 Share on other sites More sharing options...
AyKay47 Posted October 27, 2011 Share Posted October 27, 2011 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.. Quote Link to comment https://forums.phpfreaks.com/topic/249907-jquery-fixed-div/#findComment-1282723 Share on other sites More sharing options...
ZulfadlyAshBurn Posted October 27, 2011 Share Posted October 27, 2011 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. Quote Link to comment https://forums.phpfreaks.com/topic/249907-jquery-fixed-div/#findComment-1282730 Share on other sites More sharing options...
AyKay47 Posted October 27, 2011 Share Posted October 27, 2011 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 Quote Link to comment https://forums.phpfreaks.com/topic/249907-jquery-fixed-div/#findComment-1282734 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.