persisting DIV on scroll with jQuery

Hello, I sometimes find it interesting why many sites want to persist some HTML container while user scrolls. By persisting what I mean to say is that say you got a very useful navigation that applies to a subsection of your page and you want to detach it somehow so that user don't have to scroll up to access it again. This is exactly what I will be showing you today. Idea is simple and we will make use of our friendly jQuery function called scrollTop() There are two things I want to show you today. Persisting Single Element  on page scroll Persisting section headers Detaching single Element by ID By this what I mean is that we will be detaching one single element when user scroll reach that element. Ok so lets check out what need to be done The HTML This is not a full page HTML so for demo purposes this should be enough [geshi lang="html5" nums="1" target="_self" ] [crayon-600281685d67b629383765/] [crayon-600281685d683240010502/] The CSS There is only one class thats required. You can also opt for jQuery(Element).css() if you like. [geshi lang="css" nums="1" target="_self" ] [crayon-600281685d685747892308/] The jQuery Code [geshi lang="jquery" nums="1" target="_self" ]   [crayon-600281685d686801067014/] Above example is pretty straight forward for me to try to explain whats happening. Here is a  demo for you to try   Demo Persisting section headers This is a little bit trickier. I came up with a solution and did some research to see how others do it. I then modified my code a little bit to come up with this. Lets check out the required HTML, CSS and jQuery code required for sectioned header persistence The HTML Rather than making it full page HTML lets keep it simple to this [crayon-600281685d687890507273/] Couple of things to note here. First, we have class name detach-container added to the parent … [Read more...]