Вертикальная навигация - последняя точка не активна и добавляет метки к каждой точке

Question

Я новичок в jquery и javascript. У меня проблемы с вертикальной навигацией.

Проблема в том, что когда я прокручиваю страницу вниз, все точки подсвечиваются, как и ожидалось, за исключением последней точки. Если щелкнуть последнюю точку, она перейдет к последнему разделу, но останется невыделенным.

  $('.awesome-tooltip').tooltip({
    placement: 'left'
  });

  $(window).bind('scroll', function(e) {
    dotnavigation();
  });

  function dotnavigation() {

    var numSections = $('.anchor').length;

    $('nav#dot-nav li a').removeClass('active').parent('li').removeClass('active');
    $('.TV').each(function(i, item) {
      var ele = $(item),
        nextTop;

      console.log(ele.next().html());

      if (typeof ele.next().offset() != "undefined") {
        nextTop = ele.next().offset().top;
      } else {
        nextTop = $(document).height();
      }

      if (ele.offset() !== null) {
        thisTop = ele.offset().top - ((nextTop - ele.offset().top) / numSections);
      } else {
        thisTop = 0;
      }

      var docTop = $(document).scrollTop();

      if (docTop >= thisTop && (docTop < nextTop)) {
        $('nav#dot-nav li').eq(i).addClass('active');
      }
    });
  }

  /* get clicks working */
  $('nav#dot-nav li').click(function() {

    var id = $(this).find('a').attr("href"),
      posi,
      ele,
      padding = 0;

    ele = $(id);
    posi = ($(ele).offset() || 0).top - padding;

    $('html, body').animate({
      scrollTop: posi
    }, 'slow');

    return false;
  });

  /* end dot nav */

body {
  background: #f0f0f0;
}
body,
html {
  height: 100%;
}

.TV {
  padding: 13% 0;
  height: 100%;
}
nav#dot-nav {
  right: 10px;
  top: 50%;
  margin-top: -50px;
  height: 100px;
  z-index: 999;
}

nav#dot-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
	cursor: default;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
nav#dot-nav li {
  position: relative;
  background-color: #bdc3c7;
  
  border-radius: 50%;
  cursor: pointer;
  padding: 5px;
  height: 10px;
  margin: 10px 10px 0px 0px;
  width: 10px;
  vertical-align: bottom;
}
nav#dot-nav li.active,
nav#dot-nav li:hover {
  background-color: red;
  	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

nav#dot-nav a {
  outline: 0;
  vertical-align: top;
  margin: 0px 0px 0px 25px;
  position: relative;
  top: -5px;
  	-webkit-transition: -webkit-transform 0.3s ease, background-color 0.3s ease;
	transition: transform 0.3s ease, background-color 0.3s ease;
}
.awesome-tooltip + .tooltip > .tooltip-inner {

  color: #f5f5f5;
  border: 1px solid #8e44ad;
}
.awesome-tooltip + .tooltip.left > .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #8e44ad;
}

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
 
 <nav data-spy="affix" id="dot-nav" >
    <ul>
      <li class="awesome-tooltip active" title="One"><a href="#One"></a></li>
      <li class="awesome-tooltip" title="Two"><a href="#Two"></a></li>
      <li class="awesome-tooltip" title="Three"><a href="#Three"></a></li>
      <li class="awesome-tooltip" title="Four"><a href="#Four"></a></li>
      <li class="awesome-tooltip" title="Five"><a href="#Five"></a></li>
    </ul>
  </nav>

  <div class="TV">
    <div class="container">

      <a id="One" class="anchor"></a>

      <div class="row">
        <div class="col-md-12">
          <h1>One<small>Secondary text</small></h1>
          <p>
            This is a content.
          </p>
        </div>
      </div>

    </div>
  </div>
  <div class="TV">
    <div class="container">
      <a id="Two" class="anchor"></a>

      <div class="row">
        <div class="col-md-12">
          <h1>two <small>Secondary text</small></h1>
          <p>
            This is a content.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="TV">
    <div class="container">
      <a id="Three" class="anchor"></a>

      <div class="row">
        <div class="col-md-12">
          <h1>three <small>Secondary text</small></h1>
          <p>
            This is a content.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="TV">
    <div class="container">
      <a id="Four" class="anchor"></a>

      <div class="row">
        <div class="col-md-12">
          <h1>four <small>Secondary text</small></h1>
          <p>
            This is a content.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="TV">
    <div class="container">
      <a id="Five" class="anchor"></a>
      <div class="row">
        <div class="col-md-12">
          <h1>five <small>Secondary text</small></h1>
          <p>
            This is a content.
          </p>
        </div>
      </div>
    </div>
  </div>

Вопрос 1) вертикальная точка навигации не активируется при наведении курсора мыши на последнюю точку на этой странице.

Вопрос 2) Я хочу, чтобы заголовок отображался в тексте при наведении на точки. Есть ли способ, которым я могу просто показать заголовок рядом с точками в виде обычного текста?

https://jsfiddle.net/riodahamster/3ug0jnqv/

Answer 1

Попробуйте добавить логи c, когда

if(docTop == nextTop){
   $('nav#dot-nav li').eq(i+1).addClass('active');
 }

после

if (docTop >= thisTop && (docTop < nextTop)) {
   $('nav#dot-nav li').eq(i).addClass('active');
 }

, возможно, это решит вашу проблему.

Примечание: в вашей подсказке скрипки не работает, и вы не добавили $ (документ) .ready

Answer 2

Проблема в этой строке:

ele.next()

в скрипке (как минимум), всегда есть что-то после последнего .TV - в данном случае элемент script. Таким образом, ваш код никогда не распознает, когда он последний .TV

Чтобы исправить это, вы можете:

• добавить проверку для "is last" или аналогичного
• wrap все div .TV в другом div, а затем 5-й будет последним, но может иметь другие эффекты
• или вы можете использовать:

ele.next(".TV")

, который даст вам следующий элемент и отфильтруйте его в .TV (ie он делает ele.next().filter(".TV"), который затем даст вам нулевое значение, когда он последний, поэтому проверка «undefined» сработает, и ваш 5-й узел будет работать правильно.

Обновленная скрипка: https://jsfiddle.net/0dfsLneq/