Исправлена прокрутка верхней кнопки

#javascript #jquery #css

Вопрос:

Я хочу воссоздать кнопку «Перейти к оформлению заказа» на amazon.com . Единственная проблема в том, что их сайт не реагирует, и я не могу эмулировать свой браузер Chrome, чтобы показать мне представление агента пользователя устройства. Вам нужно будет просмотреть кнопку на вашем смартфоне, но вот что я хочу сделать.

По сути, это создание кнопки прокрутки. Когда пользователь попадает на страницу изначально, он увидит кнопку «купить сейчас» в нижней части страницы / экрана. Когда пользователь прокручивает страницу, а кнопка появляется вверху страницы ( из-за прокрутки) Я хочу, чтобы кнопка оставалась там, пока пользователь прокручивает страницу дальше вниз. Это только для мобильного просмотра (адаптивного).

Вот JSFIDDLE того, что я сделал до сих пор.

Я полагаю, мне нужно будет изменить положение прокрутки, чтобы применить CSS в том месте, где я хочу, чтобы кнопка стала липкой.

.scrollTop() Метод jQuery, похоже, является лучшим выбором.

1. Вы пробовали использовать CSS position:fixed; ?

2. @PHPglue Да, но это когда применять стиль… С этой частью у меня проблемы

3. Используйте условие, подобное if($(window).scollTop() === 500){/* do stuff here */} .

4. @PHPglue У меня там есть условие — нужно определить правильную точку прокрутки, чтобы применить стиль, а затем удалить. Можете ли вы помочь с jsfiddle? Я предоставил то, что я сделал до сих пор в вопросе.

Ответ №1:

Попробуйте:

 $(window).scroll(function(){
  var bn = $('#bn');
  if($(window).scrollTop() > 300) {
    bn.css({position:'fixed', bottom:'10px'});
  }
  else{
    bn.css('position', 'static');
  }
});

СКРИПКА

Отрегулируйте соответствующим образом. Убедитесь, как у вас уже есть, что в вашем контейнере есть position:relative; . Если вы хотите, чтобы это было для всей страницы, установленной body{position:relative;} в вашем CSS. fixed Позиция будет зависеть от этого. static это позиция по умолчанию для каждого элемента.