Добавьте ссылку прокрутки до следующего раздела на кнопку заголовка, расположенную неподвижно внизу с помощью div

ProgramBox

Добавьте ссылку прокрутки до следующего раздела на кнопку заголовка, расположенную неподвижно внизу с помощью div

Post author:admin
Запись опубликована:9 января, 2022
Post category:Вопросы по программированию

#html #css

Вопрос:

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

Итак, я хочу добавить раздел со стрелкой в нижнюю часть экрана фиксированным, и, сохраняя фиксированным, эта стрелка должна отображаться на другом div, значит, ее нужно показывать только на этом kssite-home-intro-se

Вот мой код:

 <section class="kssite-home-intro-sec">
    <div id="kssite-intro-sec-overlay"></div>
    <div class="embed-responsive embed-responsive-16by9">
        <iframe
                src="<?php echo CFS()->get('video_url',5); ?>?background=1"
                frameborder="0"
                allow="autoplay; fullscreen; picture-in-picture"
                allowfullscreen
        ></iframe>
    </div>
    <div class="arrow-to-next-sec">
        <a href="#"><i class="fa fa-5x fa-angle-down" aria-hidden="true"></i></a>
    </div>
</section>

и CSS:

 .kssite-home-intro-sec {
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 100px;
    background-position: center center;
    z-index: 1;
    position: relative;
    overflow: hidden;
}
.arrow-to-next-sec{
    position: fixed;
    bottom:0;
    left:49%;
    cursor: pointer;
    color: #ffffff;
    z-index: 99;
}
.arrow-to-next-sec a{
    color: #ffffff;
}

Здесь это работает нормально, но эта стрелка остается в нижней части экрана,даже если мы прокрутили этот kssite-home-intro-sec раздел.

Я также попробовал absolute вместо этого, но он располагался в нижней части div, а нижняя часть div не отображается на экране, и нам нужно немного прокрутить, чтобы просмотреть эту кнопку прокрутки.

Как я мог сделать это так, как хотел?

JSFIDDLE: https://jsfiddle.net/npk5dw0m/

1. Ваш фрагмент кода здесь не работает! Пожалуйста, используйте код с видимым пользовательским интерфейсом. ИЛИ вы можете использовать position: absolute вместо fixed .

2. я добавил ссылку на js fiddle, возможно, вы ее пропустили, но я уже упоминал, что абсолют тоже не работает.

Ответ №1:

Используйте position:sticky , если вы хотите этого достичь.

 .arrow-to-next-sec {position: sticky; bottom: 0; left: 0; z-index: 2;}

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/ xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">

<section class="kssite-home-intro-sec">
    <div id="kssite-intro-sec-overlay"></div>
    <div class="embed-responsive embed-responsive-16by9">
        <iframe
                src="https://player.vimeo.com/video/347119375?background=1"
                frameborder="0"
                allow="autoplay; fullscreen; picture-in-picture"
                allowfullscreen
        ></iframe>
    </div>
    <div class="arrow-to-next-sec">
        <a href="#second-div"><i class="fa fa-5x fa-angle-down" aria-hidden="true"></i></a>
    </div>
</section>
<section id="second-div">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates placeat esse voluptas, rem eveniet eos laboriosam architecto. Amet, repellendus minus dicta hic tenetur quaerat, blanditiis laborum obcaecati suscipit odio iusto.
  </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates placeat esse voluptas, rem eveniet eos laboriosam architecto. Amet, repellendus minus dicta hic tenetur quaerat, blanditiis laborum obcaecati suscipit odio iusto.
  </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates placeat esse voluptas, rem eveniet eos laboriosam architecto. Amet, repellendus minus dicta hic tenetur quaerat, blanditiis laborum obcaecati suscipit odio iusto.
  </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates placeat esse voluptas, rem eveniet eos laboriosam architecto. Amet, repellendus minus dicta hic tenetur quaerat, blanditiis laborum obcaecati suscipit odio iusto.
  </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates placeat esse voluptas, rem eveniet eos laboriosam architecto. Amet, repellendus minus dicta hic tenetur quaerat, blanditiis laborum obcaecati suscipit odio iusto.
  </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates placeat esse voluptas, rem eveniet eos laboriosam architecto. Amet, repellendus minus dicta hic tenetur quaerat, blanditiis laborum obcaecati suscipit odio iusto.
  </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates placeat esse voluptas, rem eveniet eos laboriosam architecto. Amet, repellendus minus dicta hic tenetur quaerat, blanditiis laborum obcaecati suscipit odio iusto.
  </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates placeat esse voluptas, rem eveniet eos laboriosam architecto. Amet, repellendus minus dicta hic tenetur quaerat, blanditiis laborum obcaecati suscipit odio iusto.
  </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates placeat esse voluptas, rem eveniet eos laboriosam architecto. Amet, repellendus minus dicta hic tenetur quaerat, blanditiis laborum obcaecati suscipit odio iusto.
  </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates placeat esse voluptas, rem eveniet eos laboriosam architecto. Amet, repellendus minus dicta hic tenetur quaerat, blanditiis laborum obcaecati suscipit odio iusto.
  </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates placeat esse voluptas, rem eveniet eos laboriosam architecto. Amet, repellendus minus dicta hic tenetur quaerat, blanditiis laborum obcaecati suscipit odio iusto.
  </p>
</section>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script>

В случае, если этот фрагмент не работает в stackoverflow, вот ссылка на кодовую ссылку

Независимо от того, какой высоты видео, оно будет прилипать к нижней части

1. Кажется, что это не работает, стрелка, похоже, исчезла за пределами видео, кроме того, значок со стрелкой слева не в центре.

2. Я обновил ссылку codepen, пожалуйста, проверьте сейчас.

Метки: Добавьте ссылку прокрутки до следующего раздела на кнопку заголовка, расположенную неподвижно внизу с помощью div