Боковая навигация для LandingPage как реализовать?
Добрый день уважаемые. Разбираюсь с панелью навигации по одностраничнику возникли вопросы, очень надеюсь что вы подскажите как решить. Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.block{
position: relative;
width: 100%;
height: 400px;
border: 1px solid #000;
}
#block1{
background-color: #f00;
}
#block2{
background-color: #0f0;
}
#block3{
background-color: #0ff;
}
#block4{
background-color: #f0f;
}
#block5{
background-color: #ff0;
}
h1{
margin: 0 auto;
text-decoration: none;
}
ul{
list-style-type: none;
}
.slider-nav {
position: fixed;
right: 5%;
top: 50%;
width: 50px;
height: 100px;
z-index: 100;
}
.slider-nav-menu li:nth-child(even) a {
background-color: black;
}
.slider-nav-menu li:nth-child(odd) a {
background-color: yellow;
}
.slider-nav-menu a {
display: block;
margin: 100% 0;
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50%;
}
a.menu-active {
position: relative;
transform: scale(1.4);
transiton: transform 0.5s;
}
a.menu-active:after {
position: absolute;
top: 50%;
left: 50%;
margin: -5px 0 0 -5px;
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #000;
background-color: #fff;
}
</style>
</head>
<body>
<nav class="slider-nav">
<ul class="slider-nav-menu">
<li><a class="block menu-active" href="#block1"></a></li>
<li><a class="block" href="#block2"></a></li>
<li><a class="block" href="#block3"></a></li>
<li><a class="block" href="#block4"></a></li>
<li><a class="block" href="#block5"></a></li>
</ul>
</nav>
<div id="block1" class="block"><h1>TEST1</h1></div>
<div id="block2" class="block"><h1>TEST2</h1></div>
<div id="block3" class="block"><h1>TEST3</h1></div>
<div id="block4" class="block"><h1>TEST4</h1></div>
<div id="block5" class="block"><h1>TEST5</h1></div>
</body>
<script type="text/javascript">
window.onload=function(){
var navigateMenu = $(".slider-nav-menu"),
activeMenu = $(".menu-active");
navigateMenu.on("click", $("li"), function(){
$(this).find("a").removeClass("menu-active");
$(this).find("a").addClass("menu-active"); // Что-то не то
});
}
</script>
</html>
Копия https://jsfiddle.net/BlackStar1991/sc0cL19m/4/ 1) Как присваивать класс menu-active только той ссылки на которую кликнул, удаляя перед этим данный класс со всех других? 2) Как реализовать добавление этого класса при прокрутке сайта? (Я прокрутил до 3 раздела у меня увеличился 3-й кружок, а со второго пропал), при этом размеры блоков в реальном проекте разные. |
Black_Star,
1.
window.onload=function(){
var navigateMenu = $(".slider-nav-menu"),
activeMenu = $(".menu-active");
navigateMenu.on("click", "li", function(){
activeMenu.removeClass("menu-active");
activeMenu = $(this).find("a").addClass("menu-active");
});
}
|
Цитата:
|
Black_Star,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style>
.block{
position: relative;
width: 100%;
height: 400px;
border: 1px solid #000;
}
#block1{
background-color: #f00;
height: 500px;
}
#block2{
background-color: #0f0;
height: 300px;
}
#block3{
background-color: #0ff;
height: 700px;
}
#block4{
background-color: #f0f;
height: 500px;
}
#block5{
background-color: #ff0;
}
h1{
margin: 0 auto;
text-decoration: none;
}
ul{
list-style-type: none;
}
.slider-nav {
position: fixed;
right: 5%;
top: 50%;
width: 50px;
height: 100px;
z-index: 100;
}
.slider-nav-menu li:nth-child(even) a {
background-color: black;
}
.slider-nav-menu li:nth-child(odd) a {
background-color: yellow;
}
.slider-nav-menu a {
display: block;
margin: 100% 0;
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50%;
}
a.menu-active {
position: relative;
transform: scale(1.4);
transiton: transform 0.5s;
}
a.menu-active:after {
position: absolute;
top: 50%;
left: 50%;
margin: -5px 0 0 -5px;
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #000;
background-color: #fff;
}
</style>
</head>
<body>
<nav class="slider-nav">
<ul class="slider-nav-menu">
<li><a class="block menu-active" href="#block1"></a></li>
<li><a class="block" href="#block2"></a></li>
<li><a class="block" href="#block3"></a></li>
<li><a class="block" href="#block4"></a></li>
<li><a class="block" href="#block5"></a></li>
</ul>
</nav>
<div id="block1" class="block"><h1>TEST1</h1></div>
<div id="block2" class="block"><h1>TEST2</h1></div>
<div id="block3" class="block"><h1>TEST3</h1></div>
<div id="block4" class="block"><h1>TEST4</h1></div>
<div id="block5" class="block"><h1>TEST5</h1></div>
</body>
<script type="text/javascript">
window.onload = function() {
var navigateMenu = $(".slider-nav-menu"),
activeMenu = $(".menu-active");
navigateMenu.on("click", "li", function() {
activeMenu.removeClass("menu-active");
activeMenu = $(this).find("a").addClass("menu-active")
});
var blocks = $.map($("div.block"), function(el) {
return $(el).offset().top
});
$(window).scroll(function() {
var top = $(this).scrollTop() + $(window).height() / 2;
var i = blocks.reduce(function(a, b, i) {
return b > top ? a : i
}, 0);
$("li", navigateMenu).eq(i).trigger("click")
})
};
</script>
</html>
|
:thanks: Очень круто, огромное спасибо
|
| Часовой пояс GMT +3, время: 17:03. |