javascript - 一些关于导航的 Jquery/CSS 帮助

Question

我目前正在我的 pfolio 网站上工作，我还很远，但还没有...

http://thinkagain.nu/?page_id=2501看到这个页面我在右边有这个导航元素符号/点，您可以在元素中导航。到目前为止，我让它工作，如果你点击一个元素符号/点，它就会被选中(橙色)，但我想要的是当你向下滚动这些部分时它也会变成选中状态，所以不用点击它。

因此，当您滚动第二个元素时，第二个元素符号/点被选中，第三个元素使第三个元素符号/点被选中，依此类推。

这是我的代码:

CSS:

#floatnav {
    position: fixed;
    right: -50px;
    top: 50%;
    width: 8em;
    margin-top: -2.5em;
}

.bullit {
    background-color:#242424;
    -moz-border-radius:17px;
    -webkit-border-radius:17px;
    border-radius:17px;
    border:0px solid #000000;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:12px;
    padding:5px 5px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
    box-shadow: inset 1px 4px 9px -6px;
    box-shadow: 2px 2px 1px #888888; 
}
.bullit:hover {
    background-color:#ebebeb;
    box-shadow: inset 1px 4px 9px -6px;
}
.bullit.active {
    position:relative;
    top:1px;
    background:orange;
}

HTML:

<ul id="floatnav">
    <a href="#cinerama" class="bullit"></a>
    <a href="#magicalgems" class="bullit"></a>
    <a href="#deltalloyd" class="bullit"></a>
    <a href="#ezchef" class="bullit"></a>
</ul>

Jquery/javascript:

$('#floatnav a').click(function() {
    $('#floatnav a').removeClass('active'); /*Remove previous*/
    $(this).addClass('active');             /*Active clicked*/
})

如果有人能帮助我，我将不胜感激!提前致谢。

尼克

Answer 1

试试这个(参见示例 http://jsfiddle.net/shtrih/Z3BTd/)

$(window).on('scroll', function () {
    var positions = [],
        elements = [],
        scrolltop = $(this).scrollTop()
    ;
    $('> div', '#main').each(function() {
         var pos = Math.abs($(this).position().top - scrolltop);
         positions.push(pos);
         elements[ pos ] = this.id;
    });

    var array_min = Math.min.apply(null, positions);
    var current_element_id = elements[ array_min ];
    console.log(current_element_id);

    $('a', '#floatnav').removeClass('active');
    $('a[href="#'+ current_element_id +'"]', '#floatnav').addClass('active');
});

使用的 Material :

• > JavaScript: min & max Array values?
• > How to know the end of scrolling event for a <div> tag
• > http://jqapi.com/