Панель меню навигации с плавной прокруткой jQuery

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

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

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

маршрут №1) Плавная прокрутка Криса Койера

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

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

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

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

маршрут № 2) getElementbyId Уильяма Мало

Мне нравится и я использовал это решение в первую очередь.

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

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

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

--

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

  • цель href точно смещена независимо от ширины браузера (может быть, решение иметь смещение diff на основе ширины браузера diff)?, ИЛИ

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

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


jquery wordpress-theming smooth-scrolling
person ajmalafif    schedule 04.07.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

это ДЕМО

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;});
    }
person Barlas Apaydin    schedule 04.07.2012
comment
Эй, спасибо за указатель! Я работаю над тем, чтобы заставить его работать с моим сайтом (почему-то это не работает на моем сайте). Но этого должно быть достаточно, чтобы я начал работать. Ценить это! И требовать 15 репутации, чтобы проголосовать за это смешно ТАК! - person ajmalafif; 04.07.2012
comment
Я рад, что смог помочь :) вам не нужно голосовать, просто выберите его как ответ, если он сработал (: - person Barlas Apaydin; 04.07.2012