• 0

[jquery/css] Replicate something similar to this sticky div/menu as seen on


Question

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.com/apps/2011/10/19/black-pixel-buys-versions-and-kaleidoscope-after-sofa-acquired-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

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

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="https://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>

Link to comment
Share on other sites

  • 0

Entire example

<!DOCTYPE html>
<html>
<head>
	<script src="https://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>

  • Like 2
Link to comment
Share on other sites

This topic is now closed to further replies.