#javascript #html #css #css-position #css-transforms
#javascript #HTML #css #css-position #css-преобразования
Вопрос:
Я вижу множество способов сделать противоположное тому, чего я пытаюсь достичь, но отмечая то, что мне нужно.
У меня есть фиксированный заголовок высотой 100 пикселей. Я хочу, чтобы он прокручивался вместе с остальной частью страницы, когда указанный div попадает в заголовок или находится на расстоянии 100 пикселей от верхней части экрана.
Я добавил класс прокрутки к заголовку, который буквально просто делал его положение абсолютным, заставляя заголовок перемещаться по экрану. Затем я перевел его обратно в режим просмотра, это не работало одинаково для всех размеров экрана.
Моя следующая идея, возможно, сохранить его фиксированным, но добавить отрицательное преобразование к заголовку, зависящее от положения прокрутки. Это позволило бы достичь того же эффекта, к которому я стремлюсь, но я не слишком уверен, как этого добиться.
Если вам нужна дополнительная информация, я рад ее предоставить.
Редактировать:
Вот несколько снимков экрана:
с верхней части страницы:
Тогда я хочу, чтобы заголовок стал нефиксированным и прокручивался вместе с остальной частью страницы:
Комментарии:
1. Не могли бы вы, возможно, добавить пример?
2. я добавил несколько снимков экрана
Ответ №1:
Ознакомьтесь с моим решением. Надеюсь, это поможет.
const headerEl = document.querySelector('header')
const targetEl = document.querySelector('#target')
const targetTopPos = targetEl.getBoundingClientRect().top
let isHeaderFixed = true
document.onscroll = () => {
const targetTopOffset = targetEl.getBoundingClientRect().top
if (isHeaderFixed amp;amp; targetTopOffset < 100) {
headerEl.style.position = 'absolute'
headerEl.style.top = `${targetTopPos - 100}px`
isHeaderFixed = !isHeaderFixed
}
if (!isHeaderFixed amp;amp; targetTopOffset >= 100) {
headerEl.style.position = 'fixed'
headerEl.style.top = '0px'
isHeaderFixed = !isHeaderFixed
}
} body {
padding: 0;
margin: 0;
position: relative;
}
header {
position: fixed;
height: 100px;
width: 100%;
background: lightblue;
}
.content {
line-height: 100px;
}
.target {
width: 100%;
background: red;
} <header>
Custom header
</header>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
<div id="target" class="target">target</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div> Комментарии:
1. спасибо за это, это работает именно так, как я хочу в вашем примере, но я не могу заставить его работать на моей странице. Я собираюсь продолжать играть с ним, а затем отмечу как правильный, когда он заработает
2. @CarlPiper Рад помочь.
3. Будучи глупым, я оборачивал ваш js в прослушиватель событий прокрутки, когда у вашего уже есть один. Спасибо!
4. один быстрый вопрос, как я могу заставить его пересчитывать при изменении размера окна? кажется, я не могу заставить его пересчитывать каждую вещь. и при загрузке, если страница прокручивается мимо нее, заголовок все еще отображается
5. @CarlPiper Вы можете изменить переменную targetTopPos внутри функции события изменения размера окна
Ответ №2:
Я должен по умолчанию создать .header {position: absolute} и добавить этот класс в css (пока не в element):
.header.active {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
Затем поймите, когда нам нужно перенести это событие в заголовок. JS поможет:
var targetElement = document.querySelector( YOUR TARGET ELEMENT ),
header = document.querySelector('.header');
window.onscroll = function(event){
if ( targetElement.offsetTop > window.pageYOffset ) {
header.classList.add('active');
} else {
header.classList.remove('active');
}
}
Целевой элемент — это элемент, заголовок которого, когда вы захотите его достичь, будет исправлен.
Если вам нужно
Комментарии:
1. Привет, разве это не делает наоборот? я хочу, чтобы мой заголовок был исправлен, а затем прокручивался, когда он попадает в определенный div
2. Зачем вам это делать? 🙂 Затем просто верните мой код — сделайте по умолчанию .header {position: fixed; ….} и .header.active {position: absolute}; — Должно сработать 😉
3. Да, но, как я уже говорил в своем вопросе, он переходит на страницу, потому что абсолютное позиционирование не ведет себя как фиксированное позиционирование. Я бы сделал это, потому что это будет классный эффект?
4. О, теперь я понял. 🙂