Панель навигации по заголовкам в таблице

by Denis Tverdokhlebov

HTML

<div id="object_data_body">
    <table>
        <tr class="link_group_header"><td colspan="3"><p>Заголовок 1</p></td></tr>
        <tr class="link_group_header"><td colspan="2"><p>Заголовок 2</p></td></tr>
        <tr class="link_group_header"><td colspan="2"><p>Заголовок 3</p></td></tr>
        <tr class="link_group_header"><td colspan="2"><p>Заголовок 4</p></td></tr>
    </table>
</div>

CSS

.box-crew {
    height: 50px;
    /*overflow: hidden;*/
    position: fixed;
    right: 0;
    top: 0;
    width: 430px;
}

.box-crew span{
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    top: -100px;
    transition-duration: 0.6s;
    width: 100%;
}

div.box-crew:hover span{
    top:0;
}

.bulets_1 {
    background: none repeat scroll 0 0 #000000;
    border-radius: 0 0 8px 8px;
    font-size: 35px;
    height: 50px;
    margin: 0;
    opacity: 0.70;
    padding: 1px 0;
    /*display:block;*/
}

.bulets_1 a:hover{
    color: #62000F;
}

.bulets_1 a{
    text-transform: none;
    text-decoration: none;
    font-family: MuseoSansCyrl300;
    font-size: 18px;
}

.bulets_1 li{
    list-style: none;
    display: inline;
}

.bulets_1 ul {
    margin: 9px 39px;
    padding: 0;
}

JavaScript

//********Генерация якорей на заголовках**********//

//Берем все заголовки заключенные в тег "p" и помещенные в класс "link_group_header", и добавляем к ним якоря
$(function(){
	$('.link_group_header p').each(function(Index){
		$(this).wrap("<section class='zagol' id='link_"+Index+"'></section>");
	})


//********Генерация блока навигации в хедере**********//

var part_1 = '<a href="';//просто отрывок общего куска html 1
var part_2 = '#link_1';//линк для перехода из панели навигации
var part_3 = '" class="scrollto hint--bottom" data-hint="';//просто отрывок общего куска html 3
var part_4 = 'Заголовок 1';//подсказка для кнопки перехода
var part_5 = '"><li><img src="/images/bullet.png"></li></a>';//просто отрывок общего куска html 5

var a_link = part_1 + part_2 + part_3 + part_4 + part_5;//собираем общий кусок html из компонентов выше.

var generate_slide = document.createElement ('div'); generate_slide.id = 'full_body_slide';//создаем новый див
document.getElementById ("object_data_body").appendChild (generate_slide);//добавляем новый див в конец блока с контентом

//составляем конструкцию панельки для навигации по заголовкам и кладем ее в созданный див
$(generate_slide).html('<div id="slide_mnu_1" class="box-crew"></div>'); 
$('#slide_mnu_1').html('<span><div id="slide_mnu_2" class="bulets_1"></div></span>');
$('#slide_mnu_2').html('<ul id="slide_mnu_ul"></ul>');0
$('#slide_mnu_ul').html(a_link);

var mass_zagol = document.getElementsByClassName("zagol");//получаем массив из заголовков
var mass_zagol_length = mass_zagol.length;//получаем длину массива с заголовками

var id_only = document.getElementsByClassName("zagol")[0].id;// забираем id у одного из элементов массива

//Задаем условия, при панель навигации будет скрываться и показываться
if ($('.zagol').length < 1) {
$('#full_body_slide').hide();
$('#slide_mnu_1').hide();
}else{
$('#full_body_slide').show();
$('#slide_mnu_1').show();
}
    document.getElementById('#full_body_slide').style.visibility =...