Question

您好我正在尝试从jsfiddle

实现此处验证的主动导航功能

http:jsfiddle.net/SJkmh/15/

我想用html实现它，使用现有的css和divs / ul li＆＃39;但我一直都失败了。

我有一个内部jquery-min.js调用，并为每个部分使用div（secion）ID。
使用<section id"about></section>给我想要的滚动效果，但导航点不会激活。

任何帮助都会非常适合。

提前致谢。

Div Nav目前看起来像这样：

<div class="wrapper">
<div class="navi">
<ul>
<li class="about"><a href="#about">About</a></li>
<li class="speakers"><a href="#speakers">Speakers</a></li>
<li class="testimonials"><a href="#event">Testimonials</a></li>
<li class="event"><a href="#event">Event details</a></li>
<li><a href="contact.html" id="pop-contact">Contact</a></li>
</ul>
</div>
<div class="buttons">
<a href="#" class="bt1">Book Now <i class="fa fa-caret-square-o-right"></i></a>
</div>
</div>

这些是我的css课程：

.navi {float:left; padding:17px 0;}
.navi ul {float:left;}
.navi li {font-size:20px; line-height:2.4; font-weight:600; text-shadow:1px 1px 1px     rgba(0,0,0,0.2); margin:0 0 0 35px;float: left;}
.navi li {opacity:0.6;}
.navi li:hover {opacity:1;}
.navi li.active {opacity:1;}

来自jfiddle的Jquery代码：

$(document).ready(function(){
    $('section').waypoint(function(direction) {
        var activeSection = $(this);
        if(direction === 'down'){
            activeSection = $(this).next();
        }
        //activeSection = $(this);
        var sectionId   = activeSection.attr('id');
        $('ul li').removeClass('active');
        $('ul li.' + sectionId).addClass('active');
        console.log(activeSection);
    });
}); 

$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
       if (target.length) {
         $('html,body').animate({
             scrollTop: target.offset().top - (target.height() / 5)
        }, 500);
        return false;
    }
}
});

Answer 1

您的脚本需要一个外部Jquery插件。 Waypoints。你必须在加载JQuery后加载它。

<script src="http://cdn.jsdelivr.net/jquery.waypoints/2.0.2/waypoints.js"></script>

单页上的Jquery活动导航

1 个答案: