#javascript #html #css
#javascript #HTML #css
Вопрос:
Как следует из вопроса, моя проблема заключается в том, что, когда я изменяю размер окна до небольшого размера и прокручиваю вниз вправо, плавающие элементы моей панели навигации немного сдвигаются вправо и больше не полностью видны в окне.
Я довольно новичок в веб-разработке в целом, поэтому буду признателен за любую помощь.
Это код для моей функции прокрутки:
// When the user scrolls the page, execute myFunction
window.onscroll = myFunction
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
Заранее спасибо.
Ответ №1:
Такое поведение происходит потому position:fixed , что элемент находится вне обычного потока документов, поэтому он не занимает ширину своего контейнера div ( navbar-wrapper ) . Вам нужно явно вычислить эту ширину sticky элемента.
Я использовал width:calc(100% - 60px) !important для этого.
100% Означает 100% ширины ширины окна просмотра в вашем случае. Теперь вычтите 60px все, потому что у вас есть 30px левые и правые поля, определенные для вашего body элемента.
Бит !important (это выглядит как не важно, но это означает, что это важно) требуется, потому что вы добавляете свой sticky класс явно с использованием JS позже, когда все свойства CSS уже будут применены с соответствующей спецификацией. Итак, все, что было применено width изначально, переопределяется вами с помощью !important .
Примечание — Следует избегать использования !important. Если вы отвечаете за создание собственного css и сталкиваетесь с большим использованием !important в своем коде, это указывает на то, что ваш CSS может использовать рефакторинг.
// When the user scrolls the page, execute myFunction
window.onscroll = myFunction
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
} html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: auto;
padding: 0px;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
max-width: 900px;
font-family: "PMN Caecilia", sans-serif;
text-align: justify;
list-style: decimal;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
body {
overflow-y: scroll;
margin: 30px;
line-height: 1.6;
font-size: 120%;
max-width: 800px;
margin-bottom: 100px;
background-color: #FAFAFA;
color: #000000;
}
h1 {
font-size: 220%;
font-family: "PMN Caecilia", sans-serif;
margin-bottom: 30px;
margin-top: 30px;
}
h2 {
font-family: "PMN Caecilia", sans-serif;
font-size: 160%;
}
p {
font-size: 85%;
margin-top: 30px;
margin-bottom: 30px;
}
a {
color: #8000FF;
text-decoration: none;
position: relative;
}
#navbar {
float: left;
height: 80px;
width: 100%;
max-width: 800px;
top: 0px;
overflow: hidden;
background-color: #FAFAFA;
}
#navbar a {
top: 0px;
padding-top: 30px;
padding-bottom: 30px;
}
#navbar a:after {
content: "";
position: absolute;
left: 0%;
right: 100%;
bottom: -5px;
background: #8000FF;
height: 3px;
transition-property: left right;
transition-duration: 0.3s;
transition-timing-function: ease-out;
}
#navbar a:hover:after {
right: 0%;
}
.sticky {
position: fixed;
top: 0;
width: calc(100% - 60px) !important;
}
.header {
width: 100%;
top: 0px;
margin-bottom: 100px;
}
.content {
top: 0px;
width: 100%
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
<title>This will be my personal webiste!</title>
<link href="/Users/max/Desktop/Site/set.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/Users/max/Desktop/Site/navbar.js" async></script>
</head>
<body>
<div class="navbar-wrapper" style="height: 80px">
<div id="navbar">
<a style="float: left" href="/Users/max/Desktop/Site/index.html">Hello World!</a>
<a style="float: right; padding-left: 3%;" href="/Users/max/Desktop/Site/Writing.html">Writing</a>
<a style="float: right; padding-left: 3%;" href="/Users/max/Desktop/Site/Projects.html">Projects</a>
<a style="float: right; padding-left: 3%;" href="/Users/max/Desktop/Site/About.html">About</a>
</div>
</div>
<div class="header">
<h1>Hello, World!</h1>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit quam magna, vitae viverra magna accumsan quis. Quisque venenatis nisl eu erat viverra posuere. Cras sed risus ut tortor porttitor luctus et ac velit. Nunc aliquam commodo mauris nec luctus. Phasellus commodo rutrum diam id placerat. In pretium nec metus quis vehicula. Pellentesque euismod, purus id tempor imperdiet, justo turpis vestibulum dui, non tristique tortor est a urna. Suspendisse lobortis faucibus nisl in faucibus. Vestibulum id lacus justo. Vestibulum justo lectus, euismod sit amet tellus sed, hendrerit pellentesque tellus. Nulla semper et tellus eu gravida. Duis non leo sit amet augue sagittis convallis non id ipsum. Sed nec nisi sit amet augue facilisis ullamcorper et in sem. Suspendisse ut purus nec ligula varius dictum.
Etiam porta nunc eu urna luctus porta. In tellus felis, bibendum vel eleifend vitae, gravida suscipit metus. Nunc sed eleifend risus. In at fermentum enim. Pellentesque malesuada libero ut tortor varius, ut porttitor risus bibendum. Ut hendrerit semper sapien, feugiat tempus velit hendrerit in. Aliquam consequat tempor urna, et varius sapien luctus eu. In nulla orci, mollis et fermentum ac, malesuada et nisi. Proin sed felis at metus ornare accumsan at sit amet arcu. Vestibulum enim augue, feugiat vel ligula in, aliquet condimentum mi. Curabitur ullamcorper dui ante, sit amet vehicula neque hendrerit id. Phasellus malesuada non nisi sed convallis. Mauris in ligula vel felis bibendum viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin malesuada pellentesque imperdiet. Nam pretium odio in tellus pulvinar malesuada.
</p>
</div>
</body> Комментарии:
1. Это, действительно, устраняет мою проблему. Спасибо! Поскольку я сейчас просто собираю строительные блоки, которые я не до конца понимаю, я прошу вас объяснить ваше решение более подробно? Заранее спасибо.
2. @Mxngls Я немного подробнее остановился на двух ссылках в этом посте. Вы можете ссылаться на них больше для гораздо большей глубины.