jquery - 使用 Jquery 进行一页导航

Question

任何人都可以帮助我如何在这个 wordpress 主题上创建导航

http://teothemes.com/wp/scrn/

似乎当您到达顶部时，导航只会停留在滑块下方，而当您向下滚动页面时，导航将被附加

Answer 1

在这里，我向您展示制作粘性元素的简单示例：

HTML 片段代码：

<nav class="sticky">
    <ul>
        <li>
        <a href="#intro">Home</a>
        </li>
        ...        
        <li>
        <a href="#contact">Contact</a>
        </li>
    </ul>

CSS 代码段：

nav {
    background: #f5f5f5;
    height: 40px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 1000;

nav.fixed{
    position: fixed;  top: 0px;
}

jQuery代码：

if ($('nav').hasClass('sticky')) {
        var top = $('.sticky').offset().top - parseFloat($('.sticky').css('margin-top').replace(/auto/, 0));
        $(window).scroll(function (event){
          var y = $(this).scrollTop();
          if (y >= top) {
              $('.sticky').addClass('fixed');
          } else {              
            $('.sticky').removeClass('fixed');
          }
        });
    }

这里的演示：

http://jsfiddle.net/PBhnE/

但您也可以使用网站http://teothemes.com/wp/scrn/上使用的插件。

http://stickyjs.com/