使用JavaScript來顯示菜單

在激活狀態我有一個持久的黃色菜單這裏：http://jsfiddle.net/KCb5z/11/使用JavaScript來顯示菜單

正如你可以看到它仍然在頁面上。我想要實現的是在用戶滾動到該部分時將活動舞臺放在菜單項上（即，黃色菜單或者剛好在當前部分的內部頂部）

看起來好像有很多不同的嘗試方法，但我真的不知道如何開始。引導在這裏（當你下滾）http://getbootstrap.com/javascript/做它用一種叫scrollspy，但該代碼似乎是這麼簡單的東西如此之大：

// 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"); 
    }     
});

來源

2014-05-12 Jimmy

這並不是一項簡單的任務，不僅需要根據滾動位置來設置菜單高亮，還需要與錨定相關。而另一方面，你也想點擊菜單跳轉到所需的位置。這jQuery插件做你想做的：http://trevordavis.net/blog/jquery-one-page-navigation-plugin/ – feeela

如果是我在你的位置。我將從此開始：https：//github.com/twbs/bootstrap/blob/master/js/scrollspy.js，並刪除我不關心的任何部分。如data-api。 – bottens

你去那裏

$(function() { 

var $select = $('#select'); 
var $window = $(window); 
var isFixed = false; 
var init = $select.length ? $select.offset().top : 0; 

$window.scroll(function() { 
    var currentScrollTop = $window.scrollTop(); 
    if (currentScrollTop > init && isFixed === false) { 
     isFixed = true; 
     $select.css({ 
      top: 0, 
      position: 'fixed' 
     }); 
     $('body').css('padding-top', $select.height()); 
    } else if (currentScrollTop <= init && isFixed === true) { 
     isFixed = false; 
     $select.css('position', 'relative'); 

     $('body').css('padding-top', 0); 
    } 
    //active state in menu 
    $('.section').each(function(){ 
     var eleDistance = $(this).offset().top; 
     if (currentScrollTop >= eleDistance) { 
      var makeActive = $(this).attr('id'); 
      $('#select a').removeClass('active'); 
      $('#select a.' + makeActive).addClass('active'); 
     } 
    }); 
}); 

$(".nav").click(function (e) { 
    e.preventDefault(); 
    var divId = $(this).attr('href'); 
    $('body').animate({ 
     scrollTop: $(divId).offset().top - $select.height() 
    }, 500); 
}); 



});

check the fiddle here

來源

2014-05-12 13:57:08 alou

非常感謝你 – Jimmy

不客氣:) – alou

使用JavaScript來顯示菜單

回答

相關問題