Как заставить <div>оставаться на фиксированном расстоянии от верхней части экрана при прокрутке? - PullRequest
Новая
       0

Как заставить <div>оставаться на фиксированном расстоянии от верхней части экрана при прокрутке?

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

Я хочу разместить элемент <div> с более длинным текстом на веб-странице с фиксированным верхним интервалом 30 пикселей. Проблема в том, что всякий раз, когда я прокручиваю вниз, <div> не остается на месте, и интервал исчезает. Я ищу CSS -только решение.

Этот документ иллюстрирует мою проблему: 

<!DOCTYPE html>
<html>
  <body>
    <div style = "width: 10px; top: 50px; margin-top: 50px; padding-top: 50px;
      position: absolute;">
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
      text to enable scrolling.
    </div>
  </body>
</html>

Ответы [ 4 ]

1 голос
/ 11 апреля 2020

так вы говорите, что хотите оставить интервал 30 пикселей в верхней части элемента div, но при этом хотите иметь возможность прокручивать его вниз? В этом случае, я думаю, вы должны сделать прокрутку самого div. Но поскольку это не то, что вы хотите, как насчет наложения другого div на position:fixed и того же цвета фона? 

  <body>
    <div class="overlay"></div>
    <div class="content">
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
      text to enable scrolling.<br>
    </div>
  </body>

body {
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  height: 100%;
}

.content {
  position: relative;
  padding-top: 50px;
  z-index: 1000;
  background: white;
  width: 300px;
}

.overlay {
  position: fixed;
  height: 50px;
  width: 100%;
  z-index: 2000;
  background: white;
}
1 голос
/ 11 апреля 2020

Попробуйте это css правило для своего фиксированного <div>. 

.yourfixeddiv {
  position: fixed;
  top: 30px;
  width: 100%;
}
0 голосов
/ 11 апреля 2020

position: fixed; - это способ сохранить элемент на месте. Важно использовать width. Больше информации здесь: https://css-tricks.com/almanac/properties/p/position/

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

Вам не нужна маржинальная вершина, если вы абсолютно позиционируете.

позиция: липкая с вершиной: 50px; должен достичь того, что вы хотите 

div {
  position: sticky;
  top: 50px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...