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