You are here:

Javascript/Persistent Header and Close Div

Advertisement


Question
QUESTION: I have a page that I would like to be able to use a persistent header along with click on div, open it, close others. When I scroll down with the persistent header I want to be able to click on the header and have the div close. But right now I open it and it closes, then bounces back up. I have this html

<div>
   <section>
       <h2 class="actog">Header</h2>
       <div class="accon">
         04/01/13
         04/02/13
         04/03/13
         04/04/13
         04/05/13
         04/06/13
         04/07/13
         04/08/13
         04/09/13
         04/10/13
         04/11/13
         04/12/13
         04/13/13
         04/14/13
         04/15/13
         04/16/13
         04/17/13
         04/18/13
         04/19/13
         04/20/13
         04/21/13
         04/22/13
       </div>
   </section>
   <section>
       <h2 class="actog">Different Header</h2>
       <div class="accon">
         04/01/13
         04/02/13
         04/03/13
         04/04/13
         04/05/13
         04/06/13
         04/07/13
         04/08/13
         04/09/13
         04/10/13
         04/11/13
         04/12/13
         04/13/13
         04/14/13
         04/15/13
         04/16/13
         04/17/13
         04/18/13
         04/19/13
         04/20/13
         04/21/13
         04/22/13
       </div>
   </section>
   <section>
       <h2 class="actog">Another Header</h2>
       <div class="accon">
         04/01/13
         04/02/13
         04/03/13
         04/04/13
         04/05/13
         04/06/13
         04/07/13
         04/08/13
         04/09/13
         04/10/13
         04/11/13
         04/12/13
         04/13/13
         04/14/13
         04/15/13
         04/16/13
         04/17/13
         04/18/13
         04/19/13
         04/20/13
         04/21/13
         04/22/13
       </div>
   </section>
</div>

This CSS

.actog {
   color:black;
   margin:5px 0;
   padding:5px;
   width:100%;
   height:auto;
   background-color:green;
   -webkit-transition: .25s;
   -moz-transition: .25s;
   -o-transition: .25s;
   -ms-transition: .25s;
}
.actog:hover, .active{
   cursor:pointer;
   text-decoration:underline;
   color:#ff385b;
   background-color:pink;
}
.accon{padding:5px 0;}
.floatingHeader {
   position: fixed;
   margin-top: 0;
   top:0;
   visibility: hidden;
}

And these two snippets of javascript

jQuery(document).ready(function() {
       jQuery(".actog").siblings(".accon").hide();
       jQuery(".actog").click(function() {
         $('.active').not(this).toggleClass('active').siblings('.accon').slideToggle(500);
         $(this).toggleClass('active').siblings().slideToggle(400);
       });
   });

function UpdateTableHeaders() {
      $(".main div section").each(function() {

         var el          = $(this),
         offset         = el.offset(),
         scrollTop      = $(window).scrollTop(),
         floatingHeader = $(".floatingHeader", this)

         if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {
         floatingHeader.css({
         "visibility": "visible"
         });
         } else {
         floatingHeader.css({
         "visibility": "hidden"
         });      
         };
      });
   }

   // DOM Ready      
   $(function() {

      var clonedHeaderRow;

      $(".main div section").each(function() {
         clonedHeaderRow = $(".actog", this);
         clonedHeaderRow
         .before(clonedHeaderRow.clone())
         .css("width", clonedHeaderRow.width())
         .addClass("floatingHeader");

      });

      $(window)
       .scroll(UpdateTableHeaders)
       .trigger("scroll");

   });
http://jsfiddle.net/4m2KZ/3/

ANSWER: Hi Cody,

Thanks for your question.

The problem was that when you cloned each H2, the clone also got the click event of the original H2, so when the clone with the fixed position is clicked, the event you want fires twice.

Here is a JS-Fiddle with a few changes added that fixes the problem:

http://jsfiddle.net/kHPSA/

My solution is not very elegant, but it works. All changes pare preceded by: //NEW (or <!-- NEW -->

Summary of changes:

1) I added an ID to each H2 in the markup
2) When each H2 is cloned, I change the ID of the original H2 to #-orig
3) I add a click event to each cloned H2 so that when it is clicked, it fires the click event for the original H2 that it was created from

I hope this was helpful. Please feel free to follow-up if there are any other questions you may  have.

Best Wishes,

Kevin Chisholm

http://kevinchisholm.com/

http://blog.kevinchisholm.com/

---------- FOLLOW-UP ----------

QUESTION: If you notice on your solution jsfiddle (which worked very well, thank you), when you click on the div to open it, the area has an active state. When I scroll down, I would like to be able to keep that active state. I realize that I could just add the same styles from the active state to the floating header, but I can't do this, because I have divs floated next to each other. So if I open a div, then scroll down, it will keep the styling, but it will also add styling to the other divs, making it stick out. So I was wondering if there was a way, using jquery, to basically say "If that element has the active class, then add the floating header class with the same active styling, but if it doesnt have the active class, then add the basic floating header class with original styling" I hope that makes sense. Thanks for your previous answer again!

ANSWER: Hi Cody,

Thanks for your follow-up question.

I believe this updated JS Fiddle Link does what you have asked:

http://jsfiddle.net/AWfQR/

1) I created a rule called .activeClone that also gets the pink background
2) In the "UpdateTableHeaders" function, I check to see of the original element has the 'active' class, and if so, I add the 'activeClone' class to the cloned H2

Again, not very elegant, but I do believe that it is what you asked for.

Please let me know if there is anything more I can do to be helpful to you

Best Wishes,

Kevin Chisholm

http://kevinchisholm.com/

http://blog.kevinchisholm.com/

---------- FOLLOW-UP ----------

QUESTION: This doesn't solve the problem. Although thank you for your work. I'm not sure that I worded it well, but I'm going to make it make more sense. Cause now that I read it, I'm realizing it doesn't make sense. So for example, click on the "Another Header" link, and it turns pink. It now does keep the pink background, but the "Header" and "Different Header" still inherit the pink if you go to the top, then scroll down slowly. I hope that is more clear and I hope that doesn't sound rude.

Answer
Hi Cody,

Thanks for your follow-up question.

I believe this updated JS Fiddle Link does what you have asked:

http://jsfiddle.net/y7Ncu/

CHANGES:

I changed this:

if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height())) {

To This:

if ((scrollTop > offset.top) && (scrollTop < offset.top + el.height()) && ($(shadow).hasClass('active'))) {

Best Wishes,

Kevin Chisholm

http://kevinchisholm.com/

http://blog.kevinchisholm.com/

Javascript

All Answers


Ask Experts

Volunteer


Kevin Chisholm

Expertise

I can answer questions about: JavaScript, Object-Oriented JavaScipt, JSON, AJAX, jQuery, HTML, CSS

Experience

I am a Front-End Web Developer living in New York City. I have provided services to titles such as Time.com, TimeForKids.com, SportIllustrated.com, coastalliving.com, People.com, TDAmeritrade.com, and Instyle.com. Being particularly passionate about Object-Oriented JavaScript as well as Web Standards, I spend a fair amount of time writing about / teaching Front-End Web Development techniques. In my free time I enjoy reading about advanced JavaScript, as well as Web Development trends and best practices. My Blog is: http://blog.kevinchisholm.com/ JavaScript-specific blog posts can be found here: http://blog.kevinchisholm.com/category/javascript/

Organizations
NYC Front-end Developers CSS3 / HTML5 The future of front end Front-End Engineers Javascript Syracuse University Alumni Network

Education/Credentials
Syracuse University - VPA - 1983 - 1987

Past/Present Clients
cookingchanneltv.com foodnetwork.com food.com hgtv.com diynetwork.com gactv.com frontdoor.com hgtvremodels.com travelchannel.com Time.com TimeForKids.com SportIllustrated.com coastalliving.com People.com TDAmeritrade.com ramirezco.com njsga.org soccercoliseum.com superdomesports.com afeenj.org

©2016 About.com. All rights reserved.