Зафиксируйте div в нижней части страницы с экраном небольшой высоты и займите его определенную позицию при прокрутке

У меня есть кнопка сохранения настроек для веб-страницы редактирования профиля. Страница длинная, и я хочу кнопку сохранения настроек fixed внизу страницы. При прокрутке вниз примите ее нормальное положение. Я могу сделать это fixed внизу при прокрутке, но я не могу заставить его оставаться в нормальном положении при прокрутке.

Дизайн на мобильном экране небольшой высоты

И при прокрутке вниз я ожидаю застрять перед нижним колонтитулом

Я добавляю этот css в нижний контейнер save-setting, но этот стиль постоянно фиксирует его внизу.

.save-settings {
  box-shadow: 0px -2px 10px rgba(23, 29, 26, 0.1);
  padding: 14px 24px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fcfcfc;
  z-index: 100;
}

Я думаю, что этот вопрос похож на мой вопрос, но я не могу понять, потому что пример веб-сайта больше не работает. Так что кто-нибудь может помочь мне более подробно.

Редактировать Это пример кода того, что я ожидаю

.header {
  height: 100px;
  background-color: green;
}
.page-holder {
  height: 600px;
  background-color: red;
}
.save-settings {
  box-shadow: 0px -2px 10px rgba(23, 29, 26, 0.1);
  padding: 14px 24px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fcfcfc;
  z-index: 100;
}
button.primary-btn {
  padding: 12px 20px;
  border-radius: 10px;
  color: #fcfcfc;
  font-size: 14px;
  line-height: 21px;
  font-weight: 600;
  background: linear-gradient(100.96deg, #15c077 8.41%, #2dc015 88.4%);
  border: 0;
  width: 100%;
}

.footer {
  height: 300px;
  background-color: orange;
}
<div class = "header">
  <h2>Header</h2>
</div>
<div class = "page-holder">
  <h1>Main Content</h1>
  <div class = "save-settings">
    <button class = "primary-btn">Save Setting</button>
  </div>
</div>
<div class = "footer">
  <h2>footer</h2>
</div>

Итак, я хочу, чтобы save-settings был внизу страницы, но при прокрутке он оставался перед нижним колонтитулом в его обычной позиции DOM.

Я считаю, что это можно сделать с помощью position: sticky;, но без примера кода, содержащего HTML и CSS, сложно предоставить какие-либо подробности.

itsallgoodie 08.02.2023 16:11

@itsallgoodie Я добавлю пример кода, чтобы упростить мой вопрос

Philo 08.02.2023 16:15
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
2
71
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете использовать position: sticky, чтобы зафиксировать нижний колонтитул внизу, затем вы можете разместить контент под ним, чтобы он прилипал к нему.

.wrapper {
  height: 100vh;
  position: relative;
}

.content {
  background: green;
}

.save-settings {
  box-shadow: 0px -2px 10px rgba(23, 29, 26, 0.1);
  padding: 14px 24px;
  position: sticky;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fcfcfc;
  z-index: 100;
}

.under-settings {
  background: blue;
}
<div class = "wrapper">
  <div class = "content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae condimentum nisl. Morbi lorem felis, placerat vitae gravida sed, imperdiet eu ante. Vestibulum molestie felis ac felis hendrerit, vel tincidunt diam fermentum. Donec interdum eleifend
    faucibus. Mauris id magna pulvinar, tempus metus ut, rhoncus nisi. Aenean quis lectus est. Proin tortor velit, tristique sed congue nec, consequat non urna. Donec nibh purus, faucibus at lobortis eget, congue sed elit. Ut quis ex felis. Vivamus finibus
    lacinia interdum. Maecenas rutrum semper varius. Cras rutrum rhoncus augue ut sodales. Vivamus consectetur dignissim purus vitae suscipit. Fusce vitae nibh condimentum, rhoncus erat ut, fringilla tellus. Vestibulum vel ligula ac arcu pharetra euismod
    id vitae magna. Nam mauris turpis, iaculis nec varius eget, varius et magna.
    <br /><br /> Morbi lobortis nunc ipsum, sed ullamcorper est finibus sit amet. Proin in erat sapien. Morbi semper feugiat ipsum ac facilisis. Donec feugiat sit amet odio in molestie. Nullam auctor lobortis sapien vel elementum. Lorem ipsum dolor sit
    amet, consectetur adipiscing elit. Fusce hendrerit, massa id convallis eleifend, neque lorem cursus lectus, non rhoncus sem odio efficitur lorem. Nulla ut massa sodales, tempus ipsum vitae, facilisis nulla. Pellentesque vulputate mauris ac volutpat
    dictum.
    <br /><br /> Pellentesque lorem ipsum, posuere sed facilisis a, malesuada ut lorem. Vestibulum at sagittis metus, ut rhoncus ligula. Integer sit amet bibendum risus, sed tempor elit. Phasellus leo leo, elementum eget urna eleifend, fermentum semper
    urna. Vestibulum condimentum interdum sem, id dapibus leo ornare eu. Quisque lacus nunc, interdum in iaculis id, gravida non urna. Quisque pulvinar augue eget felis posuere, quis ultricies lectus pellentesque.
    <br /><br /> Nunc vel dolor vulputate, commodo sem nec, placerat nulla. Nullam quis nibh tempus, iaculis purus in, congue nisi. Vestibulum id aliquam augue. Integer varius rutrum efficitur. Nunc sit amet elementum lectus. Praesent ut sodales ante.
    Nulla non posuere arcu, ut molestie lectus.
    <br /><br /> Morbi vestibulum imperdiet eros eget fermentum. Duis suscipit malesuada lectus. Nam sagittis, est vel pulvinar iaculis, purus justo ultrices lacus, eget tincidunt massa ipsum id dolor. Mauris congue placerat lobortis. Sed non laoreet
    nulla. Aenean consequat ante ac gravida molestie. Sed nisi felis, auctor quis blandit nec, volutpat et ligula. Donec facilisis est a sapien lobortis vulputate.<br />
  </div>
  <div class = "save-settings">
    Save Settings
  </div>
  <div class = "under-settings">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae condimentum nisl. Morbi lorem felis, placerat vitae gravida sed, imperdiet eu ante. Vestibulum molestie felis ac felis hendrerit, vel tincidunt diam fermentum. Donec interdum eleifend
    faucibus. Mauris id magna pulvinar, tempus metus ut, rhoncus nisi. Aenean quis lectus est. Proin tortor velit, tristique sed congue nec, consequat non urna. Donec nibh purus, faucibus at lobortis eget, congue sed elit. Ut quis ex felis. Vivamus finibus
    lacinia interdum. Maecenas rutrum semper varius. Cras rutrum rhoncus augue ut sodales. Vivamus consectetur dignissim purus vitae suscipit. Fusce vitae nibh condimentum, rhoncus erat ut, fringilla tellus. Vestibulum vel ligula ac arcu pharetra euismod
    id vitae magna. Nam mauris turpis, iaculis nec varius eget, varius et magna.
    <br /><br /> Morbi lobortis nunc ipsum, sed ullamcorper est finibus sit amet. Proin in erat sapien. Morbi semper feugiat ipsum ac facilisis. Donec feugiat sit amet odio in molestie. Nullam auctor lobortis sapien vel elementum. Lorem ipsum dolor sit
    amet, consectetur adipiscing elit. Fusce hendrerit, massa id convallis eleifend, neque lorem cursus lectus, non rhoncus sem odio efficitur lorem. Nulla ut massa sodales, tempus ipsum vitae, facilisis nulla. Pellentesque vulputate mauris ac volutpat
    dictum.
    <br /><br /> Pellentesque lorem ipsum, posuere sed facilisis a, malesuada ut lorem. Vestibulum at sagittis metus, ut rhoncus ligula. Integer sit amet bibendum risus, sed tempor elit. Phasellus leo leo, elementum eget urna eleifend, fermentum semper
    urna. Vestibulum condimentum interdum sem, id dapibus leo ornare eu. Quisque lacus nunc, interdum in iaculis id, gravida non urna. Quisque pulvinar augue eget felis posuere, quis ultricies lectus pellentesque.
    <br /><br /> Nunc vel dolor vulputate, commodo sem nec, placerat nulla. Nullam quis nibh tempus, iaculis purus in, congue nisi. Vestibulum id aliquam augue. Integer varius rutrum efficitur. Nunc sit amet elementum lectus. Praesent ut sodales ante.
    Nulla non posuere arcu, ut molestie lectus.
    <br /><br /> Morbi vestibulum imperdiet eros eget fermentum. Duis suscipit malesuada lectus. Nam sagittis, est vel pulvinar iaculis, purus justo ultrices lacus, eget tincidunt massa ipsum id dolor. Mauris congue placerat lobortis. Sed non laoreet
    nulla. Aenean consequat ante ac gravida molestie. Sed nisi felis, auctor quis blandit nec, volutpat et ligula. Donec facilisis est a sapien lobortis vulputate.<br />
  </div>
</div>

После подробного изучения вашего случая выясняется, что ваша структура HTML нуждается в некоторой настройке:

.page-holder {
  height: 100vh;
}

.save-settings {
  text-align: center;
  border-top: 1px solid black;
  padding: 20px;
  position: sticky;
  bottom: 0;
  right: 0;
  left: 0;
}
<div class = "header">
  <h2>Header</h2>
</div>
<div class = "page-holder">
  <h1>Main Content</h1>
</div>
<div class = "save-settings">
  <button class = "primary-btn">Save Setting</button>
</div>
<div class = "footer">
  <h2>footer</h2>
</div>

Сделайте элемент .save-settings прямым потомком элемента body. В этом случае position: sticky; будет работать без добавления какого-либо дополнительного свойства position.

Потрясающий! Это хороший трюк для position: sticky.

Philo 08.02.2023 16:49

Другие вопросы по теме