Hello everyone make sure to stop by and introduce yourself and do check out our design and programming sections.
Visit the Den and get some free stuff!

You are not connected. Please login or register

jQuery - Traveling Sidebar Script

View previous topic View next topic Go down  Message [Page 1 of 1]

1 jQuery - Traveling Sidebar Script on Tue Feb 17, 2015 5:31 pm

Bricyn

avatar

Forum Programmer
Forum Programmer
Figured since I registered I should at least contribute once, here's a script I wrote to enable a sidebar on a site written for a college project to travel up and down the page with the user. This is just used with a floated element, I used the aside element and floated it next to the main element.

You can see it in practice here: http://abelnet.net/web3/cfnorg/
Code:

<style>
    aside{
        transition: all 0.4s ease;
}
</style>

<script>
$(document).ready(function() {
 // Prepare the original position inside a variable.
 var tOrigin = $('aside').offset()
 // Bind an anonymous function to the browser scroll event.
 $(window).bind('scroll', function(){
 if ($(window).scrollTop() > $('#headerWrapper').height()) {
 var tPos = $(window).scrollTop() + 25;
 $('aside').offset({top: tPos})
 } else {
 $('aside').offset({top: tOrigin.top})
 }
 });
});
</script>


Should note that this requires jquery on the website its used on.



Last edited by Bricyn on Wed Feb 18, 2015 11:57 pm; edited 1 time in total

View user profile http://abelnet.net

2 Re: jQuery - Traveling Sidebar Script on Tue Feb 17, 2015 6:36 pm

george

avatar

Admin
Admin
@Bricyn Very Nice!

View user profile http://gareygraphics.com

View previous topic View next topic Back to top  Message [Page 1 of 1]

Share this topic!

URL Direct
BBcode
HTML
jQuery - Traveling Sidebar Script

Permissions in this forum:
You cannot reply to topics in this forum