Используйте JavaScript для отображения активного состояния в меню

0

У меня есть постоянное желтое меню здесь: http://jsfiddle.net/KCb5z/11/

Как видите, он остается на странице. То, что я хочу достичь, - это активная стадия на элементах меню, как только пользователь прокрутил этот раздел (то есть желтое меню находится либо сверху внутри этого текущего раздела)

Похоже, есть много разных способов сделать это, но я действительно не знаю, с чего начать. Bootstrap делает это здесь (когда вы просматриваете) 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");
   }                   
});
  • 0
    Это на самом деле не простая задача: не только подсветка меню должна быть установлена в соответствии с позицией прокрутки, но и связана с привязкой. И наоборот вы также хотите нажать на меню, чтобы перейти к желаемой позиции. Этот плагин jQuery делает то, что вы хотите: trevordavis.net/blog/jquery-one-page-navigation-plugin
  • 0
    Если бы я был на твоем месте. Я хотел бы начать с этого: github.com/twbs/bootstrap/blob/master/js/scrollspy.js и удалить все части, которые мне не нужны. Такие как data-api.
Теги:

1 ответ

1
Лучший ответ

Там вы идете

 $(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);
});



 });

просмотрите скрипку здесь

  • 0
    большое спасибо
  • 0
    Пожалуйста :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню