如何防止滚动时表格标题移动？

问题描述 投票：0回答：1

垂直滚动时标题几乎没有上下移动。我不能使用 CSS 粘性，因为我的父母有水平滚动。滚动页面（垂直）时，将标题位置保持在页面顶部。

可以吗？

const table = document.querySelector('.table');
const header = document.querySelector('.table header');

window.addEventListener('scroll', function() {
  const tableRect = table.getBoundingClientRect();
  const headerRect = header.getBoundingClientRect();

  // Проверяем, когда шапка должна прилипнуть к верхней части экрана
  if (tableRect.top < 0 && tableRect.bottom > headerRect.height) {
    const topOffset = Math.abs(tableRect.top);
    header.style.transform = `translateY(${topOffset}px)`; // Используем translateY для плавного перемещения
    //header.classList.add('header-fixed'); // Добавляем класс при фиксации
  } else {
    header.style.transform = `translateY(0px)`; // Сброс перемещения
  //  header.classList.remove('header-fixed'); // Убираем класс, если шапка не фиксируется
  }
});
.mobile-container {
 background-color: ;
  width: 30%;
   border: 1px solid red;
  display:flex;
  flex-direction: column;
    align-items: center;
  position:relative;
}

h1 {
  text-align: center;
}

.table {
  display: grid; /* если поменять на table пропадает горизонтальный скрол, зато шапка таблицы фиксируется наверху */
  overflow-x: auto;
  border: 1px solid #DCDCDC;
  border-radius: 0.5rem;
  width: 90%;
box-sizing: border-box;
  position: relative;

}



.table header {
  height: 2.625rem;
   display: grid;
  padding: 0.6875rem 1.25rem;
  color: #8C8C8C;
  border-bottom: 1px solid #DCDCDC;
  box-sizing: border-box;
  background: #FAFAFA;
  grid-template-columns: repeat(2, 15rem) repeat(2, 5rem);
  white-space: nowrap;

      column-gap: 1rem;
 
  z-index:10;
  top: 0;
  position: sticky; /* Используем позицию sticky */

  width: 100%;
  
 /*transition: transform 0.16s linear, opacity 0.16s linear; */


  div:nth-child(1) {
        display: none;
      }
  
}

.table main {
  > div {
    display: grid;
      grid-template-columns: repeat(2, 15rem) 6rem;
      row-gap: 0.25rem;
      column-gap: 1rem;
      padding: 0.5rem 1.25rem;
border: 1px solid #DCDCDC;
    box-sizing: border-box;
    
    div:first-child {
        grid-column: 1 / -1;
        position: sticky;
        left: 1.25rem;
        z-index: 1;
        white-space: nowrap;
        width: min-content;
      }
    
  }
  
  
}
<div class="mobile-container">
  <h1>Мобильная версия</h1>

<div class="table">
 
  <header>
    <div>Название</div>
    <div>Описание</div>
    <div>Цена</div>
    <div>Количество</div>
  </header>
   
  <main>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>
    <div>
      <div>Телевизор</div>
      <div>Большой цветной телевизор</div>
      <div>1000р</div>
      <div>10 штук</div>
    </div>

    <main>
      </div>
    
    </div>

javascript html css
1个回答
0
投票
  • 你根本不需要JS
  • 修正
    border
    规则

* {
  margin: 0;
  box-sizing: border-box;
}

.mobile-container {
  width: 30%; /* DEMO ONLY */
  height: 300px; /* DEMO ONLY */
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  text-align: center;
}

.table {
  display: grid;
  overflow: auto;
  border: 1px solid #DCDCDC;
  border-radius: 0.5rem;
  width: 90%;
  box-sizing: border-box;
  position: relative;
}

.table header {
  height: 2.625rem;
  display: grid;
  padding: 0.6875rem 1.25rem;
  color: #8C8C8C;
  border-bottom: 1px solid #DCDCDC;
  box-sizing: border-box;
  background: #FAFAFA;
  grid-template-columns: repeat(2, 15rem) repeat(2, 5rem);
  white-space: nowrap;
  column-gap: 1rem;
  z-index: 2;
  top: 0;
  position: sticky;
  div:nth-child(1) {
    display: none;
  }
}

.table main {
  >div {
    display: grid;
    grid-template-columns: repeat(2, 15rem) 6rem;
    row-gap: 0.25rem;
    column-gap: 1rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid #DCDCDC;
    border-width: 0 0 1px 0; /* Improved borders */
    div:first-child {
      grid-column: 1 / -1;
      position: sticky;
      left: 1.25rem;
      z-index: 1;
      white-space: nowrap;
      width: min-content;
    }
  }
}
<div class="mobile-container">
  <h1>Mobile version</h1>
  <div class="table">
    <header>
      <div>Name</div>
      <div>Description</div>
      <div>Price</div>
      <div>Quantity</div>
    </header>
    <main>
      <div>
        <div>TV</div>
        <div>Large color TV</div>
        <div>1000 rubles</div>
        <div>10 units</div>
      </div>
      <div>
        <div>TV</div>
        <div>Large color TV</div>
        <div>1000 rubles</div>
        <div>10 units</div>
      </div>
      <div>
        <div>TV</div>
        <div>Large color TV</div>
        <div>1000 rubles</div>
        <div>10 units</div>
      </div>
      <div>
        <div>TV</div>
        <div>Large color TV</div>
        <div>1000 rubles</div>
        <div>10 units</div>
      </div>
      <div>
        <div>TV</div>
        <div>Large color TV</div>
        <div>1000 rubles</div>
        <div>10 units</div>
      </div>
      <div>
        <div>TV</div>
        <div>Large color TV</div>
        <div>1000 rubles</div>
        <div>10 units</div>
      </div>
      <div>
        <div>TV</div>
        <div>Large color TV</div>
        <div>1000 rubles</div>
        <div>10 units</div>
      </div>
      <div>
        <div>TV</div>
        <div>Large color TV</div>
        <div>1000 rubles</div>
        <div>10 units</div>
      </div>
      <div>
        <div>TV</div>
        <div>Large color TV</div>
        <div>1000 rubles</div>
        <div>10 units</div>
      </div>
      <div>
        <div>TV</div>
        <div>Large color TV</div>
        <div>1000 rubles</div>
        <div>10 units</div>
      </div>
    </main>
  </div>

</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.