Как исправить заголовок и боковые панели в сетке CSS при использовании tocbot - PullRequest
Новая
       75

Как исправить заголовок и боковые панели в сетке CSS при использовании tocbot

0 голосов
/ 04 мая 2020

Я использую CSS сетку. Мне нужно исправить область заголовка и обе боковые панели (левую и правую), чтобы прокручивалась только панель содержимого. Я использую tocbot для генерации вида прокрутки в правой боковой панели. В приведенном ниже коде ссылки правой боковой панели подсвечиваются, если вы видите инспектор кода, но поскольку вся страница прокручивается, вы не можете видеть ее в режиме просмотра страницы. Как мне добиться этого, чтобы все содержимое, кроме содержимого, было фиксированным и всегда видимым, а правая боковая панель работала с выделением текущего заголовка. Я даже удалил нижний колонтитул, чтобы увидеть, работает ли он, но не go. Если я использую max-height для исправления вида, то tocbot / right-sidebar больше не выделяет до c записей. 

.wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 4;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  background-color: pink;
  max-height: 100vh;
}

.wrapper>div {
  background-color: white;
}

.header-top-left {
  grid-column: 1/12;
  grid-row: 1/2;
  max-height: 5vh;
}

.header-top-right {
  grid-column: 10/13;
  grid-row: 1/2;
  max-height: 5vh;
}

.header-bottom-left {
  grid-column: 1/10;
  grid-row: 2/3;
  max-height: 5vh;
}

.header-bottom-right {
  grid-column: 10/13;
  grid-row: 2/3;
  max-height: 5vh;
}

.ht-sidebar {
  grid-column: 1/3;
  grid-row: 3/4;
}

.ht-content {
  grid-column: 3/11;
  grid-row: 3/4;
}

.onthispage {
  grid-column: 11/13;
  grid-row: 3/4;
  padding: 20px;
}
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css">
</head>

<body>
  <div class="wrapper">
    <div class="header-top-left">Header Top Left </div>
    <div class="header-top-right">Header Top Right </div>
    <div class="header-bottom-left">Header Bottom Left </div>
    <div class="header-bottom-right">Header Bottom Right </div>

    <div class="ht-sidebar">Sidebar</div>

    <div class="ht-content js-toc-content">Content

      <h1 id="1"> Heading 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales
        leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis
        vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
        <p>

          <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis.
            Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus
            hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo.
            Suspendisse potenti.</p>
          <h1 id="2"> Heading 2</h1>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales
            leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
            <p>

              <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem
                at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis.
                Ut justo. Suspendisse potenti.</p>
              <h1 id="3"> Heading 3</h1>
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero
                sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel,
                dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
                <p>

                  <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem
                    at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.Lorem ipsum dolor sit amet, consectetuer adipiscing
                    elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh.
                    Nullam mollis. Ut justo. Suspendisse potenti.</p>
                  <h1 id="4"> Heading 4</h1>
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero
                    sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
                    <p>

                      <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper
                        lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.Lorem ipsum dolor sit amet, consectetuer
                        adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc
                        tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p>
                      <h1 id="5"> Heading 5</h1>
                      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor
                        libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
                        <p>
    </div>

    <div class="onthispage js-toc">tocify Output </div>

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


    <script>
      tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.js-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.js-toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
        // For headings inside relative or absolute positioned containers within content.
        hasInnerContainers: false,
      });
    </script>

</body>

1 Ответ

0 голосов
/ 12 мая 2020

Я отказался от сетки CSS, чтобы решить эту проблему, и, наконец, переключился на Flexbox. Никаких проблем, по крайней мере, на данный момент.

...