CSS с фиксированным положением Nav, который скользит внизу страницы - PullRequest
Новая
       18

CSS с фиксированным положением Nav, который скользит внизу страницы

3 голосов
/ 08 августа 2011

Я работаю над своим сайтом, http://www.perezfox.com,, который имеет навигационное меню с фиксированным положением.Я доволен тем, как это работает, но есть проблема с окнами браузера с вертикальными вызовами.Пользователи, прокручивающие до конца, увидят, что навигационная панель перекрывается с нижним колонтитулом, потому что в их браузерах недостаточно вертикального пространства для размещения обоих.

Есть ли способ «выдвинуть» статическое навигационное меню в противном случае какстраница внизу подходит?Возможно, укажите расстояние до дна, которое переопределит позицию: фиксированный стиль?Один мой друг предложил мне следить за положением страницы и «запускать событие», но я не уверен, что это означает на практике.

Я доволен CSS и HTML, но большеначало с Javascript и JQuery.Любой совет приветствуется, помня об этом.Например, вам может потребоваться сказать что-то вроде «поместите это в тег скрипта в заголовке вашего сайта ...»

Заранее спасибо!

РЕДАКТИРОВАТЬ

Я нашел несколько примеров такого поведения, но большинство из них были обращены вспять.Например:

http://www.madebyparachute.com/products

На этом сайте элементы навигации [левый столбец] начинают прокручиваться и становятся фиксированными.Я хочу, чтобы мой старт был исправлен, стал прокручиваться.Кроме того, это касается вершины, а мое касается дна.Но я представляю, что это схожая функциональность на работе, не так ли?

Я ценю, что все оставляют отзывы, но после очень разочаровывающего дня с этими вещами, я должен умолять и умолять вас, пожалуйста, не бросайте код намне.Мне нужно немного инструкций, особенно если есть компоненты скрипта, CSS и HTML, работающие совместно.

Также обратите внимание, что я использую элементы HTML5 для

Ответы [ 2 ]

0 голосов
/ 08 августа 2011

Вы можете использовать jquery, чтобы установить навигацию для относительного позиционирования, если высота браузера слишком мала с использованием функции css .

Это может выглядетькак то так: 

$(window).resize(function() {
   if($(document).height() <= someNumber){
       $("#nav").css('position', 'static'); 
   } else {
       $("#nav").css('position', 'fixed'); 
   }
});
0 голосов
/ 08 августа 2011

Если вы не против того, чтобы не поддерживать старые браузеры, вы можете использовать CSS3 Media Queries , чтобы изменить стиль, когда окно становится слишком коротким. Это может выглядеть примерно так: 

@media screen and (max-height:300px) {
 navigation-element {
   position:relative;
 }
}

Обратите внимание, что для IE это работает только в 9+. Я думаю, что другие браузеры в порядке.

Редактировать

Если вам нужна поддержка старых браузеров, вы можете сделать что-то вроде: 

window.onresize = funciton() {
var sidebar = document.getElementById("idOfSidebar");
sidebar.style.position="relative";
//other styling stuff here
}
...