向下滚动时如何停止页面顶部的导航栏 [英] How to stop the navbar on the top of the page when scrolling down

问题描述

我知道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-菜单'，
'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;}？>如果（function_exists（'get_custom_header'））{echo get_custom_header（） - > height;} else {echo HEADER_IMAGE_HEIGHT;}？> alt =<？php bloginfo（'name'）;？> />< / A> 
< / div><！ -  #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 class =site-description><？php bloginfo（'description'）; ？>< /跨度> 
< / div><！ -  #logo  - 结尾 - > 
 
<？php endif; //标题图像已被删除（再次）？> 
 
<？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（）; //标题内容挂钩后？> 
 
< / div><！ -  #header结尾 - > 
<？php responsive_header_end（）; //标头容器挂钩后？> 
 
<？php responsive_wrapper（）; //在包装容器挂钩之前？> 
< div id =wrapperclass =clearfix> 
<？php responsive_wrapper_top（）; //在包装器内容挂钩之前？> 
<？php responsive_in_wrapper（）; // wrapper hook？> 
  

解决方案

您可以通过使用css

  thead {position：fixed; 
 
 
 
 
 $ b 
检查这个链接
 
 
  $ b 
  http://jsfiddle.net/john_rock/h6hfX/1/  
 
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 ?>

解决方案
You can achieve this by using css
thead {position:fixed; top:0px;}
Check this link

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

                        
这篇关于向下滚动时如何停止页面顶部的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！