Горизонтально фиксированный элемент с абсолютным вертикальным положением

#jquery #css

Вопрос:

У меня есть веб-сайт с горизонтальной прокруткой с меню заголовка … теперь, в какой-то момент, содержимое сайта достаточно длинное, чтобы показывать вертикальную полосу прокрутки. У меня фиксированное положение меню, поэтому прокрутка влево и вправо работает хорошо… но при прокрутке вниз меню, очевидно, переходит к содержимому. Мой вопрос в том, есть ли способ с помощью jquery / CSS зафиксировать меню при горизонтальной прокрутке, а затем полностью переместить его наверх при прокрутке вниз?

1. Привет, Мартин, мне не совсем понятно, что ты хочешь архивировать. Можете ли вы указать пример или добавить какое-нибудь изображение, которое проясняет?

2. Есть ли причина, по которой вам нужна фиксированная позиция? Также вы говорите: so scrolling to left and right works nicely почему нужно прокручивать страницу влево / вправо? Просто любопытно.

3. Конечно, вот пример: stack.latorante.name (не оптимизирован или что-то в этом роде, но вы правильно уловили суть?)

Ответ №1:

Вы можете использовать что-то вроде следующего (пример / скрипка):

CSS:

 #headerMenu {
   position: absolute;
}

jQuery:

 $(window).scroll(function(){
   $("#headerMenu")
      .stop(false, true)
      .animate({"marginLeft": ($(window).scrollLeft())   "px"}, "slow" );
});

Если вам не нужна анимация, вы можете использовать этот вызов jQuery (пример / скрипка):

 $(window).scroll(function(){
   $("#headerMenu")
      .css({"margin-left": ($(window).scrollLeft())   "px"});
});

Кроме того, вот реальный пример прокрутки по вертикали, который скрывает содержимое под областью заголовка: http://www.havenshade.com/experience.php