Ссылку на Certian нельзя нажимать, если высота страницы не мала - PullRequest
Новая
       8

Ссылку на Certian нельзя нажимать, если высота страницы не мала

0 голосов
/ 16 октября 2018

Я изучаю начальную загрузку 4. У меня есть страница с левой навигационной панелью.Ссылки указывают на абзацы на той же странице.Левая навигационная панель остается постоянно видимой.

Проблема:

Когда ВЫСОТА окна браузера находится в полноэкранном режиме, в режиме рабочего стола, две ссылки внизу не могут бытьнажал на левой навигационной панели (ссылки для элементов: пункт 3-2 и пункт 4-2). То есть, нельзя навести курсор мыши на ссылку, чтобы щелкнуть по ней.Все остальные ссылки работают нормально.

Когда окно браузера уменьшается по высоте вручную, эта проблема исчезает, и я могу щелкнуть все ссылки.

Что вызывает проблему в полноэкранном режимережим рабочего стола?

Полагаю, этот класс вызывает проблему - но я не уверен. 

 .bd-example {
        position: -webkit-sticky; /* is it this? */
        position: sticky;
        top: .5rem; height: calc(100vh - .5rem);
        overflow-y: auto;
        padding-top: .5rem;
        padding-bottom: .5rem;
        font-size: .875rem;
        display: inline-block;
    }

Код в виде документа: страница HTML и CSS код файла

Я поместил код в jsFiddle: https://jsfiddle.net/ekareem/aq9Laaew/250605/ Однако нужно сделать страницу результатов достаточно высокой, чтобы наблюдать за проблемой.

Спасибо.

1 Ответ

0 голосов
/ 16 октября 2018

Это потому, что элементы, которые вы пытаетесь прокрутить, слишком короткие, а последние помещаются на одном экране.

Чтобы исправить это, вам нужно разрешить вашей странице фактически прокручивать их (поместите элемент, к которому она относится, вверху страницы).

В приведенном ниже примере я использую "исправление бедняка" - padding-bottom:100vh для контейнера - чтобы вы могли видеть, как он работает правильно: 

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.bd-example {
    position: -webkit-sticky;
    position: sticky;
    top: .5rem; height: calc(100vh - .5rem);
    overflow-y: auto;
	padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: .875rem;
	display: inline-block; /* could cause a slider when short vitewport */
}
[data-target="#navbar-example3"] {
  padding-bottom: 100vh;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>  
</div>

<body data-spy="scroll" data-target=".bd-example">

    <div class="container">
        <div class="row">
            <div class="col-4">
    
                <div class="bd-example">

                    <nav id="navbar-example3" class="navbar navbar-dark bg-light">
                            
                        <nav class="nav nav-pills flex-column">
                            <a class="navbar-brand" href="#" style="color:black;">Test</a>

                            <a class="nav-link" href="#item-1">Item 1</a>
                            <ul class="nav nav-pills flex-column">
                                <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
                                <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
                            </ul>

                            <a class="nav-link" href="#item-2">Item2</a>                         

                            <a class="nav-link" href="#item-3">Item3</a>
                            <ul class="nav nav-pills flex-column">
                                <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
                                <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
                            </ul>

                            <a class="nav-link" href="#item-4">Item4</a>
                            <ul class="nav nav-pills flex-column">
                                <a class="nav-link ml-3 my-1" href="#item-4-1">Item 4-1</a>
                                <a class="nav-link ml-3 my-1" href="#item-4-2">Item 4-2</a>
                            </ul>
                        </nav>

                    </nav>
                </div>
            </div>

            <div class="col-8">
                <div data-spy="scroll" data-target="#navbar-example3" data-offset="300">
                    <h4 id="item-1">Item 1</h4>
                        <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id
                            magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore.
                            Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non
                            excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim
                            reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam
                            non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
                        </p>
                            <h5 id="item-1-1">Item 1-1</h5>
                                <p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat
                                    elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum
                                    excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore.
                                    Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur
                                    consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate
                                    excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim
                                    id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
                                </p>
                            <h5 id="item-1-2">Item 2-2</h5>
                                <p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure
                                    laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna
                                    occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore
                                    anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla
                                    in non consequat eiusmod velit incididunt.
                                </p>

                    <h4 id="item-2">Item 2</h4>
                    <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
                        consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur
                        mollit
                        voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam
                        Lorem
                        aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor
                        laborum
                        mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum
                        fugiat ex
                        est consectetur ipsum commodo tempor sunt in proident.
                    </p>

                    <h4 id="item-3">Item 3</h4>
                        <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua
                            ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit.
                            Deserunt
                            tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco
                            excepteur.
                        </p>
                        <h5 id="item-3-1">Item 3-1</h5>
                            <p>Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore
                                anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi
                                enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor
                                eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex
                                exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip
                                laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.
                            </p>
                        <h5 id="item-3-2">Item 3-2</h5>
                            <p>Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit
                                nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in
                                exercitation velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt
                                reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit
                                ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.
                            </p>

                    <h4 id="item-4">Item 4</h4>
                    <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id
                        magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore.
                        Fugiat laborum incididunt tempor eu consequat enim dolore proident. Qui laborum do non
                        excepteur nulla  magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim
                        reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam
                        non fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
                    </p>
                    <h5 id="item-4-1">Item 4-1</h5>
                    <p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat
                        elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum
                        excepteur irure consequat id quis ea. Sit proident ullamco aute magna pariatur nostrud labore.
                        Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur
                        consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate
                        excepteur minim exercitation minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim
                        ix duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
                    </p>
                    <h5 id="item-4-2">Item 4-2</h5>
                    <p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure
                        laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna
                        occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore
                        anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non
                        consequat eiusmod velit incididunt.
                    </p>
                </div>
            </div>
        </div>
    </div>

Другие, более сложные опции включают в себя:

  • добавление любого элемента после вашего контента, минимальная высота которого 100vhминус высота вашего последнего элемента (возможно, хорошего, высокого нижнего колонтитула?) - если вы не можете думать ни о чем другом, просто поставьте <div> с (min-height: 100vh; background: url('link-to-nice-picture' no-repeat 50% 50% /cover) и "Спасибо" сообщение Fineprint с центром в нижней части.Пример: 

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.bd-example {
  position: -webkit-sticky;
  position: sticky;
  top: .5rem;
  height: calc(100vh - .5rem);
  overflow-y: auto;
  padding-top: .5rem;
  padding-bottom: .5rem;
  font-size: .875rem;
  display: inline-block;
  /* could cause a slider when short vitewport */
}

.bottom-message {
  background: url(https://static.boredpanda.com/blog/wp-content/uploads/2014/08/cat-looking-at-you-black-and-white-photography-1.jpg) no-repeat bottom center /cover;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.bottom-message em{
  font-family: initial;
  font-size: 1.5rem;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<body data-spy="scroll" data-target=".bd-example">

  <div class="container">
    <div class="row">
      <div class="col">
        1 of 2
      </div>
      <div class="col">
        2 of 2
      </div>
    </div>
    <div class="row">
      <div class="col">
        1 of 3
      </div>
      <div class="col">
        2 of 3
      </div>
      <div class="col">
        3 of 3
      </div>
    </div>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-4">

        <div class="bd-example">

          <nav id="navbar-example3" class="navbar navbar-dark bg-light">

            <nav class="nav nav-pills flex-column">
              <a class="navbar-brand" href="#" style="color:black;">Test</a>

              <a class="nav-link" href="#item-1">Item 1</a>
              <ul class="nav nav-pills flex-column">
                <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
                <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
              </ul>

              <a class="nav-link" href="#item-2">Item2</a>

              <a class="nav-link" href="#item-3">Item3</a>
              <ul class="nav nav-pills flex-column">
                <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
                <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
              </ul>

              <a class="nav-link" href="#item-4">Item4</a>
              <ul class="nav nav-pills flex-column">
                <a class="nav-link ml-3 my-1" href="#item-4-1">Item 4-1</a>
                <a class="nav-link ml-3 my-1" href="#item-4-2">Item 4-2</a>
              </ul>
            </nav>

          </nav>
        </div>
      </div>

      <div class="col-8">
        <div data-spy="scroll" data-target="#navbar-example3" data-offset="300">
          <h4 id="item-1">Item 1</h4>
          <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore
            proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat
            id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
          </p>
          <h5 id="item-1-1">Item 1-1</h5>
          <p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco
            aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation
            minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim id duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
          </p>
          <h5 id="item-1-2">Item 2-2</h5>
          <p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur
            ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.
          </p>

          <h4 id="item-2">Item 2</h4>
          <p>Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem.
            Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat
            ex est consectetur ipsum commodo tempor sunt in proident.
          </p>

          <h4 id="item-3">Item 3</h4>
          <p>Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat
            mollit culpa irure ullamco est ex ullamco excepteur.
          </p>
          <h5 id="item-3-1">Item 3-1</h5>
          <p>Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut.
            Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum
            consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.
          </p>
          <h5 id="item-3-2">Item 3-2</h5>
          <p>Labore sit culpa commodo elit adipisicing sit aliquip elit proident voluptate minim mollit nostrud aute reprehenderit do. Mollit excepteur eu Lorem ipsum anim commodo sint labore Lorem in exercitation velit incididunt. Occaecat consectetur nisi
            in occaecat proident minim enim sunt reprehenderit exercitation cupidatat et do officia. Aliquip consequat ad labore labore mollit ut amet. Sit pariatur tempor proident in veniam culpa aliqua excepteur elit magna fugiat eiusmod amet officia.
          </p>

          <h4 id="item-4">Item 4</h4>
          <p>Ex consequat commodo adipisicing exercitation aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Do aute ipsum ipsum ullamco cillum consectetur ut et aute consectetur labore. Fugiat laborum incididunt tempor eu consequat enim dolore
            proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat
            id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore.
          </p>
          <h5 id="item-4-1">Item 4-1</h5>
          <p>Amet tempor mollit aliquip pariatur excepteur commodo do ea cillum commodo Lorem et occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum excepteur irure consequat id quis ea. Sit proident ullamco
            aute magna pariatur nostrud labore. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proident magna consectetur consequat eu commodo fugiat non quis. Enim aliquip exercitation ullamco adipisicing voluptate excepteur minim exercitation
            minim minim commodo adipisicing exercitation officia nisi adipisicing. Anim ix duis qui consequat labore adipisicing sint dolor elit cillum anim et fugiat.
          </p>
          <h5 id="item-4-2">Item 4-2</h5>
          <p>Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur
            ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="bottom-message"><em>Say cheese...</em></div>
</body>
  • уменьшение количества элементов scrollspy до полезного числа (помните, что функция scrollspy позволяет пользователям прокручивать большое количество контента быстро - поэтому возможно только добавление его в разделы, а не в подразделы!?).

https://jsfiddle.net/websiter/uodnhqyp/

  • делая каждыйСекция scrollspy имеет высоту не менее 100vh, обогащая ваше приложение графикой, которая является основой неотразимого современного дизайна.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...