Question

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

似乎当你登顶时，导航将只是粘在滑块下方当您向下滚动页面时，将附加导航

Answer 1

这里我向您展示一个简单的例子来制作一个stiky元素：

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/

使用Jquery进行一页导航

1 个答案: