使用 Wordpress 21 主题的浮动导航菜单答案

【问题标题】：Floating navigation menu using Wordpress Twenty Eleven theme使用 Wordpress 21 主题的浮动导航菜单
【发布时间】：2013-02-16 09:29:29
【问题描述】：

我目前正在开发一个使用 WordPress 二十一世纪主题的网站，我希望主导航栏一旦滚动过去，就会粘在屏幕顶部，就像这个右侧的段落一样页面http://fiddle.jshell.net/zsJAr/show/light/。

到目前为止，我已经在标题中添加了代码，以便在开始的 head 标签之后包含 jQuery：

<?php wp_enqueue_script("jquery"); ?>

后来我在结束头标签之前包含了我的javascript：

<script type="text/javascript"
src="<?php bloginfo("template_url"); ?>/js/moveScroller.js"></script>

moveScroller.js的内容是：

var $j = jQuery.noConflict();

$j(window).load(function(){
    $j(function() {
      var a = function() {
        var b = $j(window).scrollTop();
        var d = $j("#access-anchor").offset({scroll:false}).top;
        var c=$j("#access");
        if (b>d) {
          c.css({position:"fixed",top:"0px"})
        } else {
          if (b<=d) {
            c.css({position:"relative",top:""})
          }
        }
      };
      $j(window).scroll(a);a()
    });
});

“access”和“access-anchor”ID 在以下块中进一步声明：

<div id="access-anchor"></div>
<nav id="access" role="navigation">
            <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
            <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
            <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
            <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
            <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>

            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

</nav><!-- #access -->

这似乎没有任何效果，我真的不知道该怎么做。在使用 WordPress 的经验很少的情况下，我非常感谢您对此事的帮助。有谁知道如何解决这个问题？

【问题讨论】：

你也可以考虑在wordpress.stackexchange.com发帖
啊，谢谢。没有意识到这一点:)

标签： php javascript jquery css wordpress

【解决方案1】：

如果你使用 jQuery，你还可以为滚动设置动画，看起来更有趣 =) 几周前我使用了这段代码，它不使用固定位置，它使用边距顶部，但您可以轻松更改它：

var scroll = 0; //initially scroll is 0
var marginTop = 10; //we add an initial  margin
$(window).scroll(function () {
        //once the user scrolls, we calculate the new margin-top
        marginTop = ($(document).scrollTop() - scroll) + marginTop;
        //and we save the new amount of scroll, for the next time
        scroll = $(document).scrollTop();
        $("#divYouWantToMove").animate({"marginTop": marginTop+"px"}, {duration:500,queue:false} );
});

希望对你有帮助！

【讨论】：

【解决方案2】：

所以看起来这可能是不可能的，或者它太复杂了。在 WordPress Stack Exchange 或 WordPress 论坛上没有人知道这一点，所以我将不得不放弃它:(

【讨论】：