Log in

View Full Version : 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-element-in-view-while-scrolling-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


$().ready(function() {
var $scrollingDiv = $("#sticker");

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


CSS


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


HTML


<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



$().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


$().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