• Tweet

• Tweet

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.

1. Persisting Single Element  on page scroll
2. 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

<h1 id="independent-detach">Independent detached element</h1>
<div style="height:1200px">
<br>&nbsp;
</div>
<p>Scroll down and see how above header stays there (its an example only).</p>

The CSS

There is only one class thats required. You can also opt for jQuery(Element).css() if you like.

.detached-independent {
    position: fixed;
    top:0;
 }

The jQuery Code

$(window).load(function(){ 
       // get the current offset of the element in question 
       var offset = jQuery("#independent-detach").offset().top - parseFloat(jQuery("#independent-detach").css('margin-top').replace(/auto/, 0));
       $(window).scroll(function(){      
              if (jQuery(window).scrollTop() >= offset) {        
                  jQuery("#independent-detach").addClass('detached-independent');
                 } 
                 else { 
                  jQuery("#independent-detach").removeClass('detached-independent');
                 };
       });
     });

Above example is pretty straight forward for me to try to explain whats happening. Here is a  demo for you to try

Demo

http://jaspreetchahal.org/examples/jquery-examples/detach-div-single.html

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

<article class="detach-container">
   <h2 class="detach">This will be detached once your scroll position reach here</h2>
</article>

Couple of things to note here. First, we have class name detach-container added to the parent Element. In our case it is article and if you noticed I added class detach to the child element We wanted to detach while user scrolls.

We did this because this way we always know when to show or hide our Detached element. Idea is to show it only while the article area is visible to the user

Lets go ahead and check the CSS

The CSS

.detached {
    position: fixed;
    top: 0;
    visibility: hidden;
  }

Just one class as you can see. As I said before its upto you to decide if you want to do it the Class way or inline way.

lets check out the jQuery code

The jQuery

$(window).load(function(){
        $(".detach-container").each(function() {
         var elduplIcate = $(".detach", this);
         elduplIcate
         .before(elduplIcate.clone())
         .css("width", elduplIcate.outerWidth())
         .addClass("detached");
       });
     })
     .scroll(function(){
          jQuery(".detach-container").each(function() {       
               detached = jQuery(".detached", this);
               if ((jQuery(window).scrollTop() > jQuery(this).offset().top) 
                    && (jQuery(window).scrollTop() < jQuery(this).offset().top + jQuery(this).outerHeight())) {
                detached.css({
                              "visibility": "visible"
                            });
               } 
               else {
                detached.css({
                              "visibility": "hidden"
                            });      
               };
          });
     });

Alright so the above code is straight forward too. We are cloning the elements we want to detach on window.load and putting them in visibility state of hidden and once the use pass the original element we just show the cloned element till the height of the parent element In our case its article

The demo

Here is a quick demo for you to check out

http://jaspreetchahal.org/examples/jquery-examples/detach-div.html

Notice the table headers and article headings getting detached while you scroll.

I hope this helps

If you have better solution please share using comments.

Cheers

If you find any error in above write up please let me know

Thanks