Я создал свой веб-сайт с нуля, используя HTML и CSS. Я хочу иметь отдельные разделы. Панель навигации и основной раздел. Панель навигации должна прокручиваться вместе с окном при прокрутке по оси Y. Мне удалось сделать это с помощью CSS «position: fixed;». Но при прокрутке по оси x панель навигации перемещается по оси x, перекрывая основной раздел. Когда размер окна изменяется и становится слишком маленьким для правильного отображения всего, панель навигации перекрывает основной раздел.
Теперь моя цель — зафиксировать панель навигации на оси Y, но не на оси X. И когда окно становится слишком маленьким, чтобы отображать все сразу, панель навигации должна исчезнуть и снова появиться, когда окно снова станет больше.
Вы можете взглянуть на мой сайт здесь: https://f3mic.github.io/
Я не могу точно сказать, что сделано, чтобы попытаться решить эту проблему.
репрекс
html {
scroll-behavior: smooth;
}
.grid-container {
display: grid;
grid-template-columns: auto auto;
}
.item-sidebar {
position: fixed;
top: 10%;
font-size: 90%;
}
.item-main {
width: 80%;
max-width: 80%;
margin-left: 15%;
font-size: 110%;
hyphens: auto;
text-align: justify
}
body {
background-color: #1f1f1f;
color: white;
font-weight: normal;
font-family: monospace;
}
ol {
margin-left: -11%;
counter-reset: item;
list-style-type: none;
}
ol.first {
margin-left: -10%;
}
ol li::before {
counter-increment: item;
content: counters(item, ".") ". ";
}
<body>
<div class = "grid-container">
<div class = "item-sidebar">
<ol>
<li><a href = "index.html#intro">Introduction</a></li>
<li><a href = "index.html#prep">Preparations</a></li>
<ol class = "first">
<li><a href = "index.html#Fallout2_Installation">Installation - Fallout2</a></li>
<li><a href = "index.html#Fallout2_.dat_files">File handling - .dat files</a></li>
<li><a href = "index.html#Tools_Data_Exploring">Tools - .dat Extractor</a></li>
<li><a href = "index.html#Extracting_.dat_files">Extracting - .dat files</a></li>
<li><a href = "index.html#Tools_Scripting">Tools - Scripting</a></li>
<li><a href = "index.html#Config_sFall_Script_Editor">Config - sFall Script Editor</a></li>
<li><a href = "index.html#Tools_Mapping">Tools - Mapping</a></li>
<li><a href = "index.html#Config_BIS_Mapper">Config - BIS Mapper</a></li>
</ol>
<li><a href = "index.html#mapping">Mapping</a></li>
<ol class = "first">
<li><a href = "index.html#BIS_Mapper_explained">BIS Mapper explained</a></li>
<ol>
<li><a href = "index.html#hotkeys">Hotkeys</a></li>
</ol>
<li><a href = "index.html#build_map">How to build a map</a></li>
<ol>
<li><a href = "index.html#FloorWall">Floors and walls</a></li>
<li><a href = "index.html#SceneryCritter">Scenery and critters</a></li>
<li><a href = "index.html#LadderStair">Ladders and stairs</a></li>
<li><a href = "index.html#ScrollBlocker">Scroll blocker</a></li>
<li><a href = "index.html#MapExit">Map exits</a></li>
<li><a href = "index.html#Worldmap">Worldmap</a></li>
</ol>
<li><a href = "index.html#New_Critter">Make new prototype</a></li>
</ol>
<li><a href = "index.html#basic">Scripting (Basics)</a></li>
<ol class = "first">
<li><a href = "index.html#ssl">Scripting language</a></li>
<li><a href = "index.html#script">Script</a></li>
<li><a href = "index.html#header">Header File</a></li>
<li><a href = "index.html#define">Define</a></li>
<li><a href = "index.html#procedure">Procedure</a></li>
<li><a href = "index.html#function">Function</a></li>
<li><a href = "index.html#argument">Argument</a></li>
<li><a href = "index.html#variable">Variable</a></li>
<li><a href = "index.html#constant">Constant</a></li>
<li><a href = "index.html#macro">Macro</a></li>
<li><a href = "index.html#operator">Operator</a></li>
<li><a href = "index.html#statement">Statement</a></li>
<li><a href = "index.html#semicolon">Semicolon</a></li>
</ol>
<li><a href = "index.html#advanced">Scripting (Advanced)</a></li>
<ol class = "first">
<li><a href = "index.html#compiling">Compiling</a></li>
<ol>
<li><a href = "index.html#Scripts.h">SCRIPTS.H</a></li>
</ol>
<li><a href = "index.html#TestScript">Test your script</a></li>
<ol>
<li><a href = "index.html#Scripts.lst">SCRIPTS.LST</a></li>
</ol>
<li><a href = "index.html#AssignScript">Assign script to object</a></li>
<li><a href = "index.html#dialog">Dialog</a></li>
<li><a href = "index.html#pipboy">Add quest to pipboy</a></li>
<li><a href = "index.html#MakeTrader">Make trader</a></li>
<ol>
<li><a href = "index.html#StoreRestock">Store restock</a></li>
</ol>
</ol>
<li><a href = "index.html#complex">Scripting (Complex)</a></li>
<ol class = "first">
</ol>
<li><a href = "index.html#sFall">Scripting (SFall) (Optional)</a></li>
<ol class = "first">
</ol>
<li><a href = "index.html#art">Art (Optional)</a></li>
<ol class = "first">
<li><a href = "index.html#talkhead">Talking Heads</a></li>
<!--<li><a href = "index.html#tiles">Make new tiles</a></li>
<li><a href = "index.html#walls">Make new walls</a></li>
<li><a href = "index.html#fot">FOT Critters In FO2</a></li>-->
</ol>
<li><a href = "index.html#addendum">Addendum</a></li>
<li><a href = "index.html#source">Sources</a></li>
</ol>
</div>
<div class = "item-main">
<header>
<h1>Fallout 2 Modding Guide</h1>
<br>
<p>Written by Femic et al.</p>
<img src = "images\Header\Please_stand_by_Fallout.jpg" alt = "Please stand by">
<p><em>Shot a child in the face after he pickpocketed me. Turned the whole town hostile. Ran away to New Reno. Became a Pornstar.
<br>
Fallout 2 in a nutshell.
<br>
11/10</em></p>--Rat Prik (Steam review)
</header>
<br>
<hr>
<hr>
Привет Рене. Спасибо за прием. Я сделал, как ты сказал. Переместил <div class = "grid-container">
внутрь <body>
и получил репрекс исходного кода.
TLDR: я собрал codepen, чтобы предоставить вам демоверсию, на основе которой вы можете строить. Я сделал несколько альтернативных решений. Тот, который использует position: fixed
, и тот, который использует значение grid-template-columns
вашего контейнера сетки.
Другие материалы, которые, вероятно, стоит прочитать:
Сделать так, чтобы панель навигации исчезала, когда окно становится меньше
Это можно сделать с помощью медиазапросов. По сути, вы придадите своему сайту/боковой панели разные стили в зависимости от ширины области просмотра пользователя. Это позволит вам использовать CSS, чтобы скрыть боковую панель на маленьких экранах/узких окнах браузера и показать ее на больших экранах. Конечно, вам, вероятно, понадобится способ показать его, пока он скрыт.
Зафиксируйте панель навигации на оси Y
Использование position: fixed
, как вы сделали, является прекрасным способом достижения вашей цели, однако оно делает .grid-container
ненужным, поскольку position: fixed
удалит элемент из потока документов. Больше информации о позиционировании CSS.
Если вы используете это решение, вам нужно будет добавить немного padding
(вместо этого можно использовать margin
) к основному контенту, чтобы боковая панель не перекрывала его.
Если вы хотите продолжать использовать контейнер сетки, вы можете вместо этого использовать position:sticky
на .item-sidebar
. Это позволит сохранить боковую панель в первом столбце контейнера сетки, как вы изначально планировали, но позволит вам сохранить ее в пределах области просмотра аналогично position: fixed
.
Общее замечание относительно вашего CSS: не используйте % как единицу так часто, как у вас. Постарайтесь выбрать наиболее подходящую единицу для работы. Ширина .item-main
с использованием % в качестве вашей единицы хороша, в меньшей степени для полей в списках. Дело не в том, что % для полей списка неверен, просто есть другие, которые обычно считаются более подходящими (например, rem
). Больше информации о единицах CSS.
Наслаждайтесь созданием остальной части вашего сайта.
Здравствуйте Андрей. Большое спасибо за ваши усилия. Я горю желанием реализовать ваши предложения. До тех пор.
Не беспокойся, @Femic. Предполагая, что вы довольны ответом, не могли бы вы отметить его как принятый. Спасибо и удачи
Привет Femic, добро пожаловать в SO! Сначала начните с помещения
<div class = "grid-container">
внутрь<body>
. И обязательно разместите минимальный воспроизводимый пример, люди не собираются отлаживать вашу онлайн-страницу...