Możesz też spróbować zastosować: position: sticky;
przykład
<!DOCTYPE html>
<html lang="PL-pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Zostań strażakiem ochotnikiem. Zostań jednym z nas. Ochotnicza Straż Pożarna w Łasinie ogłasza nabór czynnych strażaków-ratowników. Zapraszamy do kontaktu w Naszej remizie lub tel. +48 56 466 47 77">
<meta name="keywords" content="Straż pożarna, Ochotnicza, Łasin, OSP KSRG Lasin">
<meta name="author" content="Kristofer998">
<title>Oficjalna Strona Ochotniczej Straży Pożarnej w Łasine</title>
<script src="jquery-3.3.1.min.js"></script>
<script src="jquery.tabSlideOut.js"></script>
<style>
html, body
{
margin: 0;
padding: 0;
}
body
{
background-color: #404040;
font-family: 'Lato', sans-serif;
}
#container
{
width: 1000px;
margin: 0 auto;
}
.header {
position: sticky;
top: 0;
left: 0;
background-color: #404040;
}
#logo3{
background-image: url(img/logo3.png);
width: 863px;
height: 156px;
}
#menu
{
margin-top: 20px;
color: #ffffff;
padding: 10px;
}
#topbar
{
background-image: url(img/logo.jpg);
padding: 10px;
margin-top: 20px;
margin-bottom: 25px;
height: 170px;
}
.topbar:hover img
{
transform: scale(0.9);
}
#topbarL
{
background-image: url(img/zos.png);
float: left;
height: 120px;
width: 120px;
margin-top: 30px;
margin-bottom: 30px;
margin-left: 30px;
}
#sidebar
{
float: left;
width: 148px;
min-height: 700px;
padding: 20px;
background-color: lightgray;
text-align: center;
font-size: 18px;
border-right: 2px dotted #780000;
}
#content
{
float: left;
padding: 40px;
width: 730px;
min-height: 660px;
background-color: #dedede;
text-align: justify;
}
#footer
{
clear: both;
color: white;
text-align: center;
padding: 20px;
font-size: 20px;
}
.option
{
float: left;
min-width: 50px;
height: 25px;
font-size: 18px;
padding: 10px;
border-right: 3px dotted #780000;
opacity: 0.8;
}
.option:hover
{
background-color: #780000;
cursor: pointer;
}
.optionL
{
font-size: 20px;
height: 25px;
padding: 10px;
border-bottom: 3px dotted #780000;
text-decoration: none;
}
.optionL:hover
{
background-color: #780000;
color: white;
cursor: pointer;
}
.bigtitle
{
font-size: 32px;
font-weight: 900;
letter-spacing: 2px;
}
.handle
{
font-size: 30px;
}
#logo2
{
text-align: center;
padding: 5px;
color: #780000;
font-size: 40px;
letter-spacing: 3px;
font-weight: bold;
border-bottom: 3px dotted #780000;
}
#opis
{
width: 700px;
padding: 6px;
}
#sprzet
{
float: left;
height: 120px;
width: 120px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
border: outset 5px #780000;
}
a:link
{
text-decoration: none;
color: black;
}
a.tilelink
{
color: #ffffff;
text-decoration: none;
}
a.tilelink2
{
color: #000000;
text-decoration: none;
}
.option:hover
{
background-color: #780000;
cursor: pointer;
}
#zdjecia
{
text-align: center;
float: left;
height: 150px;
width: 150px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
border: outset 5px #C80000;
}
</style>
</head>
<body>
<div id="container">
<div class="header">
<div id="logo3"></div>
<div id="menu">
<a href="index.html" class="tilelink">
<div class="option">Strona główna</div>
</a>
<a href="kontakt.html" class="tilelink">
<div class="option">Kontakt </div>
</a>
<a href="akcje.html" class="tilelink">
<div class="option">Nasze Akcje</div>
</a>
<a href="jednostka.html" class="tilelink">
<div class="option">Z życia Jednostki</div>
</a>
<a href="status.html" class="tilelink">
<div class="option">Status naszej Jednostki</div>
</a>
<a href="strazacy.html" class="tilelink">
<div class="option">Strażacy z naszej Jednmostki</div>
</a>
<div style="clear:both;"></div>
</div>
<div id="topbar">
<div id="topbarL"></div>
<div style="clear:both;"></div>
</div>
</div>
<div id="sidebar">
<a href="historia.html" class="tilelink2">
<div class="optionL">Historia</div>
</a>
<a href="sprzet.html" class="tilelink2">
<div class="optionL">Nasz Sprzęt</div>
</a>
<a href="lukas.html" class="tilelink2">
<div class="optionL">Lukas</div>
</a>
<a href="oparzenia.html" class="tilelink2">
<div class="optionL">Baza Wiedzy</div>
</a>
</div>
<div id="content">
<h3>
Strona główna
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia mollis odio eu bibendum. Praesent non hendrerit risus. Nulla id semper sem. Mauris risus mauris, ultrices sed ullamcorper sed, vulputate vel nisi. Aliquam augue ante, mattis in pulvinar vitae, ultrices nec leo. Nulla ultricies augue enim, sit amet semper tellus vulputate sit amet. Maecenas tincidunt, ex eu viverra scelerisque, quam lectus auctor nunc, at pretium nibh lacus in ligula. Cras condimentum felis ac aliquet tristique. Sed elementum eu nulla vel rutrum. Cras feugiat nulla non congue malesuada.
</p>
<p>
Nam ullamcorper turpis non tristique sollicitudin. Etiam id magna lacus. Pellentesque vestibulum ex eget quam consectetur, sit amet luctus erat feugiat. Sed gravida tellus tempus consequat rhoncus. Phasellus lobortis magna et risus pharetra, facilisis blandit sapien tristique. Vivamus aliquam interdum arcu, eget facilisis ante gravida ut. Proin nec nisl ut lacus finibus sagittis id non nibh. Donec volutpat pretium libero. Sed fermentum vel ante vitae mattis. Curabitur porttitor turpis at scelerisque auctor. Sed vitae iaculis risus, ut iaculis nibh.
</p>
<p>
Nam ullamcorper turpis non tristique sollicitudin. Etiam id magna lacus. Pellentesque vestibulum ex eget quam consectetur, sit amet luctus erat feugiat. Sed gravida tellus tempus consequat rhoncus. Phasellus lobortis magna et risus pharetra, facilisis blandit sapien tristique. Vivamus aliquam interdum arcu, eget facilisis ante gravida ut. Donec volutpat pretium libero. Curabitur porttitor turpis at scelerisque auctor. Sed vitae iaculis risus, ut iaculis nibh.
</p>
<p>
Nam ullamcorper turpis non tristique sollicitudin. Etiam id magna lacus. Pellentesque vestibulum ex eget quam consectetur, sit amet luctus erat feugiat. Sed gravida tellus tempus consequat rhoncus. Phasellus lobortis magna et risus pharetra, facilisis blandit sapien tristique. Vivamus aliquam interdum arcu, eget facilisis ante gravida ut. Proin nec nisl ut lacus finibus sagittis id non nibh. Donec volutpat pretium libero. Sed fermentum vel ante vitae mattis. Curabitur porttitor turpis at scelerisque auctor. Sed vitae iaculis risus, ut iaculis nibh.
</p>
<p>
Nam ullamcorper turpis non tristique sollicitudin. Etiam id magna lacus. Pellentesque vestibulum ex eget quam consectetur, sit amet luctus erat feugiat. Sed gravida tellus tempus consequat rhoncus. Vivamus aliquam interdum arcu, eget facilisis ante gravida ut. Proin nec nisl ut lacus finibus sagittis id non nibh. Donec volutpat pretium libero. Sed fermentum vel ante vitae mattis. Curabitur porttitor turpis at scelerisque auctor. Sed vitae iaculis risus, ut iaculis nibh.
</p>
</div>
<div id="footer">
Oficjalna Strona Ochotniczej Straży Pożarnej w Łasine 2022r. © Wszelkie prawa zastrzeżone
</div>
</div>
<div id="my-tab">
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fosplasin998&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</div>
<script>
$('#my-tab').tabSlideOut({
tabLocation: 'right',
action: 'click',
offset: '100px'
});
</script>
</body>
</html>
P.S. Styling Scrollbars [ 1 ] [ 2 ]
Ochotnicza Straż Pożarna w Łasinie