сделать элемент видимым, только если прокрутить вниз или страница выше, чем видео, CSS только - PullRequest
Новая
       0

сделать элемент видимым, только если прокрутить вниз или страница выше, чем видео, CSS только

0 голосов
/ 16 апреля 2020

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

Возможно ли это с чистым CSS? Как?

пример кода: 

<body>
    content...
    <button id="return">return to top</button>
</body>

хотите показать #return только если 1 страница выше окна ИЛИ 2 полоса прокрутки видна ИЛИ 3 еще лучше полоса прокрутки видна и прокручивается вниз

1 Ответ

2 голосов
/ 16 апреля 2020

Вот одна идея, где элемент появится после небольшой прокрутки и прилипнет к нижней части: 

p {
  font-size: 35px;
  padding: 10px;
}

body {
  margin:0;
  position: relative; /* relative to the body */
}

.fixed {
  position: absolute;
  top: 110vh; /* defined when the element will appear */
  bottom: 0;
  left: 0;
  right: 0;
  /* needed to push the sticky element down */
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  /* to hide element if content is short*/
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}

.fixed>div {
  /* stick to the bottom */
  position: sticky;
  bottom: 0;
  
  background: red;
  padding: 15px;
  color: #fff;
  text-align: center;
}
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac risus ac est pulvinar finibus cursus non augue. Proin turpis tortor, dapibus vel metus eget, fermentum aliquam diam. Quisque sodales est sed diam mollis dictum. Aliquam ut volutpat nisi.
  Aenean luctus turpis in malesuada malesuada. Praesent non ligula ut ligula feugiat convallis porttitor nec leo. Integer vel risus eget metus viverra ultrices vel vel enim. Sed vitae laoreet ex. Fusce tristique feugiat odio non consequat. Sed bibendum
  tempor est, sed vestibulum ex aliquet quis. Nam libero quam, laoreet at elementum in, scelerisque vel ex. Vivamus ac purus eget orci vehicula gravida. Aliquam eleifend felis eget porttitor sollicitudin. Donec ut sodales eros. Sed a eros urna.
  
  tempor est, sed vestibulum ex aliquet quis. Nam libero quam, laoreet at elementum in, scelerisque vel ex. Vivamus ac purus eget orci vehicula gravida. Aliquam eleifend felis eget porttitor sollicitudin. Donec ut sodales eros. Sed a eros urna.
</p>
<div class="fixed">
  <div class="banner">some content here</div>
</div>

С некоторым эффектом затухания: 

p {
  font-size: 35px;
  padding: 10px;
}

body {
  margin:0;
  position: relative; /* relative to the body */
}

.fixed {
  position: absolute;
  top: 110vh; /* defined when the element will appear */
  bottom: 0;
  left: 0;
  right: 0;
  /* needed to push the sticky element down */
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  /*fading*/
  -webkit-mask:linear-gradient(to bottom,transparent,#fff 200px);
          mask:linear-gradient(to bottom,transparent,#fff 200px);
}

.fixed>div {
  /* stick to the bottom */
  position: sticky;
  bottom: 0;
  
  background: red;
  padding: 15px;
  color: #fff;
  text-align: center;
}
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac risus ac est pulvinar finibus cursus non augue. Proin turpis tortor, dapibus vel metus eget, fermentum aliquam diam. Quisque sodales est sed diam mollis dictum. Aliquam ut volutpat nisi.
  Aenean luctus turpis in malesuada malesuada. Praesent non ligula ut ligula feugiat convallis porttitor nec leo. Integer vel risus eget metus viverra ultrices vel vel enim. Sed vitae laoreet ex. Fusce tristique feugiat odio non consequat. Sed bibendum
  tempor est, sed vestibulum ex aliquet quis. Nam libero quam, laoreet at elementum in, scelerisque vel ex. Vivamus ac purus eget orci vehicula gravida. Aliquam eleifend felis eget porttitor sollicitudin. Donec ut sodales eros. Sed a eros urna.
  
  
  tempor est, sed vestibulum ex aliquet quis. Nam libero quam, laoreet at elementum in, scelerisque vel ex. Vivamus ac purus eget orci vehicula gravida. Aliquam eleifend felis eget porttitor sollicitudin. Donec ut sodales eros. Sed a eros urna.
</p>
<div class="fixed">
  <div class="banner">some content here</div>
</div>

Чтобы избежать дополнительной прокрутки при коротком содержании, это хитрость, использующая min() (она не будет работать на Firefox для сейчас) 

p {
  font-size: 35px;
  padding: 10px;
}

body {
  margin:0;
  position: relative; /* relative to the body */
}

.fixed {
  position: absolute;
  top: min(100%,110vh); /* defined when the element will appear */
  bottom: 0;
  left: 0;
  right: 0;
  /* needed to push the sticky element down */
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  /*fading*/
  -webkit-mask:linear-gradient(to bottom,transparent,#fff 200px);
          mask:linear-gradient(to bottom,transparent,#fff 200px);
}

.fixed>div {
  /* stick to the bottom */
  position: sticky;
  bottom: 0;
  
  background: red;
  padding: 15px;
  color: #fff;
  text-align: center;
}
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac risus ac est pulvinar finibus cursus non augue. Proin turpis tortor, dapibus vel metus eget, fermentum aliquam diam. Quisque sodales est sed diam mollis dictum. Aliquam ut volutpat nisi.
  Aenean luctus turpis in malesuada malesuada. Praesent non ligula ut ligula feugiat convallis porttitor nec leo. Integer vel risus eget metus viverra ultrices vel vel enim. Sed vitae laoreet ex. Fusce tristique feugiat odio non consequat. Sed bibendum
  tempor est, sed vestibulum ex aliquet quis. Nam libero quam, laoreet at elementum in, scelerisque vel ex. Vivamus ac purus eget orci vehicula gravida. Aliquam eleifend felis eget porttitor sollicitudin. Donec ut sodales eros. Sed a eros urna.
  
  
  tempor est, sed vestibulum ex aliquet quis. Nam libero quam, laoreet at elementum in, scelerisque vel ex. Vivamus ac purus eget orci vehicula gravida. Aliquam eleifend felis eget porttitor sollicitudin. Donec ut sodales eros. Sed a eros urna.
</p>
<div class="fixed">
  <div class="banner">some content here</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...