0

Я заметил, что если попытаться пролистать вебсайт наверх, когда выше уже ничего нет, то над шапкой появится пустое пространство, как на картинке ниже. пример Так вот вопрос, могу ли я на своём сайте с помощью html/css/js сделать так чтобы в этом месте появлялась картинка? Желательно чтобы она не могла развернуться на неограниченную высоту.

Пока-что единственный вариант, который я нашёл, как повлиять на содержимое нового пространства - изменить background тега body. Но это повлияет на весь сайт. Если создать новый элемент и задать ему position: fixed, то всё его содержимое выше 0 по y будет обрезаться.

5
  • Протестил на PC (windows, chrome) и на андродие (chrome) ничего вверх не листается и полоса не появляется, как вы это делаете (устройство, браузер) Такое событие можно эмулировать на js, если прокрутка <=5px то опускаем хэдер и показываем картинку
    – Greg--
    8 июл 2021 в 12:39
  • Тачпад, работает в safari и firefox
    – i3Cheese
    8 июл 2021 в 13:04
  • А как без тачпада этого добится? Полоска - это background тега body, попробуйте задать цвет красный и посмотреть что получится. Чтоб задать картинку вы должны указать картинку как background для body
    – Greg--
    8 июл 2021 в 13:09
  • Но эта фишка работает только на ноутах и максовских мышках сенсорных, на остальных дивайсах никто не увидит этого
    – Greg--
    8 июл 2021 в 13:11
  • Я понимаю, но это должна быть своеобразная пасхалка и соответственно просто поменять background нельзя, это повлияет на остально сайт.
    – i3Cheese
    8 июл 2021 в 13:43

2 ответа 2

0

Идея в том чтоб сделать изображение под высоту топбара и под ним поставить изображение. Ниже топбара обычный фон body.

Красный -топбар
розовый - картинка
зеленый - фон страницы

UPD: проверил, изображение прыгает при прокрутке а зеленая заливка остается

Вариант не работающий

*{
  padding:0;
  margin: 0;
}
body{
      background: center top / 100% 80px no-repeat url(http://i.imgur.com/9HMnxKs.png), green;
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  height: 80px;
  background-color: red;
}
<div class="header"></div>

0

Делаем внутренний элемент, который будет корневым, и все остальные элементы будут содержаться в нём. Задаём body тайный background, обязательно указываем repeat. Элементу #root тот background, который будет виден всем пользователям. И вуаля, теперь пользователи будут видеть смешную картинку если как-то смогут заглянуть за пределы сайта.

body {
        background: url("https://sun9-63.userapi.com/impf/c855636/v855636410/6a2c5/8ixqqs-16Mo.jpg?size=242x228&quality=96&sign=d8fd6c8021f877c249fa9afa1c1550be&type=album") repeat;
        min-height: 100vh;
        min-width: 100vw;
        margin: 0;
        padding: 0;
    }
    #root {
        background: #00ff00;
        min-height: 100vh;
        min-width: 100vw;
        height: 100%;
        width: 100%;
    }
<body>
<div id="root">
    AAAAAA
</div>
</body>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.