фиксированного элемента прокрутки в пределах параллакса элемента

Я бегу на вопрос, где фиксированный элемент (Навигационный) перемещается, когда тело элемента используется в качестве контейнера параллакса со следующим CSS:фиксированного элемента прокрутки в пределах параллакса элемента

.parallax { 
    perspective: 1px; 
    height: 100vh; 
    overflow-x: hidden; 
    overflow-y:auto; 
}

Где оригинал тело элемента имеет этот CSS:

html,body { 
    width: 100%; 
    margin: 0px; 
    margin-bottom: -1.4rem; 
    overflow-x: hidden; 
    display: block; 
    font-size: 10px; 
}

И оригинальный нав есть этот CSS:

nav { 
    position: fixed; 
    top: 0rem; 
    right: 0rem; 
    height: 100%; 
    /*animation*/ 
    transition-timing-function: all ease 0.3s; 
    -webkit-transition: all ease 0.3s; /* Safari */ 
    transition: all ease 0.3s; 
}

Где стиль фиксированной позиции ломается только тогда, когда класс параллакса применяется к элементу тела.

Все это находится в пределах этого представления HTML:

<body class="parallax"> 
    <header></header> 
    <div></div> 
    <nav></nav> 
</body>

Почему это сломать?

Редактировать, чтобы уточнить некоторую путаницу: не задействован javascript, класс контейнера parallax показан выше, ничего больше не добавлено. После осмотра, элемент нав еще имеет фиксированный стиль положение применяется к нему

Вот fiddle

(Кстати, я знаю, что Обходной добавить параллакс в другой контейнер вместо этого, и есть СЧ за пределами этого контейнера, но для того, чтобы убедиться, что IOS сокращает URL-бар тело должно быть элементом, который прокручивается)

источник

2016-05-26 efong5

HTML, пожалуйста .... –

Ну, я не использую javascript здесь @cale_b, я пытаюсь создать параллакс только с помощью css. Я добавил редактирование, определяющее навигацию, и это просто красный квадрат, который перемещается, когда тело имеет класс параллакса, добавленный к нему. Класс параллакса показан в первом html. и инспектор показывает свойство «фиксированной позиции», как если бы оно было обычно применено – efong5

@AdamBuchananSmith, я добавил представление HTML, но его очень простой ... фиксированный элемент в контейнере, как я упоминал ранее. – efong5

проблема обусловлена perspective добавляются через .parallax класса.

Этого нельзя преодолеть.

Каждый раз, когда вы добавляете преобразование (которое является перспективой) к элементу, оно становится позиционирующей «базой» для любых позиционированных детей, включая position: fixed. Ваша позиция: фиксированный элемент навигации фиксируется относительно преобразованного родителя

источник

2016-05-26 20:05:56

фиксированного элемента прокрутки в пределах параллакса элемента

ответ

Смежные вопросы