Jump to content



Photo
floating div css html jquery hidden div sticky nav sticky div

  • Please log in to reply
3 replies to this topic

#1 team_NOOB

team_NOOB

    Neowinian

  • Joined: 04-September 06
  • Location: Sydney, Australia

Posted 07 November 2011 - 00:25

Hey guys,


There is some cool functionality on the TNW that has a div/menu visible about a third of the page down, that sticks to the top of the site once the users scrolls past that point.

You can see it in action here:


http://thenextweb.co...ed-by-facebook/


I could have sworn I've seen a tutorial somewhere but I'm having some trouble finding it again - been searching, sticky nav, hidden sticky nav etc. I suppose I could just look at the TNW site and see how they have done it, but looking to learn for myself.


Has anyone seen or know of something similar?


Thanks,
Ben


#2 nub

nub

    Neowinian Senior

  • Joined: 19-November 06
  • Location: Amerika

Posted 07 November 2011 - 01:15

Just looking at a few jquery functions I threw this together. Might not be the best solution. When its triggered you switch the div to absolute positioning.

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
<div style="background: #ccc; height: 100px; padding: 20px;">
    Spacing
</div>

<div style="background: #999; padding:10px;" id="some_id">
	Untriggered
</div>

<div style="background: #ccc; height: 2500px; padding: 20px;">
    Spacing
</div>

<script>
	$(window).scroll(function () {
		var div = $("#some_id");
		var position = div.offset();
		var scrollTop = $(window).scrollTop();
		
		if(scrollTop >= position.top) {
			$(div).text( "Triggered" );
		} else {
			$(div).text( "Untriggered" );
		}
	});
</script>

</body>
</html>


#3 nub

nub

    Neowinian Senior

  • Joined: 19-November 06
  • Location: Amerika

Posted 07 November 2011 - 03:39

Entire example

<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<div style="width: 960px; margin: 0 auto;">
		<div style="background: #ccc; height: 100px; padding: 20px;">
			Spacing
		</div>
		
		<div style="height: 35px;">
			<div style="background: #999; height: 35px; width: 960px; top: 0;" id="some_id">
					Untriggered
			</div>
		</div>
		
		<div style="background: #ccc; height: 2500px; padding: 20px;">
			Spacing
		</div>
	</div>
	
	<script>
		var div = $("#some_id");
		var position = div.offset();
	
		$(window).scroll(function () {
			    if($(window).scrollTop() >= position.top) {
						$(div).text( "Triggered" );
						$(div).css( { position: 'fixed' });
				} else {
						$(div).text( "Untriggered" );
						$(div).css( { position: 'static' });
				}
		});
	</script>
</body>
</html>


#4 OP team_NOOB

team_NOOB

    Neowinian

  • Joined: 04-September 06
  • Location: Sydney, Australia

Posted 07 November 2011 - 23:31


Dude - thanks so much man. Really appreciate that. Just threw it into jsfiddle and it worked straight away.


Thanks again,
Ben



Click here to login or here to register to remove this ad, it's free!