jquery - 使用 Jquery 的一页导航

<分区>

任何人都可以帮助我如何创建类似这个 wordpress 主题的导航

看起来当你在顶部时，导航将停留在 slider 下方并且当您向下滚动页面时，导航将被附加

最佳答案

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

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;
}

J查询代码:

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/

关于jquery - 使用 Jquery 的一页导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15892332/