jquery floating div with window scroll issues

Drongo_III · 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>

hobbiton73 · 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

Sign In

jquery floating div with window scroll issues

Recommended Posts

Drongo_III

Link to comment

Share on other sites

hobbiton73

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information