Javascript 如何为wordpress创建像SMINT这样的粘性导航？

基本上，我想在Wordpress页面上使用SMINT粘性菜单，包括导航功能。我已经看过无数次了，在这些页面上有一个页面模板。之前，有人知道免费或付费的插件吗

或者你能告诉我如何把这个放到wordpress页面上吗？我试过了，但是页面中的js不起作用，你不能包含js文件

---

我不想这样做的主要导航，但子导航滚动页面的内容

首先，您需要了解nav的html结构，在该示例中，它如下所示：

   <div class="subMenu" >
    <div class="inner">
         <a href="#" id="sTop" class="subNavBtn active">Home</a> 
         <a href="#" id="s1" class="subNavBtn">What it does</a>
         <a href="#" id="s2" class="subNavBtn">How to use</a>
         <a href="#" id="s3" class="subNavBtn">Demo</a>
         <a href="#" id="s4" class="subNavBtn">Download</a>
         <a href="#" id="s5" class="subNavBtn end">About Me</a>
    </div>
   </div>

之后，我们需要添加css

 .inner {
        width: 960px;
        margin: 0 auto;
        position: relative;
        min-height: 50px;
        padding:30px 0;
        font-size: 18px;
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
    }
.subMenu {
    position: absolute;
    top: 462px;
    height: 50px;

    z-index: 1000;
    width: 100%;
    max-width: 1140px;
    min-width: 960px;

    background: #cdd242;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NkZDI0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NGEzNGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #cdd242 0%, #74a34a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cdd242), color-stop(100%,#74a34a));
background: -webkit-linear-gradient(top,  #cdd242 0%,#74a34a 100%);
background: -o-linear-gradient(top,  #cdd242 0%,#74a34a 100%);
background: -ms-linear-gradient(top,  #cdd242 0%,#74a34a 100%);
background: linear-gradient(to bottom,  #cdd242 0%,#74a34a 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cdd242', endColorstr='#74a34a',GradientType=0 );



}

.subMenu .inner {
    padding:0;
    font-weight: 400;
}

.subMenu {


    /*float: left;*/
}

/*.subNavBtn {
    display: block;
    height: 35px;
    float: left;
    margin: 0px 50px 0 0;
    text-decoration: none;
    font-size: 16px;
    padding: 15px 0 0 0;
}*/

.subNavBtn {
    display: block;
    height: 35px;
    width: 12%;
    float: left;
    margin: 0px 0px 0 0;
    text-decoration: none;
    font-size: 14px;
    padding: 15px 2% 0 2%;
    text-align: center;

    color: #3d3d3d;
}



.active {
    background: #fc0;
}
.end {
    margin: 0;
}

他们正在使用，还有另一种方法。因此，您可以像这样将其包含在

functions.php

文件中：

function add_scripts() {
    wp_deregister_script('jquery');
    wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://code.jquery.com/jquery-1.10.1.min.js", false, null);
    wp_enqueue_script('jquery');
    wp_enqueue_script('migrate', 'http://code.jquery.com/jquery-migrate-1.2.1.min.js', array('jquery'), '1.2.1', false );
    wp_enqueue_script('smint', get_template_directory_uri().'/path/to/file/smint.js', array('jquery'), '1.2.1', false );

}
add_action( 'wp_enqueue_scripts', 'add_scripts' );

最后，让我们添加

js

以使其工作：

$(document).ready( function() {
    $('.subMenu').smint({
        'scrollSpeed' : 1000
    });
});

window.addEventListener("load",function() {
  setTimeout(function(){
    window.scrollTo(0, 1);
  }, 0);
});

测试它，让我知道，它可能需要调整，使其工作完美

编辑：我忘了。。lol如何在你的模板中使用这个

wp_nav_menu( array(
    'menu' => 'menu name', 
    'container' => false, 
    'menu_id' => 'subMenu',
    'walker' => new Create_cool_nav
));

---

几天前，为了寻找解决方案，我偶然发现了这篇文章。通过使用原始的Walker_nav_菜单元素输出函数为导航菜单创建自定义Walker，我成功地解决了这个问题

1.创建walker类 在themes functions.php内部创建新的Walker类，该类扩展了原来的Walker_Nav_菜单。从/wp includes/nav-menu-template.php（第68–187行）复制原始的开始元素和结束元素输出函数代码，并将其粘贴到自定义Walker类中

class SMINT_nav extends Walker_Nav_Menu { 
   // copy original code from /wp-includes/nav-menu-template.php, rows 68 – 187
   // and paste here
}

在打开start_el函数（源代码第81行）之后，我们将添加从全局WPDB查询posts对象id的代码。我们将这些id用作链接HTML输出id，用于连接节和触发链接。查询的原始解决方案来自此

最后，我们必须将post ID添加到nav链接HTML输出中。在

$item\u output.=

（原文的第149行，就在

$item\u output=$args->before；

）下，通过添加id类并从$pageid数组调用post id来编辑链接

/*SMINT滚动-将帖子ID添加到链接HTML输出*/
$item_输出=''；

2.将菜单添加到主题 调用

内的菜单标记使用：

<?php wp_nav_menu(array('container_class' => 'smintMenu',
                        'walker'    => new SMINT_nav(),
    )); ?>



“container class”是默认的顶级菜单类，我们必须定义它的名称，因为我们将使用它作为smint.js触发器元素类。
在“walker”下，我们必须调用之前创建的自定义walker类

3.加载JS脚本
我还在开发我的主题，所以在关闭
标记之前，我已经直接在header.php中加载了脚本。出于测试目的，我从themes js文件夹中加载了最新的jquery.js和jquery.smint.js

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="<?php bloginfo('template_url'); ?>/themejs/jquery.smint.js"></script>

    <!-- activate smint -->
    <script type="text/javascript">   
        $(document).ready( function() {
            $('.smintMenu').smint({      // define class, same as 'class_container'
                'scrollSpeed' : 1000     // and scroll speed to 1000ms
            });
        });
    </script>
</head>


对不起，这似乎有点太复杂了。
$atts['href']   = ! empty( $item->url )        ?     '#'           : '';

/* SMINT SCROLL - Add post ID to link HTML output */
    $item_output .= '<a id="s' . esc_attr( $pageid ) .'"'. $attributes .'>';

<?php wp_nav_menu(array('container_class' => 'smintMenu',
                        'walker'    => new SMINT_nav(),
    )); ?>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="<?php bloginfo('template_url'); ?>/themejs/jquery.smint.js"></script>

    <!-- activate smint -->
    <script type="text/javascript">   
        $(document).ready( function() {
            $('.smintMenu').smint({      // define class, same as 'class_container'
                'scrollSpeed' : 1000     // and scroll speed to 1000ms
            });
        });
    </script>
</head>