Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.12.2012, 11:32
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Фиксированный элемент и скроллинг до якоря
Здравствуйте.

На сайте имеется меню. При прокрутке и достижении им верхней границы окна, оно фиксируется:

$(window).scroll(function() {
	var scrollTop = $(window).scrollTop();
	if (scrollTop >= 349){
		$('div.wrapper-menu').addClass("up").css({
			position: 'fixed'
		});
	}
	if (scrollTop < 349){
		$('div.wrapper-menu').removeClass("up").css({
			position: 'relative'
		});
	}
});


Ссылки меню ссылаются на якоря в документе и скроллятся следующим скриптом:

$("div.menu a").click(function () {
	elementClick = $(this).attr("href");
	destination = $(elementClick).offset().top-40;
	if($.browser.safari){
		$('body').animate( { scrollTop: destination }, 1100 );
	} else {
		$('html').animate( { scrollTop: destination }, 1100 );
	}
	return false;
});


В данном скрипте на третей строке я отнял 40 пикселей - это высота меню.

Проблема заключается в следующем: при первом клике скроллинг осуществляется без учета этих 40 пикселей и часть контента скрыта меню. В дальнейшем высота меню учитывается и скроллится все идеально.

Подскажите пожалуйста в чем проблема и как ее решить.
Ответить с цитированием
  #2 (permalink)  
Старый 22.12.2012, 21:09
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

spo,
Возможно неполное разворачивание контента на первом входе, если есть картинки и фреймы

Попробуйте обрамить
$(document).ready(function(){
  $(window).scroll(function() {
	var scrollTop = $(window).scrollTop();
	if (scrollTop >= 349){
		$('div.wrapper-menu').addClass("up").css({
			position: 'fixed'
		});
	}
	if (scrollTop < 349){
		$('div.wrapper-menu').removeClass("up").css({
			position: 'relative'
		});
	}
 });
});
Ответить с цитированием
  #3 (permalink)  
Старый 23.12.2012, 09:22
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Не помогло.
Ответить с цитированием
  #4 (permalink)  
Старый 27.12.2012, 09:43
Аватар для spo
spo spo вне форума
Профессор
Отправить личное сообщение для spo Посмотреть профиль Найти все сообщения от spo
 
Регистрация: 11.05.2011
Сообщений: 213

Вопрос решен.
Проблема заключалась в том, что при скроллинге, когда меню фиксировалось, оно выпадало из общего потока и весь контент смещался вверх Нужно было просто поместить меню в контейнер которому задать фиксированную высоту.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Скроллинг клавишами и липкие блоки bes Общие вопросы Javascript 11 12.06.2012 22:08
Drag-n-Drop - перетянуть элемент Jugo ExtJS 1 10.08.2011 19:10
Как передать элемент в переменную из функции kichSman jQuery 3 12.07.2011 22:16
Скроллинг с задержкой vladpro Общие вопросы Javascript 3 24.01.2011 14:00
Кодировка при использовании Ajax Nichloas AJAX и COMET 9 17.09.2009 16:06