Use jQuery to add a second class to an element when a different element reaches the top of the viewport

Question

I'm using the code below to add a class to an element when it reaches the top of the viewport.

var fixadent = jQuery(".home #inner-header"), pos = fixadent.offset();

jQuery(window).scroll(function() {

if(jQuery(this).scrollTop() > (pos.top + 0) && fixadent.css('position') == 'absolute') {

fixadent.addClass('logo-fixed'); }

else if(jQuery(this).scrollTop() <= pos.top && fixadent.hasClass('logo-fixed')){ fixadent.removeClass('logo-fixed'); }

})

This works well but I want to add a second class to the same element ( .home #inner-header ) when a another element reaches the top of the viewport. I have a #content div futher down the page, and when that reaches the top I want to add another class to .home #inner-header.

How can I adapt this code to make that happen? I can only ever get it to add one class.

EDIT - HTML here -

<header class="header" role="banner">
    <div id="inner-header" class="wrap clearfix">
        <div class="logo-wrap">
            <p id="logo" class="h1">LOGO TEXT</p>
        </div>

    </div> <!-- end #inner-header -->
</header> <!-- end header -->

<div id="content">

</div>