粘性菜单问题答案

【问题标题】：Issue with sticky menu粘性菜单问题
【发布时间】：2016-02-20 04:15:15
【问题描述】：

我的 wordpress 网站上有一个粘性菜单，它只是一个固定 css 位置的标题，但它覆盖在我每个部分的顶部。你看测试站here就明白我的意思了

如果您单击菜单图标并单击某个部分，它将导航到每个部分，但我需要粘性菜单位于每个部分上方，而不是覆盖在顶部。

在我的 header.php 中有

<div id="header-wrap">

                    <div class="poweredby">POWERED BY bluesource<p class="mobile-phone"><a href="tel: +44 0845 319 2100">0845 319 2100</a></p></div>

                        <div class="headerphone">0845 319 2100</div>

                    <button class="toggle-menu menu-right push-body"><i class="fa fa-bars"></i></button>

                        <!-- Right menu element-->

                        <?php if ( has_nav_menu( 'primary' ) || has_nav_menu( 'social' ) ) : ?>

                            <?php if ( has_nav_menu( 'primary' ) ) : ?>

                                <nav id="site-navigation" class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">
                                    <?php
                                        wp_nav_menu( array(
                                        'theme_location' => 'primary',
                                        'menu_class'     => 'primary-menu',
                                        ) );
                                    ?>
                                </nav> 

                            <?php endif; ?>

                        <?php endif; ?>

                </div><!-- end header wrap -->

在我的样式表中

.site-header {
background: #333 none repeat scroll 0 0;
height: 98px;
padding: 27px 0;
text-align: right;
}

.site-header-main {
    text-align: right;
    right: 0;
    display: block;
    padding-right: 27px;
}

#header-wrap {
    background: #333;
    position: fixed;
    top: 0;
    z-index: 100;
    height: 98px;
    padding-top: 27px;
    padding-right: 27px;
    opacity: 0.9;
}

【问题讨论】：

请在此处添加有意义的代码和问题描述。不要只链接到需要修复的站点 - 否则，一旦问题得到解决或您链接的站点无法访问，这个问题将对未来的访问者失去任何价值。发布证明您的问题的Minimal, Complete, and Verifiable example (MCVE) 将帮助您获得更好的答案。有关详细信息，请参阅 Something on my web site doesn't work. Can I just paste a link to it? 谢谢！

标签： html css

【解决方案1】：

这段代码就可以了

$('#header-wrap ul li a').click(function(){
    href=$(this).attr('href');
    $('html, body').animate({
      scrollTop: $(href).offset().top-98  // since the height of your nav is 98px
    }, 500);
});

对于外部链接

$(document).ready(function(){
   var urlHash = window.location.href.split("#")[1];
    $('html,body').animate({
        scrollTop: $('#' + urlHash).offset().top-98 
    }, 500);
});

【讨论】：

这在我的主页上使用我的导航链接非常有用，所以谢谢你，但我只是想知道如何使用另一个页面的链接让它工作？我在第二页上有链接到主页上某个部分的链接，所以我使用了上面的代码，但将 #header-wrap ul li a 更改为 .entry-content a 但它不起作用？
这太棒了，完全按照我的意愿工作，但有点好奇，当我点击返回主页的外部链接时，它没有动画，这不是问题并且可以工作，但只是想知道为什么？
@Duggy G 你在主页添加了第二个代码吗？

【解决方案2】：

这应该可以完成工作。我增加了右边的位置，这样你就可以看到旁边的白条，我应用了一个重要的标签，否则它会被覆盖。

nav#site-navigation {
    top: 98px;
}
.cbp-spmenu-right.menu-open {
    right: 23px !important;
}

【讨论】：