Ich habe Position: sticky zu einem Artikel Header-Element, aber es funktioniert nicht.Ich kann nicht Position klebrig auf einem Header
header {
width: 25%;
float: left;
top: 0;
position: sticky;
}
Die codepen sind hier http://codepen.io/cssgrid/pen/7a86f94c7d581f913c43a0c7b512ddb0?editors=1100
Es ist, weil der Floats in .thousand nicht gelöscht, .thousand ‚s Höhe ist 0 (abgesehen von ihm-Marge). Also header hat nichts zu klebrig zu sein.
Ich habe den Inhalt von .thousandinline-block gemacht, so dass Sie die Schwimmer nicht löschen müssen, und das scheint zu funktionieren.
* {
box-sizing: border-box;
}
.hero_img {
height: 50vh;
width: 100%;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/429997/1920.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.thousand {
max-width: 1000px;
margin: 0 auto;
clear: both;
margin-top: 2.5em;
padding-top: 2.5em;
}
header {
width: 25%;
display: inline-block;
top: 0;
position: sticky;
vertical-align: top;
}
p {
width: 75%;
display: inline-block;
}<div class="hero_img"></div>
<div class="thousand">
<header>
<h2>Some Article Title</h2>
<h3>12th January 2017</h3>
</header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam
aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero,
ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>
<div class="thousand">
<header>
<h2>Some Article Title</h2>
<h3>12th January 2017</h3>
</header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>
<div class="thousand">
<header>
<h2>Some Article Title</h2>
<h3>12th January 2017</h3>
</header><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>Alternativ können Sie die Höhe .thousand geben, indem in der es die float vom p Elemente zu entfernen (das größere Element) und Floating nur header (das kürzere Element)
* {
box-sizing: border-box;
}
.hero_img {
height: 50vh;
width: 100%;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/429997/1920.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.thousand {
max-width: 1000px;
margin: 0 auto;
clear: both;
margin-top: 2.5em;
padding-top: 2.5em;
}
header {
width: 25%;
float: left;
top: 0;
position: sticky;
}
p {
width: 75%;
display: inline-block;
}<div class="hero_img"></div>
<div class="thousand">
<header>
<h2>Some Article Title</h2>
<h3>12th January 2017</h3>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam
aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti. Numquam laboriosam quia, iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero,
ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>
<div class="thousand">
<header>
<h2>Some Article Title</h2>
<h3>12th January 2017</h3>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>
<div class="thousand">
<header>
<h2>Some Article Title</h2>
<h3>12th January 2017</h3>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel molestiae sapiente labore explicabo earum, eos provident sunt nihil id voluptates, ab eum animi reiciendis accusantium laudantium sit magni nulla corporis nesciunt. Numquam laboriosam quia,
iure quae ullam, delectus nobis odit id quibusdam aliquam repellat excepturi hic illo amet asperiores magni libero, ducimus nesciunt suscipit quos deleniti! Quo, aspernatur. Natus, animi?</p>
</div>