Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.02.2017, 20:38
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 292

Боковая навигация для 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-й кружок, а со второго пропал), при этом размеры блоков в реальном проекте разные.
Ответить с цитированием
  #2 (permalink)  
Старый 21.02.2017, 20:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,101

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");

    });
  }
Ответить с цитированием
  #3 (permalink)  
Старый 21.02.2017, 20:55
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 292

Сообщение от рони Посмотреть сообщение
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");

    });
  }
Класс который удаляет сам себя, это круто Спасибо. А как быть со вторым вопросом?
Ответить с цитированием
  #4 (permalink)  
Старый 21.02.2017, 21:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,101

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>
Ответить с цитированием
  #5 (permalink)  
Старый 21.02.2017, 21:37
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 292

Очень круто, огромное спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как правильно реализовать ветку для ввода пароля?(начальный уровень) WhoAm7i7 Общие вопросы Javascript 9 18.05.2016 19:20
initComponent: Как получить данные родителя и как получить store для вызова load()? Пролетарий ExtJS 76 04.07.2015 10:22
Как реализовать ввод данных в скрипт? Ko1dun Events/DOM/Window 5 13.11.2011 20:33
Как изменить скрипт, что бы им его можно было использовать для нужной страницы Nick50_70 Общие вопросы Javascript 0 28.04.2009 23:30
Можно ли как для произвольного массива создавать вызовы функций , имеющих на входе kefi Общие вопросы Javascript 3 17.04.2009 16:53