Jump to content

Question

Posted

Hey guys,


There is some cool functionality on the [url="http://thenextweb.com"]TNW[/url] 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:


[url="http://thenextweb.com/apps/2011/10/19/black-pixel-buys-versions-and-kaleidoscope-after-sofa-acquired-by-facebook/"]http://thenextweb.com/apps/2011/10/19/black-pixel-buys-versions-and-kaleidoscope-after-sofa-acquired-by-facebook/[/url]


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

Share this post


Link to post
Share on other sites

3 answers to this question

  • 0

Posted

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.

[code]<!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>[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted

Entire example

[code]<!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>[/code]
2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted

[quote name='nub' timestamp='1320637174' post='594436721']
[/quote]

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


Thanks again,
Ben

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.