У элемента установлено значение position: fixed; но при просмотре страницы на мобильных устройствах элемент уезжает вверх при скролле

Рейтинг: 0Ответов: 1Опубликовано: 12.03.2023

Есть сайдбар у с классом "sidebar". Когда я в браузере я открываю эмуляцию мобильных устройств сайдбар уезжает вверх во время прокрутки несмотря на position: fixed;. Помогите пожалуйста.

Также есть еще одна странная проблема. При эмуляции мобильных устройств меняется масштаб страницы. Эта проблема исчезает только если перейти на другую страницу а потом обратно.

Вот html:

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    <div class="header-mobile">
        <div class="logo-mini">
            <a href="{% url 'main' %}">AKZHIGITOV ALMAS</a>
        </div>
        <div class="burger"></div>
    </div>
    <nav class="sidebar">
        <div class="logo">
            <a href="{% url 'main' %}">AKZHIGITOV ALMAS</a>
        </div>
        <div class="menu">
          <ul>
            <li><a href="{% url 'works' %}">Works</a></li>
            <li><a href="{% url 'about' %}">About</a></li>
            <li><a href="{% url 'contacts' %}">Contacts</a></li>
          </ul>
        </div>
        <div class="language">
            <a href="#">Русский</a>
        </div>
    </nav>
    {% block content %}

    {% endblock %}
</body>
</html>

А вот css:

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

/* Zeroing */
*{
    padding: 0;
    margin: 0;
    border: 0;
}
*, *:before, *:after{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
:focus, :active{
    outline: none;
}
a{
    outline: none;
    color: #fff;
}

nav,footer,header,aside{display: block;}

/* Скрыть скроллбар */
::-webkit-scrollbar {
    display: none;
}

/* Стилизация прокручиваемой области */
.scrollable-content {
    overflow: auto;
}

html, body{
        
    height: 100%;
    width: 100%;
    font-style: 100%;
    line-height: 1;
    font-style: 14px;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    background-image: url("../images/image\ 88\ \(Stiker\ size\).png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

input, button, textarea{font-family: inherit;}

input::-ms-clear{display:none;}
button{cursor: pointer;}
button::-moz-focus-inner{padding: 0;border: 0;}
a, a:visited{
    text-decoration: none;
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 140%;
    color: aliceblue;}
a:hover{text-decoration: none;}
ul li{list-style-type: none;}
img{vertical-align: top;}

/* text */
h1,h2, h3, h4, h5, h6{font-family: 'Manrope', sans-serif; font-weight: 500;}

h1 {
    color: rgb(255, 255, 255);
    font-size: 5.55vw;
    line-height: 140%;
}

.text-body{
    font-size: 20px;
    line-height: 140%;
    color: rgb(255, 255, 255);
}

.text-caption{
    font-size: 15px;
    line-height: 140%;
    color: rgb(255, 255, 255);
}

/* main part */
    /* main part/menu */
    .sidebar {
        width: 312px;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0);
        padding: 40px 0px 40px 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: fixed;
        z-index: 90;
    }
  
    .logo {
        font-family: 'Manrope', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 21px;
        color: #fff;
        letter-spacing: -0.025em;
        text-transform: uppercase;
    }
    
    .menu {
        font-family: 'Manrope', sans-serif;
        font-weight: 500;
        font-size: 20px;
        line-height: 140%;
        color: aliceblue;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    .menu li {
        margin-bottom: 10px;
    }
    
    .language {
        font-family: 'Manrope', sans-serif;
    }

    .header-mobile{
        visibility: hidden;

        background-color: black;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0px 16px;

        position: fixed;
        width: 100vw;
        height: 60px;
        left: 0px;
        top: 0px;
        z-index: 100;
    }

    .burger {
        width: 36px;
        height: 36px;
        background-color: rgb(255, 255, 255);
    }
/* main part/contact page */
.contacts-content{
    width: calc(100% - 352px);
    margin-right: 40px;
    margin-left: 312px;
    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: black;
}

/* media query */
@media (max-width: 1016px) {
    .header-mobile{
        visibility: visible;
    }
    .sidebar{
        width: 100vw;
        background-color: black;
        position: fixed;
    }
}
css html position
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

По поводу сайтбара, непонятно. Нужено показать нормально работающий код, а не эту породию с Ларавела... На счет второго вопроса.

Метаданные Viewport с использованием "width=device-width" приводят к уменьшению масштаба страницы, чтобы соответствовать содержимому, которое переполняет границы области просмотра. Вы можете переопределить это поведение, добавив "shrink-to-fit=no" в свой метатег, как показано у вас в коде. Добавленное значение будет препятствовать масштабированию страницы в соответствии с окном просмотра.

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Зачем такое прописано было, непонятно, но видать тот кто это писал, понимал, что он делает.