jQuery плавная панель навигации с плавающей запятой

Question

Итак, я экспериментировал с RootsTheme (который использует Bootstrap), Wordpress (из фона Joomla!) И Pagodabox;

вот результат этого: http://ajmalafif.com/

Однако у меня возник некоторые известные проблемы с навигационной панелью с любым яваскриптом решением, которое я пробовал:

маршрут # 1) Крис Coyier гладкой прокрутка

В настоящее время мой сайт работает на этом.

что не работает - для меньшего экрана или когда браузер изменен, то нав остановится неловко гораздо выше высоты (так как он настроен на смещение в -90px по ширине> 1200px экран)

, что работает - следующая & предыдущей кнопка соединения для работы изображения (нажмите на mysite.com # ссылка не конфликт между нав бар якоря и изображение ссылки щелчка якоря)

примером кода: http://jsfiddle.net/ajmalafif/LvPUC/1/

маршрута # 2) getE lementbyId

Сначала я использовал это решение и использовал его.

что не работает - у него нет офсетного решения, поэтому он останавливается непосредственно на заголовке h1 и блокирует его вид. - он конфликтует с bootstrap-carousel.js, где после щелчка по карусели изображения экран/навигатор перемещается и выравнивает изображение с верхней частью браузера.

Что работает - Он работает с любым размером браузера (и при изменении размера) и нацелен/соответственно.

пример кода: http://jsfiddle.net/ajmalafif/bReUF/

-

Это может выглядит как маршрут № 1 является явным победителем, но как то, что в настоящее время работает на моем сайте, он имеет несколько глюков, особенно когда вид, скажем, внутри iPad. Итак, есть ли какой-либо указатель/помощь, я могу заставить это работать либо;

• A HREF цель точно смещение независимо от ширины браузера (возможно решение, что дифференциал смещения на основе ширины Diff браузера) ?, ИЛИ

• способ смещения при использовании раствора getElementbyId (см route # 2) И сделать его совместимым с bootstrap-carousel.js (так что он не перемещается сам, когда нажимает другой карусель изображения # anchor tag)?

Спасибо за вашу заботу и время, чтобы взглянуть на это.

Answer 1

вы можете рассчитать высоту браузера и прокрутку возврата для этой переменной;

here is DEMO

var browH = $(window).height(); 
      //alert(browH); 
    if (browH < 500) { 
     $(scrollElem).animate({scrollTop: targetOffset-80}, 800,function() { location.has = target;}); 
    } 
    else if (browH > 500) { 
     $(scrollElem).animate({scrollTop: targetOffset-80}, 400,function() { location.has = target;}); 
    }