0
Я использую аффикс Bootstrap в плагином here HTML:
предотвратить прыжки с прикрепленным элементом при прокрутке
<html>
<head>
...
<style>
h1 {
width: 100px;
height: 100px;
background: green;
margin: 0;
top: 10px;
}
h1.affix {
top: 8px;
}
body {
padding: 10px;
height: 5000px;
}
</style>
</head>
<body>
<h1 data-spy="affix" data-offset-top="10">yo!</h1>
</body>
</html>
Всякий раз, когда я прокручиваю вниз на значительное расстояние (с помощью прокрутки справа, а не прокрутки мыши), div прыгает. Как я могу это предотвратить? Явно проблема заключается в том, что div прокручивается за пределы экрана, затем применяется фиксированная позиция, и она движется вниз, заставляя ее прыгать. Я попытался использовать переход, чтобы сделать его более плавным, но по какой-то причине это не сработало.
h1 {
width: 100px;
height: 100px;
background: green;
margin: 0;
transition-property: top;
transition-duration: 3s;
}
Как это исправить?
Таким образом, он не будет прыгать, потому что он фиксируется прямо сейчас, где мой код имеет «h1» позиционируется статически. –
Могу ли я знать, почему ваш 'h1' позиционируется статически. –
Потому что я хочу, чтобы он перемещался с контентом при прокрутке и только придерживался вершины, когда он достиг вершины. Пример не на 100% репрезентативен тем, что у него уже есть 'h1' наверху, но в производстве это не будет так –