Как заставить элемент оставаться поверх браузеров в ipad

0

Я пытаюсь сделать 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') прыгает вверх. Я надеялся, что кто-то здесь поможет мне в этом.

Большое спасибо!

Теги:
ipad
safari

2 ответа

0

Вы можете добавить следующий класс в свой 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 событие прокрутки запускается, когда пользователь завершил прокрутку пальцем. Вероятно, вам придется иметь дело с событиями касания, чтобы ваш свиток был идеальным.

0

Вы пробовали css:

#div { 
  top: 0;
  position: fixed; 
}
  • 0
    Я не могу, потому что я не хочу, чтобы он оставался на вершине все время, когда страница впервые загружена
  • 0
    affix.js (от создателей начальной загрузки css), кажется, делает то, что вы хотите: getbootstrap.com/javascript/#affix

Ещё вопросы

Сообщество Overcoder
Наверх
Меню