БЛОГ НА HUSL


IE11 При попытке поставить css тег fixed(вместо sticky, потомy что он здесь не работает) y меня ломается таблица

Автор вопроса: balgarot

В общем, у меня есть таблица, которая должна запускаться из браузера винформ(эксплорер 11) и суть в чём. В таблице должен быть закреплён хидер и левый столбик при скролле, в тегах CSS хидеру присвоен тег sticky, но в этом браyзере нет такого тега, есть только fixеd, но он ломает таблицy. Kод прикладываю. Можете потестить, в хроме эта таблица работает. Но в IЕ11 нет. Kак вы можете заметить, я пытался подключить либу stickybits, но разобраться я с ней не смог. Помогите. Желательно с фиксом кода сразy. И прошу, не присылайте ссылки лишние, я посмотрел кучу ресурсов, но проблему так и не пофиксил. Таблица не моя.

<html>

 <head>

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

 <meta charset="utf-8">

 <script src="jquery.min.js">   

 </script>

 <script src="stickybits.min.js"></script>

 <script>stickybits(".tgHeader", { useStickyClasses: true });</script>

 <style type="text/css">

 /* table style */

    table {

        font-family: Arial, Helvetica, sans-serif;

        border-collapse: collapse;

        width: 100%;

    }



    /*#customers td, #customers th {*/

    td, th {

        border: 1px solid #ddd;

        padding: 8px;

        vertical-align:top;

        background-color: white;

    }



    .tgHeader th{

        background-color: #00aedb;

    }

    

    thead th{

        background-color: #00aedb !important;

        font-weight: bold;

        text-align: center;

    }



    tr:nth-child(n):hover td {

          background: #eee;

    }



    /* collaps table rows */

    tr.tgHeader {

        font-weight: bold;

          cursor: pointer;

        background-color: #00aedb !important;

    }



    th.tgHeader{

        text-align: center !important;

    }



    .tgHeaderExtended{

        background-color: #00aedb !important;

        z-index: 0 !important;

       }



    .tgHeader .sign:after {

        content: "-";

        display: inline-block;

    }



    .tgHeader.expand .sign:after {

        content: "+";

    }

    .tgHeader{

        z-index: 2;

    }



    /* table freeze 1 column and header table */

    table thead {

        padding: 3px;

        position: sticky;

        top: 0;

        z-index: 2;

    }



    table td {

        padding: 4px 5px;

    }



    table tbody {

        position: relative;

    }

    table thead th:nth-child(1) {

        position: sticky;

        left: 0;

        z-index: 2;

    }



    table tbody th {

        position: sticky;

        left: 0;

        z-index: 1;

    }



</style>



<script type="text/javascript">

    /* table freeze 1 column and header table */

    $(document).ready(function() {

        /*$('tbody').scroll(function(e) {

            $('thead').css("left", -$("tbody").scrollLeft());

            $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft());

            $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft());

        });*/



        /* collaps table rows */

        $('.tgHeader').click(function(){

            $(this).toggleClass('expand').nextUntil('tr.tgHeader').slideToggle(100);

        });

    });

</script>

<script src="stickybits.min.js"></script>

<script>stickybits('.tgHeader');</script>

</head>

<body>

    <table>

    <thead>

        <tr>

            <th>Текст</th><th>233</th><th>232</th><th>231</th>

        </tr><tr class="tgHeader">

            <th>Текст </th><td><table>

    <tr>

        <td>Текст</td><td>Текст</td><td>Текст</td><td>Текст</td><td>Текст</td>

    </tr><tr>

        <td>Текст</td><td>100</td><td>Текст</td><td>123</td><td>12355</td>

    </tr><tr>

        <td>Текст</td><td>5</td><td>321</td><td>123</td><td>T20154</td>

    </tr><tr>

        <td>Текст</td><td>27,222</td><td>12313</td><td>321</td><td>0001</td>

    </tr>

</table></td><td><table>

    <tr>

        <td>Текст</td><td>Текст</td><td>Текст</td><td>Дата отбора</td><td>Текст</td>

    </tr>

</table></td><td><table>

    <tr>

        <td>Текст</td><td>Текст</td><td>Текст</td><td>Текст</td><td>Текст</td>

    </tr>

</table></td>

        </tr>

    </thead><tbody>

        <tr class="tgHeader">

            <th><span class="sign"></span> Заголовок </th><th class="tgHeaderExtended" colspan="5"></th>

        </tr><tr>

            <th>Текст </th><td>2 Текст</td><td>2 Текст</td><td>2 Текст</td>

        </tr><tr>

            <th>Текст</th><td>Текст</td><td>Текст</td><td>Текст</td>

        </tr><tr>

            <th>Текст</th><td>Текст 12</td><td>Текст 12</td><td>Текст 12</td>

        </tr><tr>

            <th>Текст</th><td>12-4</td><td>12-4</td><td>12-4</td>

        </tr><tr>

            <th>Текст</th><td>Текст</td><td>Текст</td><td>Текст</td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td>Текста</td><td>Текст</td><td>Текст</td>

        </tr><tr>

            <th>Текст</th><td>2</td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td>0,661</td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td>0,272</td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст </th><td>Текст</td><td>Текст</td><td>Текст</td>

        </tr><tr>

            <th>Текст </th><td>Текст</td><td>Текст</td><td>Текст</td>

        </tr><tr class="tgHeader">

            <th><span class="sign"></span> Заголовок</th><th class="tgHeaderExtended" colspan="4"></th>

        </tr><tr>

            <th>Текст </th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст </th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr class="tgHeader">

            <th><span class="sign"></span> Заголовок</th><th class="tgHeaderExtended" colspan="4"></th>

        </tr><tr>

            <th>Текст </th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr class="tgHeader">

            <th><span class="sign"></span> Заголовок</th><th class="tgHeaderExtended" colspan="4"></th>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td></td><td></td>

        </tr><tr>

            <th>Текст</th><td></td><td><table>

    <tr>

        <td>Текст</td><td>↑</td><td>↓</td><td>Текст</td><td>Текст</td>

    </tr><tr>

        <td>300</td><td>0</td><td>0</td><td>0</td><td>0</td>

    </tr><tr>

        <td>200</td><td>0</td><td>0</td><td>0</td><td>0</td>

    </tr><tr>

        <td>100</td><td>0</td><td>0</td><td>0</td><td>0</td>

    </tr><tr>

        <td>60</td><td>0</td><td>0</td><td>0</td><td>0</td>

    </tr><tr>

        <td>30</td><td>0</td><td>0</td><td>0</td><td>0</td>

    </tr><tr>

        <td>6</td><td>0</td><td>0</td><td>0</td><td>0</td>

    </tr><tr>

        <td>3</td><td>0</td><td>0</td><td>0</td><td>0</td>

    </tr>

</table></td><td><table>

    <tr>

        <td>Текст</td><td>↑</td><td>↓</td><td>Текст</td><td>Текст</td>

    </tr><tr>

        <td>300</td><td>0</td><td>0</td><td>0</td><td>0</td>

    </tr><tr>

        <td>200</td><td>0</td><td>0</td><td>0</td><td>0</td>

    </tr><tr>

        <td>100</td><td>0</td><td>0</td><td>0</td><td>0</td>

    </tr><tr>

        <td>60</td><td>0</td><td>0</td><td>0</td><td>0</td>

    </tr><tr>

        <td>30</td><td>0</td><td>0</td><td>0</td><td>0</td>

    </tr><tr>

        <td>6</td><td>0</td><td>0</td><td>0</td><td>0</td>

    </tr><tr>

        <td>3</td><td>0</td><td>0</td><td>0</td><td>0</td>

    </tr>

</table></td>

        </tr>

    </tbody>

</table></body> </html>

Источник

Ответы (1 шт):

Автор решения: WalkMess

Я попробовал написать логику, однако, это не работает с параметром transition в css/js.

const navigation = document.querySelector('.menu');

const getMatrix = (selector, lastIndex) => {
  const transform = window
    .getComputedStyle(selector, null)
    .getPropertyValue('transform');
  const dataTransform = transform.match(/-?\d+\.?\d+|\d+/g);
  return +dataTransform[dataTransform.length - lastIndex];
};

const { offsetTop } = navigation;
const savaPos = getMatrix(navigation, 1);
window.addEventListener(
  'scroll',
  () => {
    const doc =
      (document.documentElement && document.documentElement.scrollTop) ||
      document.body.scrollTop;
    if (navigation.classList.contains('s') && doc >= savaPos) return;
    else if (doc >= offsetTop && doc >= savaPos) {
      navigation.classList.add('s');
    } else if (doc <= savaPos) {
      navigation.classList.remove('s');
    }
  },
  { passive: true }
);

.menu {
  display: flex;
  transform: translateY(100px);
  padding: 15px;
  background-color: #14151a;
  /* transition: all 0.3s; */
}

.s { 
  position: fixed; 
  transform: translateY(0);
  top: 0;
  width: 100%;
  height: auto;
}
→ Ссылка

licensed under cc by-sa 3.0 with attribution.