Плавающее меню или якоря с анимацией прокрутки

Я часто использую данный элемент в своих лендингах. Его можно изменять до неузнаваемости, оставляя лишь суть. Покажу Вам базовый его вид, который при желании сможете подогнать под себя. В живую все это выглядит как на странице примера. (Листайте вниз или наводите курсором на точки, чтобы увидеть всплывающие подсказки).

Чтобы организовать у себя на лендинге такой же эффект, вам понадобится немного навыков по верстке и выполнения нескольких шагов. Для начала нужно понять принцип работы. это те ще якоря, что перебрасывают на определенный блок с определенным айди на странице при нажатии. То бишь у вас на странице должны быть блоки с нужными ID. Для нашего меню это будет так. У нас будет 6 блоков. HTML разметка их будет такова.

<div id="b_1"> Содержимое блока </div>
<div id="b_2"> Содержимое блока </div>
<div id="b_3"> Содержимое блока </div>
<div id="b_4"> Содержимое блока </div>
<div id="b_5"> Содержимое блока </div>
<div id="b_6"> Содержимое блока </div>

Как понимаете у каждого блока свой id - b_1, b_2, b_3 и тд. Эти айди очень важные их название нам еще пригодится. Содержимое блоков должно быть объемным, чтобы была возможность скроллинга. Если вы вот так пустыми их добавите, то якоря работать не будут ибо все блоки уже в зоне просмотра.

Далее добавляем разметку уже для нашего плавающего меню.

<div id="fix_nv">
<ul class="sllft">
<li><span class="sl_lt">Блок 1</span>
<a class="n_1" href="#b_1"></a></li>
<li><span class="sl_lt">Блок 2</span>
<a class="n_2" href="#b_2"></a></li>
<li><span class="sl_lt">Блок 3</span>
<a class="n_3" href="#b_3"></a></li>
<li><span class="sl_lt">Блок 4</span>
<a class="n_4" href="#b_4"></a></li>
<li><span class="sl_lt">Блок 5</span>
<a class="n_5" href="#b_5"></a></li>
<li><span class="sl_lt">Блок 6</span>
<a class="n_6" href="#b_6"></a></li>
</ul>
</div>

По коду видно, что внутри главного контейнера с айди fix_nv. Внутри список с пунктами, якорями. Как видите ссылки якорей, это айди наших блоков - #b_1, #b_2,#b_3 и тд. Так же, помимо ссылок с якорями имеются span-ы с названиями, что появляются при наведении на точки якоря. Все айди и классы очень важны. Их названия будут использоваться в скрипте, что и будет совершать всю анимацию.

Чтобы наше плавающее меню отобразилось корректно, нужно добавить ему стили. Стили расписывать подробно нет смысла, сложного в них ничего нет. Данная статья рассчитана, на тех кто умет работать с кодом и CSS это азы.

#fix_nv{z-index:5;position:fixed;height:100%;top:0;right:16px;text-align: center;}
#fix_nv:after {display:inline-block;vertical-align:middle;width:0;height:100%;content:'';}
#fix_nv ul{display:inline-block;vertical-align:middle;position:relative;list-style:none;}
#fix_nv li {position:relative;height:30px;}
#fix_nv a {display:block;width:20px;height:20px;text-indent:-9999px;background:#ccc;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;box-shadow:inset 0 2px 3px rgba(0,0,0,.2);-webkit-box-shadow:inset 0 2px 3px rgba(0,0,0,.2);-moz-box-shadow:inset 0 2px 3px rgba(0,0,0,.2);}
#fix_nv a:hover,#fix_nv .actv_b{background:#de2e54;}
#fix_nv span{background:#de2e54;position:absolute;right:32px;top:-7px;text-align:center;display:none;padding:8px 15px 8px;color:#fff;white-space:nowrap;font-size:18px;-webkit-border-radius:25px;-moz-border-radius:25px;border-radius:25px;-webkit-box-shadow:0px 8px 10px 0px rgba(50, 50, 50, 0.2);-moz-box-shadow:0px 8px 10px 0px rgba(50, 50, 50, 0.2);box-shadow:0px 8px 10px 0px rgba(50, 50, 50, 0.2);}

Завершающим шагом в добавлении нашего меню индикатора прокрутки - добавления скрипта. Для его работы потребуется еще подключить библиотеку jQuery. Как правильно подключить ее и скрипт, можно прочитать в статье Как и где подключить скрипт?.

Сама библиотека:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

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

Сам скрипт выгладит так:

jQuery(document).ready(function($){
redrawDotNav();
$(window).bind('scroll',function(e){redrawDotNav();});
$('.n_1').click(function(){$('html, body').animate({scrollTop:0}, 1000);return false;});
$('.n_2').click(function(){$('html, body').animate({scrollTop:$('#b_2').offset().top}, 1000);return false;});
$('.n_3').click(function(){$('html, body').animate({scrollTop:$('#b_3').offset().top}, 1000);return false;});
$('.n_4').click(function(){$('html, body').animate({scrollTop:$('#b_4').offset().top}, 1000);return false;});
$('.n_5').click(function(){$('html, body').animate({scrollTop:$('#b_5').offset().top}, 1000);return false;});
$('.n_6').click(function(){$('html, body').animate({scrollTop:$('#b_6').offset().top}, 1000);return false;});

$('#fix_nv a').hover(
function(){$(this).prev('span').show();},
function(){$(this).prev('span').hide();});

function redrawDotNav(){
var section1Top =  0;
var section2Top =  $('#b_2').offset().top - (($('#b_3').offset().top - $('#b_2').offset().top) / 2);
var section3Top =  $('#b_3').offset().top - (($('#b_4').offset().top - $('#b_3').offset().top) / 2);
var section4Top =  $('#b_4').offset().top - (($('#b_5').offset().top - $('#b_4').offset().top) / 2);
var section5Top =  $('#b_5').offset().top - (($('#b_6').offset().top - $('#b_5').offset().top) / 2);
var section6Top =  $('#b_6').offset().top - (($(document).height() - $('#b_6').offset().top) / 2);
$('#fix_nv a').removeClass('actv_b');
if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){
$('#fix_nv a.n_1').addClass('actv_b');
} else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){
$('#fix_nv .n_2').addClass('actv_b');
} else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top){
$('#fix_nv .n_3').addClass('actv_b');
} else if ($(document).scrollTop() >= section4Top && $(document).scrollTop() < section5Top){
$('#fix_nv .n_4').addClass('actv_b');
} else if ($(document).scrollTop() >= section5Top && $(document).scrollTop() < section6Top){
$('#fix_nv .n_5').addClass('actv_b');
} else if ($(document).scrollTop() >= section6Top){
$('#fix_nv .n_6').addClass('actv_b');}	
}
});

Попробую объяснить что тут и как это работает. Самое важное, что в скрипте используются айди и классы наших блоков, меню и тд. так что тут очень важно не напутать и в случаи переименования сделать это правильно.

• С 4 по 9 строку, код отвечающий за плавную анимацию при нажатии на точки меню. Там указаны классы точек и ссылки якорей.
• С 11 по 13 строку кода, код что отвечает за появления всплывающих подсказок с названием пунктов.
• С 16 по 21 строку - мы задаем переменные для анимации подсвечивания нужной точки.
• У и с 22 строки и до конца, код который и подсвечивает нужную точку. то бишь тот пункт меню, что соответствует блоку, что находится в зоне просмотра страницы перед посетителем. Короче говоря, делает красным точку активного блока.

Если вы немного работаете с java, то разобраться подробнее с кодом будет не проблема. Так же по коду видно что количество переменных, анимаций соответствует нашим 6 пунктам в меню. Если вам нужно больше или меньше, то в скрипт их тоже нужно добавлять. Это очень важно, в противном случаи вся конструкция работать не будет. Если внимательно изучите скрипт, то поймете как это сделать. сложного ничего нет, тем более скрипт я так подготовил, чтобы было понятно. По сути нужно добавлять и удалять строки с указанием правильных айди и классов.

Особо сложного в статье ничего нет. Как и писал ранее, она рассчитана на людей которые верстают не первый день. Все же универсального и персонального решения тут нет. Все равно, нужно подгонять под себя и для этого понадобятся знания.

На этом все, спасибо за внимание. 🙂