Я пытаюсь сделать div
оставаться на вершине браузера после прокрутки пользователя до определенной позиции
У меня есть что-то вроде
$(window).scroll(function () {
if ($(window).scrollTop() > 301) {
$('#div').css('top', $(window).scrollTop()-277);
}else if($(window).scrollTop() < 301){
$('#div').css('top', 0);
}
});
Он отлично работает в настольном браузере. Однако, это немного прослушивается в сафари iPad. $('#div')
будет " jump
" в начало "После", позиция " 301
а не оставаться на вершине все время. По сути, он, как браузер, игнорирует коды, когда пользователь на самом деле прокручивает, но когда пользователь перестает прокручивать, $('#div')
прыгает вверх. Я надеялся, что кто-то здесь поможет мне в этом.
Большое спасибо!
Вы можете добавить следующий класс в свой CSS:
#div {
top: 0;
left: 0;
position: absolute;
}
#div.is-fixed {
position: fixed;
}
а затем в вашем JS-коде:
$(window).scroll(function () {
if ($(window).scrollTop() > 301) {
$('#div').addClass("is-fixed");
} else {
$('#div').removeClass("is-fixed");
}
});
Это значительно упростит ваш код и повысит производительность.
Однако я считаю, что ваша проблема в том, что на устройствах iOS событие прокрутки запускается, когда пользователь завершил прокрутку пальцем. Вероятно, вам придется иметь дело с событиями касания, чтобы ваш свиток был идеальным.
Вы пробовали css:
#div {
top: 0;
position: fixed;
}