Липкая навигация и зависание на div

Question

Липкая навигация и зависание на div

0

Я новичок в jQuery и JS в целом, поэтому, пожалуйста, будьте добрыми :)

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

Вот пример того, о чем я говорю (* обратите внимание на панель навигации, как изменяются divs при прокрутке страницы, с которой она связана): http://www.domo.com/.

Я использую jQuery липкий плагин прямо сейчас, чтобы заставить меню придерживаться вершины, но не могу понять, как сделать зависание.

user2906601 22 окт. 2013, в 12:50

Источник

2

Пожалуйста, уточните вашу конкретную проблему или добавьте дополнительную информацию, чтобы выделить именно то, что вам нужно. Как сейчас написано, трудно сказать точно, что вы спрашиваете.
Benjamin Gruenbaum 22 окт. 2013, в 10:26
0

Я видел худшие письменные вопросы - по крайней мере, приведен пример.
Ed Hinchliffe 22 окт. 2013, в 11:13

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

Пожалуйста, уточните вашу конкретную проблему или добавьте дополнительную информацию, чтобы выделить именно то, что вам нужно. Как сейчас написано, трудно сказать точно, что вы спрашиваете.
Я видел худшие письменные вопросы - по крайней мере, приведен пример.

ShawnWhite · Answer 1 · 2013-10-22T09-17-00.000Z

http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/

Хороший учебник здесь, используя jQuery Waypoints.

Ed Hinchliffe · Answer 2 · 2013-10-22T08-59-00.000Z

В основном проблема возникает в двух частях:

1. Где на странице находятся мои разделы?

Чтобы выделить элемент навигации для каждого раздела, вам сначала нужно знать, где находится каждый раздел.

Я предлагаю использовать класс, например .section для определения ваших разделов и атрибута name для разработки, который есть, поэтому ваша разметка будет выглядеть примерно так:

<html>
  <head>...etc.</head>
  <body>

    <ul>
      <li class="nav" id="nav_one">1</li>
      <li class="nav" id="nav_two">2</li>
    </ul>

    <div class="section" name="one"> Section one</div>

    <div class="section" name="two"> Section two</div>

  </body>
</html>

JavaScript, чтобы найти, где находится каждый из разделов:

//define a sections object
var sections = {}

//find all sections on the page, then for each:
$('.section').each(function(){
  //add a property to the object with a key corresponding to the name
  //and a value corresponding to the offset from the top of the page.
  sections[$(this).attr('name')] = $(this).offset().top;
});

2. Где на странице находится пользователь?

Вторая часть головоломки состоит в том, чтобы найти, какие секции находятся в поле зрения. Это изменяется по мере scroll() пользователя, так как вы можете ожидать, вам нужно использовать обработчик события jQuery scroll():

//the function passed as an argument will be called every time the user scrolls.
$(document).scroll(function(){
  //get the new position
  var newPos = $(this).scrollTop();

  //configurable variable to decide how close a new section needs to be to the
  //top of the page before it considered the active one.
  var OFFSET = 100;

  //look at all the sections you have, and work out which one should be
  //considered active.
  for(name in sections){
    if(sections[name] > newPos && sections[name] < newPos + OFFSET){
      //the section with name = name is within OFFSET of the top

      //remove "active" styling from the previously active nav elements
      $('.nav').removeClass('active');

      //make the nav element with an id of nav_sectionname active.
      $('#nav_' + name).addClass('active'); 
    }
  }
});

Пример Codepen здесь

Почему бы просто не использовать разделы HTML5? .nav не нужен. Оберните меню в nav и выберите элементы меню соответственно.
Да, вы могли бы сделать это для более семантического значения. Однако вопрос скорее в реализации JavaScript, чем в html. Я думаю, что мой ответ дает достаточно представления о том, как справиться с этой частью.
Оно делает. Я просто указывал на небольшие моменты для улучшения.