2015-03-17 4 views
0

Я занимаюсь этой проблемой с тех пор, и теперь я надеюсь, что кто-то здесь может мне помочь. Я пытаюсь сделать липкую навигацию и 100% высоты заголовка (тело и html установлены на 100% высоты тоже). В основном проблема заключается в том, что липкая навигация работает только после загрузки страницы (повторно). Однако прокрутка после изменения размера окна браузера заставит навигацию либо перейти на раннюю, либо позднюю к фиксированной позиции на самом верху. Мне нужно было бы реализовать событие изменения размера, которое, как я полагаю, так, что вычисление переменной «navOffset» срабатывает каждый раз, когда изменяется размер окна, правильно? Я пробовал много способов вставить это в свой код, который также объясняется в приведенной ниже ссылке, но я все время сворачивал. Надеюсь, кто-то может раскрыть этот секрет мне, поскольку я схожу с ума по этому поводу.Браузер Изменение размера события для липкой навигации

Спасибо большое и отлично проведу неделю!

Sascha

Пример эффекта я хочу добиться: http://html5-webdesign.berlin/

Учебники, которые не помогают мне: https://stackoverflow.com/ .../JQuery-зерноуборочных документа готовые и ...

jQuery(document).ready(function() { 
 

 
var navOffset = jQuery("nav").offset().top; 
 

 
jQuery("nav").wrap('<div class="nav-placeholder"></div>'); 
 
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight()); 
 

 
jQuery(window).scroll(function() { 
 
var scrollPos = jQuery(window).scrollTop(); 
 

 
if (scrollPos >= navOffset) { 
 
jQuery("nav").addClass("fixed"); 
 
} else { 
 
jQuery("nav").removeClass("fixed"); 
 
} 
 
}); 
 
});

ответ

0

Просто скопировать вторую функцию (которую вы, вероятно, следует назвать) и добавить его в случае изменения размера окна:

jQuery(document).ready(function() { 

var navOffset = jQuery("nav").offset().top; 

jQuery("nav").wrap('<div class="nav-placeholder"></div>'); 
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight()); 

function setPosition() { 
var scrollPos = jQuery(window).scrollTop(); 

if (scrollPos >= navOffset) { 
jQuery("nav").addClass("fixed"); 
} else { 
jQuery("nav").removeClass("fixed"); 
} 
} 

jQuery(window).scroll(setPosition); 

jQuery(window).resize(setPosition); 
}); 
+1

Привет @ firefoxuser_1, большое спасибо за ваш ответ. Я просто опробовал новый код, но, к сожалению, навигация по-прежнему продолжает прыгать после изменения размера окна, тогда как при повторной загрузке страницы в новом размере окна она снова работает. Я не знаю, в чем проблема. Может быть, есть конфликт с некоторыми правилами CSS, такими как html, body { height: 100%; margin: 0; прокладка: 0; } – Sascha