Drongo_III Posted September 7, 2012 Share Posted September 7, 2012 Hi Guys I hope someone can help with this as I have been banging my head against the wall for three hours and nothing is working :/ Here's what I am trying to do. I have a div that moves with the scroll bar but I want to constrain it to certain dimensions so it can't overlap the footer or header. This semi works but... There are two issues: 1) If I scroll down to the bottom abruptly then the scrolling div simply zooms to the bottom and seems to completely bypass the evaluation of it's position that happens in: if(elementOffset.top > maxScroll){ scrollTopVar = maxScroll -1; //set to -1 to stop this evaluating to true on next scroll } 2) Then when i do scroll down slowly, and the evaluation works, the scrolling div simply gets stuck in the position set in the code above - even though it shouldn't evaluate to true because it's actually one less than the max scroll allowed. Anyway here is the simplified code and I am sure someone better at jquery will instantly point out how easy this can be... <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB" lang="en-GB"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Slide Div</title> <script type="text/javascript" src="jquery1.8.js"></script> <script> $(document).ready(function(){ var windowHeight = $(window).height(); var docHeight = $(document).height(); var headHeight = 85; //px value for header height - this will be dynamic var footHeight = 400; //px value for footer height - this will be dynamic var currentPos = 30; // This is just a padding value used in the animation so animated div has breathing space from window top var elementHeight = $('#scrollingDiv').height(); //Dynamically get height of scrolling div var maxScroll = docHeight - (80 + 400 + elementHeight); //sets max allowed scrolling limit. var scrollingDiv = $("#scrollingDiv"); // selector for scrolling div // alert(maxScroll); $(window).scroll(function () { var scrollTopVar = $(window).scrollTop(); // defines scrolled distance -i.e. whats slipped under top nav window var elementOffset = $('#scrollingDiv').offset(); //defines the distance to the top of the document from the scrolling element top // First check to see if scroll bar is at top. if(scrollTopVar == 0){ currentPos = 0; } else{ currentPos = 30; } if(elementOffset.top > maxScroll){ scrollTopVar = maxScroll -1; //set to -1 to stop this evaluating to true on next scroll } if(elementOffset.top < maxScroll){ scrollTopVar = $(window).scrollTop(); } // Then based on the evaluation above animate the div scrollingDiv.stop(true).animate({"marginTop": (scrollTopVar + currentPos) + "px"}, "slow" ); }); }); </script> <style type="text/css"> #header {width: 100%; height: 80px; border: 2px dashed red;} #scrollingDiv {width: 300px; min-height: 300px; border: 2px dashed #000; position: absolute; z-index: 100; left: 0px; top: 90px;} #content {height: 1200px; width: 100%;} #footer {height: 400px; width: 100%; border: 2px dashed green;} </style> </head> <body> <div id="header"></div> <div id="scrollingDiv"> <h3>I AM THE SLIDING DIV ME</h3> </div> <div id="content"></div> <div id="footer"></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
hobbiton73 Posted September 30, 2012 Share Posted September 30, 2012 Hi, firstly I am by no means an expert when it comes to this. But I was trying to do something similar for my current project. I, probably like yourself, did a lot of searching and found this http://www.profilepicture.co.uk/sticky-sidebar-jquery-plugin/. I'm not sure whether this is of any use, but I've found it to be a really useful plugin. My apologies If I've misunderstood what you're trying to achieve, but I hope this may help. Many thanks and kind regards Quote Link to comment 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.