Исправлен элемент, который перемещается в верхнюю часть страницы при прокрутке - только CSS - PullRequest
Новая
       2

Исправлен элемент, который перемещается в верхнюю часть страницы при прокрутке - только CSS

7 голосов
/ 23 августа 2011

Я хочу произвести эффект, который есть на этой странице: http://jonrohan.me/guide/css/creating-triangles-in-css/ - но только с CSS, без JavaScript (это было бы тривиально с JavaScript).

Эффект, о котором я говорю, выглядит следующим образом:

  • Изначально вы видите как заголовок страницы, так и заголовок статьи.
  • при прокрутке заголовок страницы исчезает.
  • Заголовок статьи фиксируется в верхней части страницы, поэтому вы всегда видите его при прокрутке.

Лучшее, чего мне удалось достичь, это:
http://jsfiddle.net/nottrobin/2FSvx/
Но мне не нравится дублирование <nav>, присущее моему решению.

У кого-нибудь есть какие-нибудь умные техники CSS / 3, о которых он может подумать, чтобы сделать так, чтобы при прокрутке вниз и исчезновении <header>, <nav> естественным образом переместился бы вверх страницы?

1 Ответ

2 голосов
/ 23 августа 2011

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

Насколько я знаю, такой техники для получения не существуеттот же эффект, используя только CSS, требуется JS.

Вы можете позиционировать элементы, используя CSS только статическим способом (нормальный поток страниц), фиксированным способом (относительно окна браузера) или абсолютным / относительным (относительноближайший родитель с положением, установленным на относительное).

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

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

Вы можете сделать что-то, как вы, но это означает больше языка разметки, больше CSS и больше сложностей в обслуживаниисвязей.

Вам следует использовать JS для оптимизации работы пользователя. Если у пользователя отключен JS, он / она увидит нормальное поведение страницы, в противном случае элемент nav останется неподвижным, как и все другие веб-сайты.

...