Position: sticky: nie działa

Question

Witam. Mam pewien problem. Mianowicie position: sticky nie działa. Za wszelkie rady dziękuje.

body 
{
	margin: 0;
	background-color: #2F3336;
	color: #efefef;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
}
h1.logo
{
	font-size: 44px;
	font-weight: 700;
	color: #ddd;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 5px;
	margin-top: 50px;
	margin-bottom: 40px;
	
}
.nav 
{
	width: 100%; 
	background-color: #673c9b; 
	text-align: center; 
	padding: 10px 0;
	border-top: 1px solid #451a79;
	border-bottom: 1px solid #451a79;
	margin-bottom: 50px; 
	position: sticky;
	position: -webkit-sticky;
	top: 0; 
	
	
	
}

ul
{
	padding: 0; 
	margin: 0; 
	list-style-type: none; 
	font-size: 18px; 
	height: 35px; 
	line-height: 200%; 
	display: inline-block; 
	 
}
ul a 
{
	 color: #ffffff; 
	 text-decoration: none;
	 display: block;
}
ul > li 
{
	 float: left; 
	 width: 150px; 
	 height: 40px; 
	 border-right: 3px dashed #451a79;
	 
}
ul > li:first-child
{
	border-left: 3px dashed #451a79;
}

ul > li:hover > a 
{
	color: #321e49; 
}
#content
{
	width: 1000px; 
	background-color: #454a4f; 
	color: #ffffff; 
	margin-right: auto;
	margin-left: auto;
	font-size: 20px; 
	margin-top: 30px;
    
}

 <header>
			           <h1 class="logo">Kosmiczne Bobry Wiki</h1>
			           <nav class="nav">
                              <ul class="menu"> 
							        <li><a href="#" >Start</a></li>
							        <li><a href="#" >Książki</a></li>
							        <li><a href="#" >Forum</a></li>
							        <li><a href="#" >Wspomóż Nas</a></li>
							        <li><a href="#" >Kontakt</a></li>
							        <li><a href="#" >Informacje</a></li>
							  </ul>
							  
							  
			</header> 

 

Comments

Może jest to spowodowane brakiem wsparcia dla testowej przeglądarki? Nie sprawdziłem kodu.

---

Wydaję mi się, że to nie możliwe, szczególnie w przypadku, w którym używa się tego od dawien dawna, a sprawdzałem to na wszystkich możliwych (czyli jakich mam) przeglądarkach. Do tego wszystkie zaktualizowane.

Answer 1

Ten kod nie pokazuje problemu ponieważ nie ma kontenera zawierającego nawigację.

position: sticky;

działa w elemencie, który zawiera obiekt z tą właściwością.

W twoim przykładzie dodaj 

header{
	height: 200vh;
}

żeby zobaczyć działanie sticky

Comments

Rzeczywiście działa. Jednakże nie załatwia to do końca problemu, ponieważ header jest strasznie daleko od reszty. Rozumiem, że height: 240hv to taki podgląd, tak? Teraz tylko co zrobić, aby reszta zawartości nie była na drugim końcu świata. Przepraszam Cię jeżeli jestem jakiś nierozgarnięty, czy coś, ale jestem dosyć nowy w temacie programowania stron. I tak w tej chwili mi w jakimś stopniu pomogłeś :)

---

Tak to przykład, że działa. Tak jak napisałem sticky musi być zawarta w kontenerze do którego będzie się odnosić. Musisz dodać jakiś kontener, w którym bedzie nawigacja i reszta strony.

---

<div class="container-site">
	<div class="baner">baner</div>
	<div class="container-sticky">
		<main>
		  <nav class="nav">nawigacja</nav>
			<header>
				<h1>nagłowek</h1>
		  </header>
						<p>
				Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo fugit quos dicta animi deserunt quibusdam vero sint ipsam. Consequatur ab placeat voluptatem repudiandae explicabo qui veniam iste aliquid laudantium doloremque.
				Nobis nemo eius voluptatem ullam porro, amet doloribus itaque alias eos explicabo nam exercitationem laboriosam ratione quidem ut, cupiditate esse suscipit sint doloremque? Molestiae, rem ducimus? Vel nobis expedita placeat.
				Laudantium porro modi voluptatem quas ullam blanditiis asperiores dolore accusamus voluptates a et, perspiciatis inventore numquam nihil veniam labore error impedit nulla sint expedita voluptatibus? Ducimus labore repellendus dolor quis?
				Molestiae non veritatis culpa sunt soluta, deleniti, maxime eligendi, debitis dicta exercitationem repellendus voluptates incidunt blanditiis. Dolore officia corrupti molestiae. Eos deserunt eum neque excepturi reprehenderit, dolores nesciunt quisquam facilis.
				Sequi, voluptates non neque enim voluptatem earum nam cumque cum tempora ratione doloribus perspiciatis, ullam ad obcaecati? Soluta inventore ipsum, quos doloribus magnam autem, voluptates quia recusandae vel corrupti iure.
				Iusto eum maiores veritatis dolor debitis facere incidunt perspiciatis nobis, accusantium distinctio velit, adipisci magni necessitatibus sequi quaerat id voluptas saepe aspernatur fugiat illo. Corporis quo expedita ipsam consectetur ratione?
				Fuga est incidunt excepturi libero saepe sunt. Eveniet officiis unde impedit repellat deleniti fugit reiciendis praesentium neque delectus itaque ratione, eos vero porro eligendi ad, provident ullam aliquid sequi sit!
				Eveniet provident fugiat explicabo incidunt numquam in optio laudantium quas totam earum consequuntur ad cupiditate ratione saepe mollitia officiis, voluptatum, accusamus sunt odio quae. Beatae molestias quisquam fugit voluptas dignissimos!
				Non veritatis debitis mollitia voluptatibus exercitationem iste, laudantium explicabo animi et aut hic reprehenderit. Voluptatibus nisi, atque dolorum, corporis mollitia explicabo ad cum similique consequatur labore, quae sunt beatae repellat?
				Cupiditate quis libero dolorem nesciunt. Quam commodi vel nesciunt recusandae odit maiores consequuntur. Earum architecto velit temporibus aliquam accusantium, perferendis quo maiores enim. Rerum distinctio molestias dolores architecto aperiam ipsa.
				Eum non laudantium quisquam error ex veritatis dolore nemo, aliquid debitis dolorum expedita, excepturi possimus blanditiis, unde nesciunt? Ratione quasi aut recusandae tempore hic dolorem mollitia adipisci consequuntur, non ad.
				Ut eos atque maiores hic tempore, fugiat magni similique nihil voluptate nam vitae, ipsum aspernatur tenetur a. Laborum eos, quibusdam nostrum minus alias architecto exercitationem corrupti dolor adipisci harum ad.
				Alias vel iure exercitationem nemo error deleniti iusto, expedita possimus architecto cupiditate ipsam corporis delectus vero aut ad ab eum cum sequi aspernatur magnam doloribus reiciendis? Vitae, dolorem quaerat? Voluptates.
				A doloribus dicta, praesentium ullam, reprehenderit rem autem tenetur magnam iste fugiat maiores harum? Quibusdam, itaque quo temporibus corrupti ducimus alias nostrum quidem, laborum magnam, eius facere in voluptatibus ullam!
				Esse enim vel neque nobis suscipit reiciendis repellat quibusdam cumque eligendi dolore molestiae veniam atque perspiciatis nam architecto, illum necessitatibus beatae quia ut placeat magnam. Blanditiis, placeat. Earum, veniam asperiores?
				Officia, provident! Quasi, nesciunt dolores eum ratione laboriosam assumenda incidunt iusto a officia ipsam corrupti ducimus distinctio! Vel recusandae animi cupiditate ipsam sapiente. Exercitationem animi delectus laborum, molestias inventore dolor?
				Doloribus harum repudiandae rerum enim totam, eum, ipsum quia aliquid pariatur provident veritatis, impedit dicta quisquam consectetur dolor? Labore tempore suscipit qui nam necessitatibus consectetur commodi praesentium pariatur perspiciatis possimus.
				Eos repellat explicabo tempora, adipisci sunt possimus vel fuga quae soluta veniam tenetur dicta at architecto rerum magni perferendis suscipit doloribus pariatur accusantium optio facere! Ex quo in repellendus porro.
				Dolorum minima ducimus quaerat at molestias quis nobis voluptatum ut distinctio harum illo iure atque excepturi provident eveniet labore omnis nostrum saepe ratione voluptate, in veritatis totam nihil. Officiis, quis!
				Alias placeat a non nostrum perferendis. Dignissimos odio aspernatur incidunt nihil fugit nemo quos suscipit mollitia. Amet reiciendis architecto illum, reprehenderit harum perspiciatis dolore! Impedit eos neque adipisci eveniet amet?
			</p>
		</main>
	</div>
	<footer></footer>
</div>

.baner{
	width: 100%;
	height: 100px;
	background-color: red;
}
.nav{
	width: 100%;
	height: 70px;
	background-color: green;
	position: sticky;
	top:0;
}

 

---

Rzeczywiście teraz działa. Dziękuje bardzo ;)