-4

введите сюда описание изображения

введите сюда описание изображения

Не могу нигде найти, как называется данный эффект.

6
  • 1
    не понятно что Вам надо получить 29 июл 2019 в 13:16
  • 1
    scrollspy наверн
    – user212578
    29 июл 2019 в 13:17
  • @StrangerintheQ это навигация по сайту
    – filicaliva
    29 июл 2019 в 16:04
  • а эффект тотв чем заключается? 29 июл 2019 в 16:06
  • @StrangerintheQ вот я хз как обьяснить, короче скролишь вниз меняется блок подсвечивается вторая точка и тд
    – filicaliva
    29 июл 2019 в 16:07

1 ответ 1

1

Называется такой эффект scrollspy

$(window).bind('scroll', function() {
    var currentTop = $(window).scrollTop();
    var elems = $('.scrollspy');
    elems.each(function(index){
      var elemTop 	= $(this).offset().top;
      var elemBottom 	= elemTop + $(this).height();
      if(currentTop >= elemTop && currentTop <= elemBottom){
        var id 		= $(this).attr('id');
        var navElem = $('a[href="#' + id+ '"]');
    navElem.parent().addClass('active').siblings().removeClass( 'active' );
      }
    })
}); 
.active{
  color: red;
  background-color: red;
}

#nav{
  position:fixed;
  top:0;
  right:50%;
}

section{
  min-height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav" class="navbar navbar-template">
        <div class="row col-xs-12 text-center">
          <ul>
            <li class="active">
              <a href="#Home">Home</a>
            </li>
            <li>
              <a href="#AboutUs">AboutUs</a>
            </li>
            <li>
              <a href="#Images">Images</a>
            </li>
            <li>
              <a href="#Contact">Contact</a>
            </li>
          </ul>
        </div>
      </nav>

      <section class="scrollspy" id="Home">
      Home
      </section>

      <section class="scrollspy" id="AboutUs">
      AboutUs
      </section>

      <section class="scrollspy" id="Images">
      Images
      </section>

      <section class="scrollspy" id="Contact">
      Contact
      </section>

2
  • Вот так вот, помогаешь людям а они дизлайки лупят(((
    – makcim512
    29 июл 2019 в 16:36
  • Спасибо большое реально помог)
    – filicaliva
    29 июл 2019 в 17:09

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