jquery滾動錨點菜單項突出顯示

-2

我正在使用此代碼，我在此答案中找到了Change Active Menu Item on Page Scroll?但無法使其工作......這就是我從jsFiddle示例中粘貼的內容。jquery滾動錨點菜單項突出顯示

<head> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script> 
// Cache selectors 
var lastId, 
    topMenu = $("#top-menu"), 
    topMenuHeight = topMenu.outerHeight()+15, 
    // All list items 
    menuItems = topMenu.find("a"), 
    // Anchors corresponding to menu items 
    scrollItems = menuItems.map(function(){ 
     var item = $($(this).attr("href")); 
     if (item.length) { return item; } 
    }); 

// Bind click handler to menu items 
// so we can get a fancy scroll animation 
menuItems.click(function(e){ 
    var href = $(this).attr("href"), 
     offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1; 
    $('html, body').stop().animate({ 
     scrollTop: offsetTop 
    }, 300); 
    e.preventDefault(); 
}); 

// Bind to scroll 
$(window).scroll(function(){ 
    // Get container scroll position 
    var fromTop = $(this).scrollTop()+topMenuHeight; 

    // Get id of current scroll item 
    var cur = scrollItems.map(function(){ 
    if ($(this).offset().top < fromTop) 
     return this; 
    }); 
    // Get the id of the current element 
    cur = cur[cur.length-1]; 
    var id = cur && cur.length ? cur[0].id : ""; 

    if (lastId !== id) { 
     lastId = id; 
     // Set/remove active class 
     menuItems 
     .parent().removeClass("active") 
     .end().filter("[href=#"+id+"]").parent().addClass("active"); 
    }     
}); 
</script> 
<style> 
body { 
    height: 6000px; 
    font-family: Helvetica, Arial; 
} 

#top-menu { 
    position: fixed; 
    z-index: 1; 
    background: white; 
    left: 0; 
    right: 0; 
    top: 0; 
} 

#top-menu li { 
    float: left; 
} 

#top-menu a { 
    display: block; 
    padding: 5px 25px 7px 25px; 
    -webkit-transition: 1s all ease; 
    -moz-transition: 1s all ease; 
    transition: 1s all ease; 
    border-top: 3px solid white; 
    color: #666; 
    text-decoration: none; 
} 

#top-menu a:hover { 
    color: #000; 
} 

#top-menu li.active a { 
    border-top: 3px solid #333; 
    color: #333; 
    font-weight: bold; 
} 

#foo { 
    position: absolute; 
    top: 400px; 
} 

#bar { 
    position: absolute; 
    top: 800px; 
} 

#baz { 
    position: absolute; 
    top: 1200px; 
} 
</style> 
</head> 
<body> 
<ul id="top-menu"> 
    <li class="active"> 
    <a href="#">Top</a> 
    </li> 
    <li> 
    <a href="#foo">Foo</a> 
    </li> 
    <li> 
    <a href="#bar">Bar</a> 
    </li> 
    <li> 
    <a href="#baz">Baz</a> 
    </li> 
</ul> 

<a id="foo">Foo</a> 


<a id="bar">Bar</a> 


<a id="baz">Baz</a> 
</body>

來源

2013-03-09 Breezy

指定什麼是不工作的，請。 – 2013-03-09 23:39:33

當您向下滾動頁面 – Breezy 2013-03-09 23:40:53

時，菜單項並不突出顯示，但如果您單擊菜單項，則會將您帶到錨點，但不會強制完成項目 – Breezy 2013-03-09 23:48:56

將你的Javascript的底部或在聲明的document.ready把它包：

$(function() { 
    // Handler for .ready() called. 
});

.ready() - jQuery

你試圖將事件附加到那些尚不存在的元素。

來源

2013-03-10 00:21:24 Syon

...感謝您的幫助 – Breezy 2013-03-10 00:25:13

@Breezy沒問題。如果這對你有用，你能接受它作爲答案嗎？ :) – Syon 2013-03-10 01:41:52

針對瑞麒的新問題在意見：

的scrollTop必須過去錨，以移動高亮顯示，以及1px的額外增量並不完全做到這一點。

更改此：

offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;

要這樣：

offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+2; //<== note the 2

或本：

offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+5; //<== note the 5

來源

2014-04-29 21:33:56 gibberish

jquery滾動錨點菜單項突出顯示

回答

相關問題