向下滚动时如何停止页面顶部的导航栏

Posted 2023-04-13

【中文标题】向下滚动时如何停止页面顶部的导航栏

【英文标题】：How to stop the navbar on the top of the page when scrolling down

【发布时间】：2013-07-30 14:30:28

【问题描述】：

我希望在向下滚动时将导航栏停止在页面顶部。

我知道 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(); ?>"    /></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 ?>

【问题讨论】：

你可能有 position:fixed;为您的导航栏？

不，它不是固定的。事实上，如果你向下滚动页面，它会移动。问题是我希望它在你滚动后固定在顶部！

那我真的不知道你的问题是什么？也许分享一个指向您网站的链接，以便我们查看。

你能举个例子说明你想要发生的事情吗？

【参考方案1】：

您可以通过使用 css 来实现此目的

thead position:fixed; top:0px;

查看此链接

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

【参考方案2】：

如果您希望它在向下滚动并回滚到之前的状态后保持在顶部，您可以使用 Anthony Garand 的 Sticky jQuery Plugin。只需将其附加到您的菜单上，通常：

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

【参考方案3】：

我认为使用 jQuery Waypoints 可以非常轻松地完成您想要做的事情：http://imakewebthings.com/jquery-waypoints/

您可以在此处查看他们的“粘性”示例： http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/

如果这回答了您的问题，请标记为已接受。 :)