Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.07.2014, 15:02
Интересующийся
Отправить личное сообщение для AlertMod Посмотреть профиль Найти все сообщения от AlertMod
 
Регистрация: 18.03.2013
Сообщений: 11

Расчет высоты страницы
Доброго времени суток!
Помогите решить такую проблему.
Есть фиксированная навигация, с 5 элементами.
Так же есть 5 контейнеров на странице, нужно сделать так что бы допустим когда находишься на первой секции к первому элементу в навигации добавлялся класс, когда на втором - второму, и т.д.

есть у меня вот такой код

$(window).scroll(function() {
     if ($(window).scrollTop() <= 900) {
      $('#first').addClass("current");
     }
     else {
      $('#first').removeClass("current");
     }
	 if ($(window).scrollTop() >= 988 && $(window).scrollTop() <= 1899) {
      $('#second').addClass("current");
     }
     else {
      $('#second').removeClass("current");
     }
	 if ($(window).scrollTop() >= 1900 && $(window).scrollTop() <= 2899) {
      $('#third').addClass("current");
     }
     else {
      $('#third').removeClass("current");
     }
	 if ($(window).scrollTop() >= 2900 && $(window).scrollTop() <= 3699) {
      $('#fourth').addClass("current");
     }
     else {
      $('#fourth').removeClass("current");
     }
	 if ($(window).scrollTop() >= 3700) {
      $('#fifth').addClass("current");
     }
     else {
      $('#fifth').removeClass("current");
     }
  });


сделано на скорую руку, знания js у меня не большие.
все конечно работает, но клиент попросил сделать поддержку разрешения высотой в 800 (что бы инфа умещалась на одном экране)

вот тут то самая загвоздка, если через медиа запросы я буду изменять стили, то высота измениться, и мой код будет уже не рабочим,
вопрос в том как сделать чтобы вместо конкретной высоты (прописанной руками) сам скрипт расчитывал высоту каждого контейнера ( те что 5 штук) и сам составлял правильное условие.
Надеюсь на вашу помощь.

Демо
Ответить с цитированием
  #2 (permalink)  
Старый 31.07.2014, 17:29
Интересующийся
Отправить личное сообщение для AlertMod Посмотреть профиль Найти все сообщения от AlertMod
 
Регистрация: 18.03.2013
Сообщений: 11

расходимся пацаны )

лег поспать и придумал это

if ($(window).scrollTop() <= $("#part1").height()) {
Ответить с цитированием
  #3 (permalink)  
Старый 31.07.2014, 17:58
Интересующийся
Отправить личное сообщение для AlertMod Посмотреть профиль Найти все сообщения от AlertMod
 
Регистрация: 18.03.2013
Сообщений: 11

<script type="text/javascript">
  $(window).scroll(function() {
	a = $("#part1").height()
	b = $("#part2").height()
	c = $("#part3").height()
	d = $("#part4").height()
	e = $("#part5").height()
     if ($(window).scrollTop() <= a) {
      $('#first').addClass("current");
     }
     else {
      $('#first').removeClass("current");
     }
	 if ($(window).scrollTop() >= a && $(window).scrollTop() <= (a + b) ) {
      $('#second').addClass("current");
     }
     else {
      $('#second').removeClass("current");
     }
	 if ($(window).scrollTop() >= (a + b) && $(window).scrollTop() <= (a + b + c) ) {
      $('#third').addClass("current");
     }
     else {
      $('#third').removeClass("current");
     }
	 if ($(window).scrollTop() >= (a + b + c) && $(window).scrollTop() <= (a + b + c + d) ) {
      $('#fourth').addClass("current");
     }
     else {
      $('#fourth').removeClass("current");
     }
	if ($(window).scrollTop() >= (a + b + c + d) ) {
      $('#fifth').addClass("current");
     }
     else {
      $('#fifth').removeClass("current");
     }
  });
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Сборка страницы из блоков разной ширины и высоты Tmin10 Элементы интерфейса 1 20.08.2013 17:30
Расчёт высоты загруженного в окно контента с задержкой mirra88 Общие вопросы Javascript 1 15.08.2013 14:43
Отловить уход со страницы без учета обновления страницы IgorN Events/DOM/Window 7 12.03.2013 16:55
Определение высоты страницы nematod Общие вопросы Javascript 6 20.09.2011 14:30
Вычисление высоты страницы. keysi_ Events/DOM/Window 2 03.08.2010 18:03