Элемент Div не позиционируется как липкий
Вот buhehe.de, простой элемент div справа в <div class = "adssec">, а в CSS я написал .adssec {position: sticky !important;}, но он не залипает во время прокрутки.
Что я сделал не так?
а также задайте ему размеры, ширину и высоту.
—
02.05.2018 10:45
Here is buhehe.de .. извините .. где? Не вижу "buhehe.de
—
02.05.2018 11:07
Думаю это buhehe.de
—
02.05.2018 12:09
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
4
49
3
Ответы 3
Вы должны указать порог, при котором вы хотите сделать его липким. От CSS хитрости:
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
Укажите значение top, bottom, left или bottom для прикрепленного элемента.
Скорее всего, это будет решение вопроса OP
—
02.05.2018 11:08
когда я набираю .adssec {position: fixed! important; top: 10px! important;} элемент div отключен
—
02.05.2018 11:09
это должен быть sticky, а не fixed
—
02.05.2018 11:09
@InteressanteFakten см. Мой ответ. что может вам помочь :)
—
02.05.2018 11:15
Вы можете использовать позиция: фиксированная. или позиция: липкая, как в примере ниже.
body
{
margin: 0 15%;
background-color: #ecf0f1;
}
div
{
border: solid #34495e 1px;
padding: 0 10px;
margin: 0 0 10px 0;
background-color: white;
}
.fixed, .sticky
{
font-size: 1.4em;
padding: 10px;
z-index: 1;
}
.fixed
{
position: fixed;
background-color: #34495e;
color: white;
width: 100%;
left: 0;
text-align: center;
z-index: 2;
}
.sticky
{
position: sticky;
top: 60px;
background-color: #2ecc71;
}
.container
{
height: 250px;
overflow: auto;
}
.out-container
{
top: 50px;
background-color: #9b59b6;
z-index: 2;
}<html>
<head>
</head>
<body>
<div class = "fixed">
Fixed Position
</div>
<br/><br/><br/>
<div>
<h3>
Some random content for overflowing the entire content.
</h3>
<p>
There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.
</p>
<p>
Software testing is a sport like hunting, it's bughunting.
</p>
<p>
Java is to JavaScript what Car is to Carpet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur.
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
</p>
</div>
<div class = "sticky out-container">
Sticky Positioning
</div>
<div class = "container">
<h3>
Some random content for overflowing the content of this container.
</h3>
<p>
There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.
</p> <p>
Software testing is a sport like hunting, it's bughunting.
</p>
<p>
Java is to JavaScript what Car is to Carpet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur.
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
</p>
<p>
Lorem ipsum dolor sit amet, consectetur.
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
</p>
<p>
Lorem ipsum dolor sit amet, consectetur.
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
</p>
<p>
Lorem ipsum dolor sit amet, consectetur.
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
</p>
<div>
<h3>
Some random content for overflowing the entire content.
</h3>
<p>
There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.
</p>
<p>
Software testing is a sport like hunting, it's bughunting.
</p>
<p>
Java is to JavaScript what Car is to Carpet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur.
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
</p>
</div>
<div>
<h3>
Some random content for overflowing the entire content.
</h3>
<p>
There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.
</p>
<p>
Software testing is a sport like hunting, it's bughunting.
</p>
<p>
Java is to JavaScript what Car is to Carpet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur.
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
</p>
</div>
<div>
<h3>
Some random content for overflowing the entire content.
</h3>
<p>
There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.
</p>
<p>
Software testing is a sport like hunting, it's bughunting.
</p>
<p>
Java is to JavaScript what Car is to Carpet.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur.
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
</p>
</div>
</body>
</html>Это не верно. fixed и sticky - это не одно и то же.
—
02.05.2018 11:02
@goediaz я обновил ответ .. с fixed и sticky
—
02.05.2018 11:11
Вы пытаетесь просто сохранить элемент на той позиции, которую вы ему дали?
В этом случае position: fixed сделает свое дело.
Однако, если вы пытаетесь заставить элемент оставаться в верхней части страницы после того, как он достигнет верхней части страницы путем прокрутки, вам следует использовать position: sticky.
Согласно документации разработчика Mozilla
This is an experimental API which should not be used in production code.
Возможное решение без posistion: sticky
Намного лучшим вариантом здесь было бы использование некоторого JavaScript. Когда элемент достигнет вершины, добавьте к стилям position: fixed.
window.onscroll = function() {myFunction()};
var div = document.getElementById("myDiv");
var sticky = div.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
div.classList.add("sticky")
} else {
div.classList.remove("sticky");
}
}
Другие вопросы по теме
Наложение на фоновое изображение пропорционального размера
Wordpress, как сделать весь выпадающий блок подменю интерактивным?
Как добавить CSS в атрибут поля данных?
Локальная установка TinyMCE не работает с локальным файлом js, но работает с удаленным файлом js
Определенный элемент не исчезает, когда я прокручиваю определенную часть раздела
Скрыть svg при запуске и снова быть анимированным с помощью animjs (непрозрачность: 1)
Как найти изображение внутри div с помощью jquery
JQuery addClass и removeClass не работают в браузере IE 11?
Как расширить панель поиска от центра в обе стороны с переходом
Шрифты Google больше не поддерживают загруженные файлы?
Похожие вопросы
Странное поведение на сафари в Iphone при открытии специально созданного файла .ics
Как я могу передать значение с текущей страницы и отобразить эти значения на новой вкладке
Настройка карты google от и до направления от полей ввода
Показать datetimepicker за последние 6 дней также знает, как динамически удалять текстовое поле
Могу ли я реализовать модель обеденных философов для веб-работников?
Удалить <font> с определенным цветом из фрагмента DOM
Определенный элемент не исчезает, когда я прокручиваю определенную часть раздела
Я хочу добавить кнопку просмотра после определенного количества li и того же класса ul
Скрыть svg при запуске и снова быть анимированным с помощью animjs (непрозрачность: 1)
Нужно изменить цвет tr в моей таблице php mysql
покажите свой html и добавьте фрагмент