Как остановить навигационную панель вверху страницы при прокрутке вниз

Я хотел бы сделать возможным остановить мою навигационную панель в верхней части страницы при прокрутке вниз.

Я знаю, что JQuery каким-то образом участвует в решении, но я действительно не могу понять, как его использовать!

это мой файл header.php (я на 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 ?> 

Вы можете добиться этого, используя css

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

Проверить эту ссылку

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

Если вы хотите, чтобы он придерживался вершины после прокрутки вниз и возврата назад в предыдущее состояние, вы можете использовать Sticky jQuery Plugin от Энтони Гаранда. Просто прикрепите его к своему меню, как правило:

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

Я думаю, что то, что вы пытаетесь сделать, можно легко сделать с помощью jQuery Waypoints: http://imakewebthings.com/jquery-waypoints/

Вы можете увидеть их пример «Sticky» здесь: http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/

Пожалуйста, отметьте как принято, если это ответит на ваш вопрос. 🙂