Sticky Div

**gemzilla** · 09-02-2014, 01:42 PM

I am trying to produce a sticky side menu for a page on my website ( http://familyfostering.ismywebsite.co.uk/fosterwith.php ) and using a tutorial from this site http://www.wduffy.co.uk/blog/keep-el...-using-jquery/

It has worked perfectly, however I need it to stop scrolling at a certain point so you can get to the bottom page, you will see what I mean on the page. Any suggestions?

JS

Code:

$().ready(function() {
		var $scrollingDiv = $("#sticker");
 
		$(window).scroll(function(){			
			$scrollingDiv
				.stop()
				.animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, "fast" );			
		});
	});

CSS

Code:

#sticker {
	width:210px;
	height:auto;
	display:block;
	float:left;
	overflow:hidden;
}

HTML

HTML Code:

<head>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type='text/javascript' src='js/js.js'></script>
</head>

<div id="main">

<div id="sticker">
<ul id="sidemenu">
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
<li><a href="#">Page</a></li>
</ul>
</div>

<!--Content-->

</div> <!--wanting the sticky div to stop at this point-->

**vwphillips** · 09-02-2014, 03:05 PM

quick fix

Code:

$().ready(function() {
		var $scrollingDiv = $("#sticker");
		$(window).scroll(function(){
			$scrollingDiv
				.stop()
				.animate({"marginTop": Math.min(($(window).scrollTop() + 0),2400) + "px"}, "fast" );
		});
	});

**Deadweight** · 09-02-2014, 03:07 PM

Damn you beat me to it

**gemzilla** · 09-02-2014, 03:36 PM

Thank you Lol.. Is it possible to not have a fixed position?

**gemzilla** · 09-02-2014, 03:44 PM

What I mean is I'm trying to get the scroll effect on a couple of pages, but with the fixed position it stops miles up the page on other pages.

**vwphillips** · 09-03-2014, 08:53 AM

with this variable top is the initial top margin of the stickey

Code:

$().ready(function() {
		var $scrollingDiv = $("#sticker");
        var top=100;
 			$scrollingDiv
				.stop()
				.animate({"marginTop": top + "px"}, "fast" );
	$(window).scroll(function(){
			$scrollingDiv
				.stop()
				.animate({"marginTop": Math.min(($(window).scrollTop() + top),2400) + "px"}, "fast" );
		});
	});

if this is not what you want please explaine further or provide an example