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> Link to comment https://forums.phpfreaks.com/topic/268134-jquery-floating-div-with-window-scroll-issues/ 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 Link to comment https://forums.phpfreaks.com/topic/268134-jquery-floating-div-with-window-scroll-issues/#findComment-1381932 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.