vendredi 8 janvier 2016

jQuery if else statement within specified div

I have a one page, scrolling site with 5 main sections that have title bars that span across the top of each respective section. I want each title bar to stick at the top (well, relative top-underneath the top sticky header) as you scroll down the section. I can get one to stick, but I am having trouble making it so that one sticks and then it goes away once the next section's title bar gets to the sticky point.

I can't figure out another way to bind the HTML or CSS with the jQuery if else statement to make this work. I was thinking I could try to make it work within each sections' id but I don't think there's like a "withinId" jQuery selector.

I'm posting the latest jQuery I attempted (with just 2 out of the 5 variables I will need to make work here). I know it's wrong but I'm seriously stuck. Any ideas here? Thanks a million.

(abbreviated) HTML:

<div id="welcome">
 <div class="title-bar">
  <p>WELCOME</p>
 </div>
</div>

<div id="global">
 <div class="title-bar">
  <p>GLOBAL ENGAGEMENT</p>
 </div>
</div>

<div id="community">
 <div class="title-bar">
  <p>COMMUNITY</p>
 </div>
</div>

<div id="resources">
 <div class="title-bar">
  <p>RESOURCES</p>
 </div>
</div>

<div id="horizon">
 <div class="title-bar">
  <p>ON THE HORIZON</p>
 </div>
</div>

CSS:

.title-bar {
    padding: 5px;
    position: relative; 
}

.title-bar.sticky {
     position: fixed;
     top: 111px;
     width: 100%;
     z-index: 1040;
}

jQuery:

$( document ).ready(function() {

var welcomeTitle = $('#welcome .title-bar');
var globalTitle = $('#global .title-bar');
var communityTitle = $('#community .title-bar');
var resourcesTitle = $('#resources .title-bar');
var horizonTitle = $('#horizon .title-bar');

var stickyOffset = $('#header').offset().top;

    if ( $w.scrollTop() > stickyOffset + 225 ) {   
        welcomeTitle.addClass('sticky');
        globalTitle.addClass('sticky');
    } else {
        welcomeTitle.removeClass('sticky');
        globalTitle.addClass('sticky');
    }

    if (welcomeTitle.hasClass('sticky') && globalTitle.hasClass('sticky')) {
        welcomeTitle.removeClass('sticky'); 
    } else {
        //
    }
});

Aucun commentaire:

Enregistrer un commentaire