CODEWITHSUNDEEP
phpjqueryhtmlwordpressnavigation
user1952723
user1952723

Reputation:

How to stop the navbar on the top of the page when scrolling down

I would like to make possible to stop my navigation bar on the top of the page when scrolling down.

I know that Jquery is somehow involved in the solution but i really cant figure out how to use it!

this is my header.php file (I'm on wordpress CMS):

> 
    <?php if (has_nav_menu('top-menu', 'responsive')) { ?>
        <?php wp_nav_menu(array(
                'container'       => '',
                'fallback_cb'     =>  false,
                'menu_class'      => 'top-menu',
                'theme_location'  => 'top-menu')
                ); 
            ?>
    <?php } ?>

<?php responsive_in_header(); // header hook ?>

<?php if ( get_header_image() != '' ) : ?>

    <div id="logo">
        <a href="<?php echo home_url('/'); ?>"><img src="<?php header_image(); ?>" width="<?php if(function_exists('get_custom_header')) { echo get_custom_header() -> width;} else { echo HEADER_IMAGE_WIDTH;} ?>" height="<?php if(function_exists('get_custom_header')) { echo get_custom_header() -> height;} else { echo HEADER_IMAGE_HEIGHT;} ?>" alt="<?php bloginfo('name'); ?>" /></a>
    </div><!-- end of #logo -->

<?php endif; // header image was removed ?>

<?php if ( !get_header_image() ) : ?>

    <div id="logo">
        <span class="site-name"><a href="<?php echo home_url('/'); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><?php bloginfo('name'); ?></a></span>
        <span class="site-description"><?php bloginfo('description'); ?></span>
    </div><!-- end of #logo -->  

<?php endif; // header image was removed (again) ?>

<?php get_sidebar('top'); ?>
            <?php wp_nav_menu(array(
                'container'       => 'div',
                    'container_class'   => 'main-nav',
                    'fallback_cb'     =>  'responsive_fallback_menu',
                    'theme_location'  => 'header-menu')
                ); 
            ?>

        <?php if (has_nav_menu('sub-header-menu', 'responsive')) { ?>
            <?php wp_nav_menu(array(
                'container'       => '',
                'menu_class'      => 'sub-header-menu',
                'theme_location'  => 'sub-header-menu')
                ); 
            ?>
        <?php } ?>

        <?php responsive_header_bottom(); // after header content hook ?>

</div><!-- end of #header -->
<?php responsive_header_end(); // after header container hook ?>

<?php responsive_wrapper(); // before wrapper container hook ?>
<div id="wrapper" class="clearfix">
    <?php responsive_wrapper_top(); // before wrapper content hook ?>
    <?php responsive_in_wrapper(); // wrapper hook ?>

Upvotes: 2

Views: 3964

Answers (3)

Jack Lenox
Jack Lenox

Reputation: 357

I think what you are trying to do can be done very easily with jQuery Waypoints: http://imakewebthings.com/jquery-waypoints/

You can see their "Sticky" example here: http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/

Please mark as accepted if this answers your question. :)

Upvotes: 0

Kamil Szymański
Kamil Szymański

Reputation: 950

If you want it to stick to top after scrolling down and rolling back to previous state, you can use a Sticky jQuery Plugin by Anthony Garand. Just attach it to your menu, usually:

$('.menu-main-menu-container').sticky({topSpacing:0});

Upvotes: 0

Syam Kumar
Syam Kumar

Reputation: 601

You can achieve this by using css

thead {position:fixed; top:0px;}

Check this link

http://jsfiddle.net/john_rock/h6hfX/1/

Upvotes: 1

Related Questions