Сохранить изображение статичным, пока родитель скользит вверх и вниз

в приведенном ниже примере есть золотой div с именем she
на самом деле это изображение с такими же свойствами
нажимая на кнопку, мне нужно, чтобы she открывался постепенно и не двигался с нижней стороной родителя
так же, как story - он фиксируется и раскрывается постепенно при скольжении родителя.

$('button').on('click', function(){
$('#swtop').slideToggle();
});
.swtop{
display:none;
background:lightblue;
position:relative;
}
.space{height:34px;}
.story{text-align:center;}
.she{
position:absolute;
left:25px; bottom:0; width:5%;
background:gold;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<div class='swtop' id='swtop'>
<div class='space'></div>
<div class='story'>LOREM IPSUM</div>
<div class='space'></div>
<div class='she'><br><br><br></div>
</div>

а вам нужна позиция: абсолютная?

Temani Afif 26.12.2020 11:17

@TemaniAfif - мне нужно, чтобы это изображение she было внизу слева - наверное, абсолютно необходимо

qadenza 26.12.2020 11:20
Поведение ключевого слова "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) для оценки ваших знаний,...
0
2
52
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Рассмотрим дополнительную обертку:

$('button').on('click', function() {
  $('#swtop').slideToggle();
});
.swtop {
  display: none;
  background: lightblue;
}

.swtop > div {
  position: relative; /* we move this to the extra wrapper */
}

.space {
  height: 34px;
}

.story {
  text-align: center;
}

.she {
  position: absolute;
  left: 25px;
  bottom: 0;
  width: 5%;
  background: gold;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<div class='swtop' id='swtop'>
  <div>
    <div class='space'></div>
    <div class='story'>LOREM IPSUM</div>
    <div class='space'></div>
    <div class='she'><br><br><br></div>
  </div>
</div>

И это еще один способ сделать его красивым.

let sts = false;
$('button').on('click', function(){
    sts = !sts;
  if (sts){
        $('#swtop').slideToggle();
      setTimeout(function(){
        $('.she').fadeToggle();
      }, 300);
  }else{
        $('.she').fadeToggle();
      setTimeout(function(){
        $('#swtop').slideToggle();
      }, 300);
  }
});
.swtop{
  display:none;
  background:lightblue;
  position:relative;
}
.space{
  height:34px;
  }
.story{
  text-align:center;
  }
.she{
  position:absolute;
  left:25px;
  bottom:0;
  width:5%;
  background:gold;
  display: none;
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>CLICK</button>
<br><br>
<div class='swtop' id='swtop'>
  <div class='space'></div>
  <div class='story'>LOREM IPSUM</div>
  <div class='space'></div>
  <div class='she'><br><br><br></div>
</div>

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