Я пробовал целую вечность, чтобы исправить этот div в верхней части экрана, когда я перейду к нему, но он почему-то не работает. При поиске многих ответов, я думаю, это может быть потому, что $ (window) .height() возвращает неточные значения в Chrome.Как переключить класс фиксированной позиции на div на свитке?
То, что я пытаюсь выполнить на своем веб-сайте, - это блок текста, который нужно зафиксировать (исправить) в середине окна, когда я прокручу его вниз, а затем отмените позже на странице, когда нижняя часть он становится встроенным с изображением. Я сделаю это, вертикально выровняв текст в прозрачном div, который будет такой же высоты, как и окно просмотра (100vh), которое будет исправлено, когда оно достигнет вершины экрана, и открепите его, когда нижняя часть этого div коснется вершины другой прозрачный div, который начинается с того, как изображение заканчивается.
Решение должно быть отзывчивым, так как я планирую, что сайт будет работать на всех платформах. Любая помощь будет оценена по достоинству. Вот код, у меня есть - это просто не работает для меня:
JQuery
$(document).ready(function() {
var s = $("#words_box");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos <= pos.top) {
s.addClass("fix");
} else {
s.removeClass("fix");
}
});
});
HTML
<div id="words_box">
<h2 id="about_words">Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</h2>
</div>
<img id="about_words" src="any image that takes up the right side of the viewport."/>
CSS
#about_words {
float:left;
margin-right: 52.5%;
font-size:2.17vw;
text-align:left !important;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#words_box {
height: 100vh;
text-align:center;
float:left;
margin-top:-10.4em;
position:static;
z-index:-10000;
}
.fix{
position:fixed !important;
margin-right: 5.555555%;
top:10.4em;
}
Не совсем то, что вы хотите и жаль, что у меня нет слишком много времени, чтобы потратить на это прямо сейчас, но я замечаю, что вы не закрываете документ. }}; в конце вашего javascript закрывается прокрутка окна - вам нужен другой}); после этого на другой строке, чтобы закрыть документ. Вероятно, это не решит вашу проблему, но это, безусловно, поможет! –
Ой, извините, у меня действительно есть}); в конце, но как-то пропустил его в поле кода. Я отредактировал его сейчас. И я хочу, чтобы div исправлялся, когда он достигал вершины окна, а затем блокируется позже на странице, когда он достигает конца другого изображения, если это помогает. Спасибо, в любом случае! –
Просто любопытно, так как вы хотите реагировать на решение, считаете ли вы использование Bootstrap? Он имеет эту функциональность, встроенную с компонентом аффикса. – dman2306