Плавающая навигация

<!--Плавающая навигация-->
<!--https://mt-webdesign.ru/floating-nav-->
<!--Настройки меню-->
<style>
:root {
--LinkColorFloating: #fff; /*цвет ссылок*/
--LinkColorHoverFloating: #000; /*цвет ссылок при наведении и в активном состоянии*/
--FollowerFloatingColor: #DBDBDB; /*цвет фоловера*/
--FollowerFloatingTop: -57px; /*отступ фоловера сверху (регулируется индивидуально*/
--FollowerFloatingHeight: 50px; /*высота фоловера*/
--FollowerFloatingBorderRadius: 16px; /*размер скругления углов на фоловере*/
}
</style>
<style>
@media only screen and (max-width: 6000px) and (min-width: 1000px) {
.btn-floating {
position: fixed;
z-index: 99 !important;
}
.link-floating {
position: fixed;
z-index: 99 !important;
color: var(--LinkColorFloating) !important; 
}
.link-floating.follower-active .tn-atom {
transition: all 0.3s ease-out;
}
.link-floating .tn-atom {
transition: all 0.3s ease-out;
color: var(--LinkColorFloating) !important; 
}
.link-floating.follower-active .link-active,
.link-floating .link-active {
transition: all 0.3s ease-out;
color: var(--LinkColorHoverFloating) !important; 
}
.follower-active .tn-atom {
transition: all 0.3s ease-out;
color: var(--LinkColorFloating) !important; 
}
.bg-menu-follower {
position: fixed;
z-index: 97 !important;
}
.follower-floating {
position: fixed;
width: auto;
margin-top: var(--FollowerFloatingTop);
height: var(--FollowerFloatingHeight);
border-radius: var(--FollowerFloatingBorderRadius);
background-color: var(--FollowerFloatingColor);
opacity: 1;
transition: all 0.3s ease-out;
z-index: 98;
}
}
</style>
<script>
$(document).ready(function() {
// указать разрешение с которого начнет работать скрипт (1000px и выше - это ширина окна браузера)
if (window.innerWidth >= 1000) {
$(function() {
var activeLink;
$('.active-floating').addClass('link-floating');
$('.link-floating').wrapAll('<div class="wrapper-floating"></div>');
$('<div>').addClass('follower-floating transparent').appendTo('.wrapper-floating');
function updateFollowerPosition() {
var active = $('.link-active');
if (active.length === 0) return;
var width = active.outerWidth();
var scrollTop = $(window).scrollTop();
var left = active.offset().left;
var top = active.offset().top - scrollTop + active.outerHeight() - 3;
$('.follower-floating')
.css({
'width': width + 'px',
'left': left + 'px',
'top': top + 'px'
});
activeLink = active.attr("href"); 
}
updateFollowerPosition();
setTimeout(function() {
$('.follower-floating')
.removeClass('transparent')
.css({
'opacity': 1
});
}, 500);
$('.wrapper-floating .link-floating').on('mouseenter', function() {
var $this = $(this);
var width = $this.outerWidth();
var scrollTop = $(window).scrollTop();
var left = $this.offset().left;
var top = $this.offset().top - scrollTop + $this.outerHeight() - 3;
$('.follower-floating')
.css({
'width': width + 'px',
'left': left + 'px',
'top': top + 'px',
'opacity': 1
});
$('.link-floating').removeClass('follower-active'); 
$this.addClass('follower-active'); 
$('.link-active').removeClass('link-active'); 
$this.find('.tn-atom').addClass('link-active'); 
});
$('.wrapper-floating').on('mouseleave', function() {
$('.follower-floating')
.css({
'opacity': 1
});
});
$(window).on('scroll', function() {
updateFollowerPosition();
updateLinkColors(); 
});
var topMenuHeight = $('.uc-nav-active').outerHeight() + 150;
var menuItems = $(".link-floating a"),
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
function updateLinkColors() {
var fromTop = $(window).scrollTop() + topMenuHeight;
var cur = scrollItems.map(function(){
var itemTop = $(this).offset().top;
var itemBottom = itemTop + $(this).outerHeight();
if (itemTop < fromTop && itemBottom > fromTop)
return this;
});
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
menuItems
.removeClass("link-active")
.filter("[href='#"+id+"']").addClass("link-active");
if (activeLink && id === activeLink.substr(1)) {
updateFollowerPosition();
}
}
$(window).scroll(function(){
updateLinkColors();
});
});
}
});
</script>