Add a scroll to next section link on header button, positioned fixed at the bottom with in the div-CodePudding

I have a header section with background video, as video height is bigger than the screen height, I am trying to add a small arrow icon at the bottom of the header section (of screen section because bottom of header is quite below).

So, I want to add arrow section to the bottom of the screen fixed, and while keeping fixed this arrow should be keep showing on other div, means it need to be shown only on this kssite-home-intro-se

Here is my code:

<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>

and 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;
}

Here, this is working fine,but this arrow remains there on the bottom of the screen even if we scrolled past this kssite-home-intro-sec section.

I have also, tried with absolute instead, but it positioned itself to the bottom of the div, and bottom of the div is not with in the screen and we have to scroll little bit to view this scroll button.

How, could I make it as I wanted.

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

CodePudding user response：

Use position:sticky if you want to achieve this.

.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>

In case if this snippet is not working in stackoverflow here's a codepen link

No matter how much height is the video it will stick to the bottom