chnage the header on scroll

[jrahma]

Hi,

I have two different headers. I want header2 to replace header1 when the users scrolls the page.

this is header1:

<header>
<a href="home"><img id="logo" src="<?php echo $_SESSION["blended_learning_domain_name"]; ?>images/logo.png" /></a>

<nav id="navMenu" role="navigation">
    <ul>
        <li><a href="home" <?php if (basename($_SERVER['PHP_SELF']) == 'home.php') { ?>class="current_page_item"<?php } ?> accesskey="1" title="">Home Page</a></li>
        <?php if ($_SESSION["blended_learning_user_id"]) { ?><li><a href="mypage" <?php if (basename($_SERVER['PHP_SELF']) == 'mypage.php') { ?>class="current_page_item"<?php } ?> accesskey="2" title="">My Page</a></li><?php } ?>
        <li><a <?php if (basename($_SERVER['PHP_SELF']) == 'browse.php') { ?>class="current_page_item"<?php } ?> href="browse" accesskey="3" title="">Browse</a></li>
        <?php if (!$_SESSION["blended_learning_user_id"]) { ?><li><a href="signin" <?php if (basename($_SERVER['PHP_SELF']) == 'signin.php') { ?>class="current_page_item"<?php } ?> accesskey="4" title="">Students</a></li><?php } ?>
        <?php if (!$_SESSION["blended_learning_user_id"]) { ?><li><a href="adminsignin" <?php if (basename($_SERVER['PHP_SELF']) == 'admin_signin.php') { ?>class="current_page_item"<?php } ?> accesskey="5" title="">Admin</a></li><?php } ?>
        <li><a href="contact" <?php if (basename($_SERVER['PHP_SELF']) == 'contact.php') { ?>class="current_page_item"<?php } ?> accesskey="6" title="">Contact Us</a></li>
        <?php if ($_SESSION["blended_learning_user_id"]) { ?><li><a href="out" accesskey="7" title="" style="color: white; background-color: red;">Sign Out</a></li><?php } ?>
    </ul>
</nav>
</header>

and this is header2:

<header>
<a href="home"><img id="logo" src="<?php echo $_SESSION["blended_learning_domain_name"]; ?>images/smalllogo.png" /></a>

<nav id="navMenu" role="navigation">
    <ul>
        <li><a href="home" <?php if (basename($_SERVER['PHP_SELF']) == 'home.php') { ?>class="current_page_item"<?php } ?> accesskey="1" title="">Home Page</a></li>
        <?php if ($_SESSION["blended_learning_user_id"]) { ?><li><a href="out" accesskey="7" title="" style="color: white; background-color: red;">Sign Out</a></li><?php } ?>
    </ul>
</nav>
</header>

how can I do this please?

[jeepin81]

There's a few ways you can accomplish this.

1.) You can do some sort of $(window).scroll(function(){}); and check that the offset().top !== 0 of a header type of div and change the display:none vs block.

2.) You can check out this class that is pretty slick.

3.) Ask Dr. Google and try a few things out and come back with some code & questions.

HTH.