Welcome Guest [Log In] [Register]
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
#sidebar position:fixed at certain scrolling
Topic Started: Aug 7 2014, 10:03 AM (459 Views)
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
So I'm working on my own theme for The Nerd Domain and I've gotten myself stuck. Here's a diagram I made that represents the theme

Posted Image

My aim is to have the sidebar as it is in the diagram but once it reaches the top of the window (when the user scrolls down), it changes to `position:fixed` and changes `margin-top:0`. I've looked at a tutorial online to this and learned that `position:absolute` may be useful but I have honestly no clue how to do this so any help would be useful. If you need a bit more detail on what I mean because you don't understand that please do ask :)

Any help would be appreciated.
Offline Profile Quote Post Goto Top
 
Ferby
Member Avatar
Developer
[ *  *  *  *  * ]
You may remove this now. The people at Stack Overflow helped me and I managed to create this...
Code:
 
<script type="text/javascript">
$(function() {

var sidebar = $("#sidebar"),
offset = sidebar.offset().top, // height of #logo
$window = $(window);

$window.scroll(function() {
if($window.scrollTop() > offset) {
sidebar.css("margin-top",0);
}
else sidebar.css("margin-top",75);
});

});
</script>
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · ZetaBoards - Theme & Code Support · Next Topic »
Add Reply