При скролле вниз изменяем параметры открытого блока блока

Question

При скролле вниз изменяем параметры открытого блока блока

Рейтинг: 0Ответов: 1Опубликовано: 04.02.2023

Добрый день) подскажите как правильно реализовать изменение параметров некоторых блоков, при прокрутки вниз? На изображении показано приблизительно то, что я хочу. А именно : блок с фото пользователя с классом user переместить влево, и изменить его размер раза в 1,5), а в зеленом блоке header, изменить параметр height с 230px до 60, А также чтобы блок с классом profile при скролле поднимался до параметра top: 160px. Как видите, к этим блокам уже применен скрипт jQuery, по нажатию на блок с классом open_close. Как правильно это все реализовать, чтобы не сломать выездные блоки??

$(document).ready(function() {
  jQuery('.open_close').on('click', function() {
    $('header').toggleClass('clicked');
    $('.profile').toggleClass('clicked');
  });

});

@media screen and (max-width: 900px) {
  ::-webkit-scrollbar {
    /* chrome based */
    width: 0px;
    /* ширина scrollbar'a */
    background: transparent;
    /* опционально */
  }
  html {
    -ms-overflow-style: none;
    /* IE 10+ */
    scrollbar-width: none;
    /* Firefox */
  }
  body {
    display: flex;
    flex-direction: column;
    margin: 0;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
  }
  header {
    position: fixed;
    width: 100%;
    height: 60px;
    z-index: 1;
    top: 0;
    background-color: seagreen;
    transition: all 0.5s ease;
  }
  header.clicked {
    height: 230px;
  }
  /*PROFILE*/
  .profile {
    position: fixed;
    overflow-y: auto;
    top: 100%;
    width: 100%;
    height: calc(100% - 240px);
    background-color: rgb(194, 170, 170);
    transition: all 0.5s ease;
  }
  .profile.clicked {
    top: 230px;
  }
  /* USER*/
  .user {
    position: absolute;
    width: 50px;
    height: 50px;
    z-index: 3;
    top: 5px;
    left: 25px;
    border-radius: 60px;
    transition: all 0.5s ease;
  }
  .user>div>img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    opacity: 0;
    border-radius: 60px;
    transition: all 0.5s ease;
  }
  header.clicked .user {
    top: 110px;
    left: calc(50% - 60px);
    width: 120px;
    height: 120px;
    border-radius: 120px;
  }
  header.clicked .user>div>img {
    top: 110px;
    left: calc(50% - 60px);
    width: 120px;
    height: 120px;
    opacity: 1;
    border-radius: 120px;
  }
  /*OPEN-CLOSE PROFILE*/
  .open_close {
    position: absolute;
    width: 50px;
    height: 50px;
    z-index: 3;
    top: 5px;
    left: 25px;
    border-radius: 60px;
    transition: all 0.5s ease;
  }
  .open_close>div>img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 60px;
    transition: all 0.5s ease;
  }
  header.clicked .open_close {
    top: 10px;
    left: 10px;
    rotate: 360deg;
    background-color: lightgray;
    background-image: url(/img/ico/arrow.png);
    background-size: 30px 30px;
    background-position: center;
    background-repeat: no-repeat;
  }
  header.clicked .open_close>div>img {
    top: 10px;
    left: 10px;
    rotate: 180deg;
    opacity: 0;
  }
  /* SEARCH */
  .search {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 5px;
    z-index: 2;
    left: 80px;
    border-radius: 60px;
    background-color: lightgray;
    transition: all 0.5s ease;
  }
  .search>div>img {
    margin-top: 13px;
    margin-left: 13px;
    width: 24px;
    height: 24px;
    transition: all 0.5s ease;
  }
  header.clicked .search {
    top: 10px;
    left: 70px;
    right: 10px;
    width: calc(100% - 80px);
  }
  header.clicked .search>div>img {
    margin-top: 13px;
    margin-left: calc(100% - 37px);
    width: 24px;
    height: 24px;
    transition: all 0.5s ease;
  }
  /* MAIL */
  .mail {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 5px;
    right: 80px;
    border-radius: 60px;
    background-color: aqua;
    transition: all 0.3s ease;
  }
  header.clicked .mail {
    top: -60px;
    opacity: 0;
  }
  /* SEttings*/
  .settings {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 5px;
    right: 25px;
    border-radius: 60px;
    background-color: aqua;
    transition: all 0.5s ease;
  }
  header.clicked .settings {
    top: -60px;
    opacity: 0;
  }
  /*COVER*/
  .cover {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index: 1;
    top: 10;
    left: 30px;
    border-radius: 60px;
    background-color: rgb(0, 0, 0);
    transition: all 0.5s ease;
  }
  header.clicked .cover {
    top: 0px;
    left: 0px;
    width: 100%;
    height: 160px;
    border-radius: 15px;
  }
  /*Info user profile*/
  .user_profile {
    position: absolute;
    overflow-y: scroll;
    margin: 10px;
    width: auto;
    height: auto;
    transition: all 0.6s ease;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="user">
    <div>
      <img src="img/photo.png">
    </div>
  </div>
  <div class="open_close">
    <div>
      <img src="img/photo.png">
    </div>
  </div>
  <div class="search">
    <div><img src="img/ico/search.png"></div>
  </div>
  <div class="mail"></div>
  <div class="settings"></div>
  <div class="cover"></div>
</header>

<div class="profile">

  <div class="user_profile">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod aspernatur suscipit neque accusantium? Reiciendis consequuntur similique ea vel ipsum aspernatur adipisci a, tenetur laborum fugit aperiam eveniet tempora tempore maxime. Lorem ipsum dolor
    sit amet consectetur adipisicing elit. Quod aspernatur suscipit neque accusantium? Reiciendis consequuntur similique ea vel ipsum aspernatur adipisci a, tenetur laborum fugit aperiam eveniet tempora tempore maxime. Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Quod aspernatur suscipit neque accusantium? Reiciendis consequuntur similique ea vel ipsum aspernatur adipisci a, tenetur laborum fugit aperiam eveniet tempora tempore maxime. Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Quod aspernatur suscipit neque accusantium? Reiciendis consequuntur similique ea vel ipsum aspernatur adipisci a, tenetur laborum fugit aperiam eveniet tempora tempore maxime. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod aspernatur
    suscipit neque accusantium? Reiciendis consequuntur similique ea vel ipsum aspernatur adipisci a, tenetur laborum fugit aperiam eveniet tempora tempore maxime. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod aspernatur suscipit neque
    accusantium? Reiciendis consequuntur similique ea vel ipsum aspernatur adipisci a, tenetur laborum fugit aperiam eveniet tempora tempore maxime. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod aspernatur suscipit neque accusantium? Reiciendis
    consequuntur similique ea vel ipsum aspernatur adipisci a, tenetur laborum fugit aperiam eveniet tempora tempore maxime. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod aspernatur suscipit neque accusantium? Reiciendis consequuntur similique
    ea vel ipsum aspernatur adipisci a, tenetur laborum fugit aperiam eveniet tempora tempore maxime. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod aspernatur suscipit neque accusantium? Reiciendis consequuntur similique ea vel ipsum aspernatur
    adipisci a, tenetur laborum fugit aperiam eveniet tempora tempore maxime. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod aspernatur suscipit neque accusantium? Reiciendis consequuntur similique ea vel ipsum aspernatur adipisci a, tenetur
    laborum fugit aperiam eveniet tempora tempore maxime. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod aspernatur suscipit neque accusantium? Reiciendis consequuntur similique ea vel ipsum aspernatur adipisci a, tenetur laborum fugit
    aperiam eveniet tempora tempore maxime.
  </div>
</div>

css javascript html jquery

Источник: Stack Overflow на русском

Answer 1

▲ 0

Ну примерно так

document.addEventListener('scroll', () => {

var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  if (scrollTop > 0) {
    $('header').addClass('clicked');
    $('.profile').addClass('clicked');
  } else {
    $('header').removeClass('clicked');
    $('.profile').removeClass('clicked');
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

При скролле вниз изменяем параметры открытого блока блока

Ответы