0

Добрый день!

Есть страница с пятью разделами. Есть меню, по клику на пункт которого, происходит прокрутка к соответствующему разделу.

Как сделать, чтобы при прокрутке страницы колесом мыши, пункт меню изменялся в соответствии с текущим блоком? Например как реализовано здесь.

Вот то, что есть сейчас - http://jsfiddle.net/F2Uus/2/

При этом данный код почему-то не возвращает к блоку #home при клике на соответствующую ссылку.

Помогите осуществить данный эффект и разобраться почему страница не прокручивается к блоку #home.

Спасибо.

2
  • у меня дежавю... в том примере сделано вот так: scrollspy
    – zb'
    26 мая 2013 в 4:06
  • location.hash в примере вообще отсутствует
    – user205890
    22 мар 2016 в 9:07

1 ответ 1

6

http://jsfiddle.net/mekwall/up4nu/

// 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");
  }
});
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;
  width: 4em;
  text-align: center;
  -webkit-transition: .5s all ease-out;
  -moz-transition: .5s all ease-out;
  transition: .5s all ease-out;
  border-top: 3px solid white;
  color: #aaa;
  text-decoration: none;
}
#top-menu a:hover {
  color: #000;
}
#top-menu li.active a {
  border-top: 3px solid #333;
  color: #333;
}
#foo {
  position: absolute;
  top: 400px;
}
#bar {
  position: absolute;
  top: 800px;
}
#baz {
  position: absolute;
  top: 1200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<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>

1
  • +1. Осталось только удалить изъян, который присутствует и в приведенном ТС примере: location.hash нужно менять и тогда, когда проскроллил до какой-то метки, а не только при клике по пункту меню.
    – Bars
    26 мая 2013 в 4:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.