All geek questions in one place

How to place an element at the bottom of the screen when loading, but not fix it?

I am trying to place a down arrow at the bottom of my page, which will allow the user to smooth the scroll to the next section when clicked. I would like the position to always be close to the bottom no matter what device or screen size, and I don't want it to stay in place. It should scroll along with the rest of the site. When the user clicks on it, he will go to the next section, and at the bottom of the screen a new down arrow will appear, clockwise, which will connect to the next section.

HTML

<div class="row chevron-down">
  <div class="col-md-12">
    <a href="#aboutus1" class="smoothScroll"><img class="img-responsive visible-xs center-block" src="img/chevron-down.png" alt="Transformative Thinking" /></a>
  </div>
</div>

CSS

.chevron-down {
  /* magic code here */
}
+4
3

, , CSS3 . top:100vh , translateY(-100%), ( ):

.chevron-down {
    position:absolute;
    top:100vh;
    transform:translateY(-100%);
    width:100%;
}

Bootply. ! , .

+7

vh ( ) css, div vh, :

div { height : 10vh }

, div , 10 . 90vh

div {
    height : 10vh;
    position : relative;
    top : 90vh;
}

not that = > height + top = 100

0

, , . , div , , body, . , / , . ems,% s, pixels, , .

.main-content {
  background-color: #eee;
  height: 200vh;
  width: 100vw;
}

.chevron-arrow {
  position: fixed;
  color: green;
  bottom: 10px;
  right: 10px;
  font-size: 5em;
}
<html>
  <body>
    <div class="main-content">
      <h4>Just a placeholder, this could be anything</h4>
    </div>
    <div class="chevron-arrow">&#8964;</div>
  </body>
</html>
Hide result
0

Source: https://habr.com/ru/post/1648792/

More articles:


All Articles