Related
I want to trigger a circle fadeIn animation based on the user scroll position.
With every scroll down, the circle gets bigger.
With every scroll up, the circle gets smaller.
The animation would stop if the user is not scrolling anymore - so the user has to scroll a few times for the animation to be complete. If the scrolling stops, the circle would remain at a certain width (depending on how much he scrolled up/down).
I only have it running with basic CSS and HTML at the moment. I am missing JS the scroll function that would trigger the circle getting bigger/smaller depending on how much the user scrolls in the background.
.section {
animation: 3s fadeInAnimation reverse;
animation-delay:0s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
background: yellow;
height: 100vh;
}
#keyframes fadeInAnimation {
0% {
clip-path: circle(75%);
}
100% {
clip-path: circle(0%);
}
}
<div class="section">
<h1>
Section Title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
</div>
Fiddle Here
This is a perfect scenario for using a CSS Custom Property and updating its value via JavaScript whenever the window is scrolled.
If we initially set the following custom property:
:root { --clip-circle: 0% }
We can then update the value of that custom property at any time by:
re-calculating clipCircleValue
document.documentElement.style.setProperty('--clip-circle', clipCircleValue);
Working Example (click Full Page) :
const updateClipCircleValue = () => {
let documentScrollHeight = document.documentElement.scrollHeight;
let documentScrollPosition = window.scrollY;
let documentScrollPercentage = ((documentScrollPosition / documentScrollHeight) * 100);
let clipCircleValue = documentScrollPercentage + '%';
document.documentElement.style.setProperty('--clip-circle', clipCircleValue);
}
window.addEventListener('scroll', updateClipCircleValue);
:root {
--clip-circle: 0%;
}
body {
min-height: 400vh;
}
.section {
position: fixed;
top: 0;
left: 0;
background-color: rgb(255, 255, 0);
clip-path: circle(var(--clip-circle));
}
<div class="section">
<h1>
Section Title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus.
</p>
</div>
I am fond of lists. Very fond of lists. Sometimes I have lists with short items like this:
List A
one
two
three
But sometimes I have lists with long blocks of text in them. Like this:
List B
mauris ultrices eros in cursus turpis massa tincidunt dui ut ornare lectus sit amet est placerat in egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam ut porttitor leo a diam sollicitudin tempor id eu nisl nunc mi ipsum
massa tempor nec feugiat nisl pretium fusce id velit ut tortor pretium viverra suspendisse potenti nullam ac tortor vitae purus
aliquet nibh praesent tristique magna sit amet purus gravida quis blandit turpis cursus in hac habitasse platea dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc congue nisi vitae suscipit tellus mauris a diam maecenas sed enim ut sem viverra aliquet eget sit amet
consequat id porta nibh venenatis cras sed felis eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt vitae semper quis lectus nulla
For List A, I'd like to keep the items close, like that of a checklist/to-do. However, for List B, I want to add a margin-bottom to the list items. Is this possible with only CSS? Let's say I want to target list-items that exceed 20 words or so, what selector do I use?
There is no such selector but here is an idea to approximate what you want. The trick is to have an invisible element that will create the needed space only when there is a lot of content. Otherwise it will stay at the same line with the content.
ul li div {
display:inline-block;
vertical-align:top;
}
ul li:after {
content:"";
display:inline-block;
width:calc(100% - 200px); /* update the 200px like you want*/
height:20px; /* your margin */
background:rgba(255,0,0,.2); /* to illustrate*/
}
<ul>
<li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus viverra dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</div></li>
<li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus viverra dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</div></li>
<li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus viverra dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</div></li>
</ul>
<ul>
<li><div>Lorem ipsum dolor sit amet</div></li>
<li><div>Lorem</div></li>
<li><div>Lorem ipsum</div></li>
</ul>
Use a small width to active the space when there is more than a line:
ul li div {
display:inline-block;
vertical-align:top;
}
ul li:after {
content:"";
display:inline-block;
width:2px;
height:20px; /* your margin */
background:rgba(255,0,0,.2); /* to illustrate*/
}
<ul>
<li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus viverra dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</div></li>
<li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus viverra dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</div></li>
<li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus viverra dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</div></li>
</ul>
<ul>
<li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus viverra dapibus. Pellentesque</div></li>
<li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus viverra</div></li>
<li><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque temp</div></li>
</ul>
<ul>
<li><div>Lorem ipsum dolor sit amet</div></li>
<li><div>Lorem</div></li>
<li><div>Lorem ipsum</div></li>
</ul>
I'm using position: sticky to create sticky headers, which works fine for Chrome, Firefox, etc. On Safari, when I start scrolling it works just fine, but after scrolling down further the headers start to dissapear. It seems it has something to do with the height of the content / the height of the headers. When there is less content it works fine for Safari as well.
Can someone explain to me what is happening in Safari and how this can be fixed?
.wrapper {
max-height: 500px;
background-color: rgb(230, 230, 230);
padding: 10px;
display: flex;
}
.container {
flex: 1;
min-height: 0;
overflow: auto;
position: relative;
}
.sticky-header {
background-color: rgb(130, 130, 0);
position: sticky;
top: 0;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
border: 2px solid rgb(0, 0, 0);
}
.sub-header {
top: 50px;
}
.content {
background-color: rgb(0, 255, 0);
}
<div class="wrapper">
<div class="container">
<div class="sticky-header">
HEADER
</div>
<div class="sticky-header sub-header">
SUBHEADER
</div>
<div class="body">
<div class="content">
<div>This is the first line</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius, ex sed mollis placerat, nunc neque semper nibh, eget imperdiet massa libero ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Sed sit amet odio feugiat, iaculis odio a, malesuada neque. Sed non nisi auctor, malesuada tortor vel, ultricies nisi. Aenean vehicula lorem neque, non finibus diam congue ac. Pellentesque euismod erat ex, vitae tempor nunc congue vel. Etiam
viverra sapien sed massa viverra, ac tincidunt odio condimentum. Nullam nibh nisi, tincidunt vitae volutpat vitae, eleifend non ligula. Nullam in nibh elementum, consequat metus at, volutpat libero. Suspendisse rhoncus eu libero in porttitor.
Nulla vel nibh vel purus viverra posuere eu placerat eros. Integer luctus mollis sem, at commodo magna laoreet eget. Nam cursus augue quis fringilla lobortis. Quisque tincidunt metus ut tellus feugiat tincidunt. Maecenas convallis metus a lectus
maximus, ut egestas velit eleifend. Cras eros lectus, molestie vel aliquam eu, suscipit eget lacus. Ut sapien augue, placerat nec sollicitudin vel, congue nec urna. Nam dignissim dapibus lacus, a efficitur turpis pulvinar in. Phasellus condimentum,
turpis nec molestie venenatis, leo lorem auctor sem, nec interdum lectus elit a dui. Sed varius, velit ac placerat auctor, velit ligula convallis lacus, eget pellentesque tellus libero in turpis. Donec tristique orci mi, et tristique lacus finibus
eget. Duis ultricies, arcu eget pretium accumsan, sem dui ultrices turpis, vel semper metus est et lorem. Nullam sollicitudin ultrices elementum. Donec non porta velit. Cras et mattis ligula. Quisque risus nunc, vehicula consectetur mi nec,
euismod fringilla ipsum. Aliquam ut nibh viverra, dignissim magna vel, aliquam arcu. Sed posuere, eros eu interdum gravida, arcu mi porttitor dolor, et ultricies enim lacus in metus. Aliquam erat volutpat. Morbi imperdiet ullamcorper enim eget
placerat. Nam at semper arcu, eu commodo orci. Nulla tincidunt pharetra ligula varius tincidunt. Praesent feugiat, quam facilisis ornare lacinia, tellus magna laoreet est, nec imperdiet dolor metus vitae justo. Etiam a nisl erat. Donec consectetur,
tellus vel varius volutpat, nibh justo dictum neque, a mattis nulla elit a quam. Aliquam sed erat eget ante elementum congue. In pharetra, justo blandit posuere gravida, ipsum enim iaculis arcu, in elementum diam felis a dui. Phasellus sollicitudin
pellentesque elit sed tincidunt. Quisque sit amet enim tortor. Integer porta ipsum eu tristique bibendum. Mauris finibus urna consectetur semper viverra. Suspendisse venenatis bibendum lectus at scelerisque. Duis semper id quam id tempor. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque quam nunc, ac venenatis tortor aliquam ac. Nullam venenatis, nisl vitae imperdiet mollis, felis ante pretium augue, vitae semper justo tortor at augue. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Duis ac velit sit amet lectus ultricies luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed maximus nisl. Suspendisse porttitor neque at finibus suscipit.
Praesent commodo erat pulvinar sollicitudin egestas. In suscipit, elit quis mattis aliquam, arcu libero laoreet sapien, in pellentesque odio metus in dolor. Ut congue mollis odio, non venenatis purus rhoncus ut. Sed mi leo, dictum ut quam ut,
varius egestas nibh. Nam vel lorem neque. Nunc id hendrerit nisi. Vivamus finibus purus dui, eu molestie ex tincidunt eu. Proin vulputate dui ut justo elementum, in semper diam aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla varius, ex sed mollis placerat, nunc neque semper nibh, eget imperdiet massa libero ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet odio feugiat, iaculis odio a, malesuada
neque. Sed non nisi auctor, malesuada tortor vel, ultricies nisi. Aenean vehicula lorem neque, non finibus diam congue ac. Pellentesque euismod erat ex, vitae tempor nunc congue vel. Etiam viverra sapien sed massa viverra, ac tincidunt odio
condimentum. Nullam nibh nisi, tincidunt vitae volutpat vitae, eleifend non ligula. Nullam in nibh elementum, consequat metus at, volutpat libero. Suspendisse rhoncus eu libero in porttitor. Nulla vel nibh vel purus viverra posuere eu placerat
eros. Integer luctus mollis sem, at commodo magna laoreet eget. Nam cursus augue quis fringilla lobortis. Quisque tincidunt metus ut tellus feugiat tincidunt. Maecenas convallis metus a lectus maximus, ut egestas velit eleifend. Cras eros lectus,
molestie vel aliquam eu, suscipit eget lacus. Ut sapien augue, placerat nec sollicitudin vel, congue nec urna. Nam dignissim dapibus lacus, a efficitur turpis pulvinar in. Phasellus condimentum, turpis nec molestie venenatis, leo lorem auctor
sem, nec interdum lectus elit a dui. Sed varius, velit ac placerat auctor, velit ligula convallis lacus, eget pellentesque tellus libero in turpis. Donec tristique orci mi, et tristique lacus finibus eget. Duis ultricies, arcu eget pretium accumsan,
sem dui ultrices turpis, vel semper metus est et lorem. Nullam sollicitudin ultrices elementum. Donec non porta velit. Cras et mattis ligula. Quisque risus nunc, vehicula consectetur mi nec, euismod fringilla ipsum. Aliquam ut nibh viverra,
dignissim magna vel, aliquam arcu. Sed posuere, eros eu interdum gravida, arcu mi porttitor dolor, et ultricies enim lacus in metus. Aliquam erat volutpat. Morbi imperdiet ullamcorper enim eget placerat. Nam at semper arcu, eu commodo orci.
Nulla tincidunt pharetra ligula varius tincidunt. Praesent feugiat, quam facilisis ornare lacinia, tellus magna laoreet est, nec imperdiet dolor metus vitae justo. Etiam a nisl erat. Donec consectetur, tellus vel varius volutpat, nibh justo
dictum neque, a mattis nulla elit a quam. Aliquam sed erat eget ante elementum congue. In pharetra, justo blandit posuere gravida, ipsum enim iaculis arcu, in elementum diam felis a dui. Phasellus sollicitudin pellentesque elit sed tincidunt.
Quisque sit amet enim tortor. Integer porta ipsum eu tristique bibendum. Mauris finibus urna consectetur semper viverra. Suspendisse venenatis bibendum lectus at scelerisque. Duis semper id quam id tempor. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Proin scelerisque quam nunc, ac venenatis tortor aliquam ac. Nullam venenatis, nisl vitae imperdiet mollis, felis ante pretium augue, vitae semper justo tortor at augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Duis ac velit sit amet lectus ultricies luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed maximus nisl. Suspendisse porttitor neque at finibus suscipit. Praesent commodo erat pulvinar
sollicitudin egestas. In suscipit, elit quis mattis aliquam, arcu libero laoreet sapien, in pellentesque odio metus in dolor. Ut congue mollis odio, non venenatis purus rhoncus ut. Sed mi leo, dictum ut quam ut, varius egestas nibh. Nam vel
lorem neque. Nunc id hendrerit nisi. Vivamus finibus purus dui, eu molestie ex tincidunt eu. Proin vulputate dui ut justo elementum, in semper diam aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius, ex sed mollis
placerat, nunc neque semper nibh, eget imperdiet massa libero ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet odio feugiat, iaculis odio a, malesuada neque. Sed non nisi auctor,
malesuada tortor vel, ultricies nisi. Aenean vehicula lorem neque, non finibus diam congue ac. Pellentesque euismod erat ex, vitae tempor nunc congue vel. Etiam viverra sapien sed massa viverra, ac tincidunt odio condimentum. Nullam nibh nisi,
tincidunt vitae volutpat vitae, eleifend non ligula. Nullam in nibh elementum, consequat metus at, volutpat libero. Suspendisse rhoncus eu libero in porttitor. Nulla vel nibh vel purus viverra posuere eu placerat eros. Integer luctus mollis
sem, at commodo magna laoreet eget. Nam cursus augue quis fringilla lobortis. Quisque tincidunt metus ut tellus feugiat tincidunt. Maecenas convallis metus a lectus maximus, ut egestas velit eleifend. Cras eros lectus, molestie vel aliquam eu,
suscipit eget lacus. Ut sapien augue, placerat nec sollicitudin vel, congue nec urna. Nam dignissim dapibus lacus, a efficitur turpis pulvinar in. Phasellus condimentum, turpis nec molestie venenatis, leo lorem auctor sem, nec interdum lectus
elit a dui. Sed varius, velit ac placerat auctor, velit ligula convallis lacus, eget pellentesque tellus libero in turpis. Donec tristique orci mi, et tristique lacus finibus eget. Duis ultricies, arcu eget pretium accumsan, sem dui ultrices
turpis, vel semper metus est et lorem. Nullam sollicitudin ultrices elementum. Donec non porta velit. Cras et mattis ligula. Quisque risus nunc, vehicula consectetur mi nec, euismod fringilla ipsum. Aliquam ut nibh viverra, dignissim magna vel,
aliquam arcu. Sed posuere, eros eu interdum gravida, arcu mi porttitor dolor, et ultricies enim lacus in metus. Aliquam erat volutpat. Morbi imperdiet ullamcorper enim eget placerat. Nam at semper arcu, eu commodo orci. Nulla tincidunt pharetra
ligula varius tincidunt. Praesent feugiat, quam facilisis ornare lacinia, tellus magna laoreet est, nec imperdiet dolor metus vitae justo. Etiam a nisl erat. Donec consectetur, tellus vel varius volutpat, nibh justo dictum neque, a mattis nulla
elit a quam. Aliquam sed erat eget ante elementum congue. In pharetra, justo blandit posuere gravida, ipsum enim iaculis arcu, in elementum diam felis a dui. Phasellus sollicitudin pellentesque elit sed tincidunt. Quisque sit amet enim tortor.
Integer porta ipsum eu tristique bibendum. Mauris finibus urna consectetur semper viverra. Suspendisse venenatis bibendum lectus at scelerisque. Duis semper id quam id tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque
quam nunc, ac venenatis tortor aliquam ac. Nullam venenatis, nisl vitae imperdiet mollis, felis ante pretium augue, vitae semper justo tortor at augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac velit sit amet lectus ultricies
luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sed maximus nisl. Suspendisse porttitor neque at finibus suscipit. Praesent commodo erat pulvinar sollicitudin egestas. In suscipit, elit
quis mattis aliquam, arcu libero laoreet sapien, in pellentesque odio metus in dolor. Ut congue mollis odio, non venenatis purus rhoncus ut. Sed mi leo, dictum ut quam ut, varius egestas nibh. Nam vel lorem neque. Nunc id hendrerit nisi. Vivamus
finibus purus dui, eu molestie ex tincidunt eu. Proin vulputate dui ut justo elementum, in semper diam aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla varius, ex sed mollis placerat, nunc neque semper nibh, eget imperdiet
massa libero ac tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sit amet odio feugiat, iaculis odio a, malesuada neque. Sed non nisi auctor, malesuada tortor vel, ultricies nisi. Aenean
vehicula lorem neque, non finibus diam congue ac. Pellentesque euismod erat ex, vitae tempor nunc congue vel. Etiam viverra sapien sed massa viverra, ac tincidunt odio condimentum. Nullam nibh nisi, tincidunt vitae volutpat vitae, eleifend non
ligula. Nullam in nibh elementum, consequat metus at, volutpat libero. Suspendisse rhoncus eu libero in porttitor. Nulla vel nibh vel purus viverra posuere eu placerat eros. Integer luctus mollis sem, at commodo magna laoreet eget. Nam cursus
augue quis fringilla lobortis. Quisque tincidunt metus ut tellus feugiat tincidunt. Maecenas convallis metus a lectus maximus, ut egestas velit eleifend. Cras eros lectus, molestie vel aliquam eu, suscipit eget lacus. Ut sapien augue, placerat
nec sollicitudin vel, congue nec urna. Nam dignissim dapibus lacus, a efficitur turpis pulvinar in. Phasellus condimentum, turpis nec molestie venenatis, leo lorem auctor sem, nec interdum lectus elit a dui. Sed varius, velit ac placerat auctor,
velit ligula convallis lacus, eget pellentesque tellus libero in turpis. Donec tristique orci mi, et tristique lacus finibus eget. Duis ultricies, arcu eget pretium accumsan, sem dui ultrices turpis, vel semper metus est et lorem. Nullam sollicitudin
ultrices elementum. Donec non porta velit. Cras et mattis ligula. Quisque risus nunc, vehicula consectetur mi nec, euismod fringilla ipsum. Aliquam ut nibh viverra, dignissim magna vel, aliquam arcu. Sed posuere, eros eu interdum gravida, arcu
mi porttitor dolor, et ultricies enim lacus in metus. Aliquam erat volutpat. Morbi imperdiet ullamcorper enim eget placerat. Nam at semper arcu, eu commodo orci. Nulla tincidunt pharetra ligula varius tincidunt. Praesent feugiat, quam facilisis
ornare lacinia, tellus magna laoreet est, nec imperdiet dolor metus vitae justo. Etiam a nisl erat. Donec consectetur, tellus vel varius volutpat, nibh justo dictum neque, a mattis nulla elit a quam. Aliquam sed erat eget ante elementum congue.
In pharetra, justo blandit posuere gravida, ipsum enim iaculis arcu, in elementum diam felis a dui. Phasellus sollicitudin pellentesque elit sed tincidunt. Quisque sit amet enim tortor. Integer porta ipsum eu tristique bibendum. Mauris finibus
urna consectetur semper viverra. Suspendisse venenatis bibendum lectus at scelerisque. Duis semper id quam id tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin scelerisque quam nunc, ac venenatis tortor aliquam ac. Nullam
venenatis, nisl vitae imperdiet mollis, felis ante pretium augue, vitae semper justo tortor at augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac velit sit amet lectus ultricies luctus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Nullam sed maximus nisl. Suspendisse porttitor neque at finibus suscipit. Praesent commodo erat pulvinar sollicitudin egestas. In suscipit, elit quis mattis aliquam, arcu libero laoreet sapien,
in pellentesque odio metus in dolor. Ut congue mollis odio, non venenatis purus rhoncus ut. Sed mi leo, dictum ut quam ut, varius egestas nibh. Nam vel lorem neque. Nunc id hendrerit nisi. Vivamus finibus purus dui, eu molestie ex tincidunt
eu. Proin vulputate dui ut justo elementum, in semper diam aliquam.
</div>
</div>
</div>
</div>
</div>
See also: https://codepen.io/geertp/pen/yLYYZqM
Position sticky is slightly convoluted in how it works. It maintains the "stickiness" until it reaches the end of its parent's scroll. This means the sticky's stickiness is determined by the parent element's(.container) scroll position, in-other words height.
Here is a fixed & working example of your code.
https://codepen.io/krishnasagr/pen/XWmeeqp
The fix is to simply move the sticky element into the .container element so that the position sticky stays sticky until the end of the content's scroll.
Do this:
Move the sticky element into the container like this.
.wrapper {
max-height: 500px;
background-color: rgb(230, 230, 230);
padding: 10px;
display: flex;
}
.container {
flex: 1;
min-height: 0;
overflow: auto;
position: relative;
}
.sticky-header {
background-color: rgb(130, 130, 0);
position: sticky;
top: 0;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
border: 2px solid rgb(0, 0, 0);
}
.sub-header {
top: 50px;
}
.content {
background-color: rgb(0, 255, 0);
}
<div class="content">
<div class="sticky-header">
HEADER
</div>
<div class="sticky-header sub-header">
SUBHEADER
</div>
<div>This is the first line</div>
<div>Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</div>
</div>
position:
fixed it is out of the flow of the rest of the document.
sticky scrolls along like anything else until it reaches the offset that you set. At that point, it acts like it’s fixed.
Perfect example by Kevin Powell https://codepen.io/kevinpowell/pen/eXwdwq
For your case i think what you want is to set the .sticky-header to fixed
and add a padding-top: 100px to the .container
In addition to this, i have noticed that flex: 1 in combination with max-height doesn't work well for sticky, try
.wrapper {
height: 500px;
background-color: rgb(230, 230, 230);
padding: 10px;
}
.container {
height: 100%;
overflow: auto;
position: relative;
}
.sticky-header {
background-color: rgb(130, 130, 0);
background: red;
position: sticky;
top: 0;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
border: 2px solid rgb(0, 0, 0);
width: 100%;
}
.sub-header {
top: 50px;
}
.content {
background-color: rgb(0, 255, 0);
}
first of all make sure that you have the latest version of safari, then you will need to have a prefix for some browsers(you will need that in this particular case) use the -webkit prefix as
position: -webkit-sticky;
position: sticky;
also if that doesnot work you can use stickyfill
https://github.com/wilddeer/stickyfill
Try using the WebKit prefix for your position declaration, like so:
position: -webkit-sticky; // add this.
position: sticky; // keep this.
According to Can I Use, Safari only supports position sticky with a prefix. https://caniuse.com/#search=sticky
I am creating a basic website. I want to use a horizontal separator image between two sections of my webpage. It is not showing up right now. This is the HTML that I have used:
<hr class="separator">
<div class="separator"></div>
This is my CSS:
hr.largeseparator {
border: 0;
height: 20px;
background-image: url("divider2.png");
}
largeseparator {
border: 0;
height: 20px;
background-image: url("divider2.png");
}
The file is in the same folder as my HTML file.
Here is the actual HTML that I am using:
hr.largeseparator {
border: 0;
height: 20px;
background: url("divider2.png");
}
<h2> Lorem ipsum dolor </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur sapien magna, id malesuada neque blandit ut. Suspendisse ut purus sit amet sem varius luctus sagittis a arcu. Ut id massa ut dui ultrices maximus. Nam non pulvinar lectus, ut viverra
dui. Praesent ut turpis at libero consectetur imperdiet in ut metus. Donec condimentum ullamcorper sapien non sagittis. Etiam ut condimentum dolor. Nunc lacus ante, tempor sed posuere finibus, ornare sed augue</p>
</div>
<hr class="largeseparator">
<div id="Text2">
<h2> Lorem ipsum dolor </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur sapien magna, id malesuada neque blandit ut. Suspendisse ut purus sit amet sem varius luctus sagittis a arcu. Ut id massa ut dui ultrices maximus. Nam non pulvinar lectus, ut
viverra dui. Praesent ut turpis at libero consectetur imperdiet in ut metus. Donec condimentum ullamcorper sapien non sagittis. Etiam ut condimentum dolor. Nunc lacus ante, tempor sed posuere finibus, ornare sed augue</p>
there is nothing wrong with your css , but you might need background-size and eventually reset background-repeat
hr.largeseparator {
border: 0;
height: 20px;
background: url("http://www.fblakeside.net/hp_wordpress/wp-content/uploads/2015/04/divider-1024x119.png") center;
background-size: auto 100%
}
hr.no-repeat {
background-repeat: no-repeat
}
<div>
<h2> Lorem ipsum dolor </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur sapien magna, id malesuada neque blandit ut. Suspendisse ut purus sit amet sem varius luctus sagittis a arcu. Ut id massa ut dui ultrices maximus. Nam non pulvinar lectus, ut
viverra dui. Praesent ut turpis at libero consectetur imperdiet in ut metus. Donec condimentum ullamcorper sapien non sagittis. Etiam ut condimentum dolor. Nunc lacus ante, tempor sed posuere finibus, ornare sed augue</p>
</div>
<hr class="largeseparator" />
<div id="Text2">
<h2> No repeat separator </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur sapien magna, id malesuada neque blandit ut. Suspendisse ut purus sit amet sem varius luctus sagittis a arcu. Ut id massa ut dui ultrices maximus. Nam non pulvinar lectus, ut
viverra dui. Praesent ut turpis at libero consectetur imperdiet in ut metus. Donec condimentum ullamcorper sapien non sagittis. Etiam ut condimentum dolor. Nunc lacus ante, tempor sed posuere finibus, ornare sed augue</p>
<hr class="largeseparator no-repeat" />
The path to the image is to be think from the path where stands the CSS file.
Your CSS looks for divider.png in the folder where stands your CSS.
You might also have to mind urlrewriting if your site uses it.
It is working as expected verify the source of your image..
hr.largeseparator {
border: 0;
height: 20px;
background: url("http://placehold.it/350x150");
}
<h2> Lorem ipsum dolor </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur sapien magna, id malesuada neque blandit ut. Suspendisse ut purus sit amet sem varius luctus sagittis a arcu. Ut id massa ut dui ultrices maximus. Nam non pulvinar lectus, ut viverra
dui. Praesent ut turpis at libero consectetur imperdiet in ut metus. Donec condimentum ullamcorper sapien non sagittis. Etiam ut condimentum dolor. Nunc lacus ante, tempor sed posuere finibus, ornare sed augue</p>
</div>
<hr class="largeseparator">
<div id="Text2">
<h2> Lorem ipsum dolor </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi consectetur sapien magna, id malesuada neque blandit ut. Suspendisse ut purus sit amet sem varius luctus sagittis a arcu. Ut id massa ut dui ultrices maximus. Nam non pulvinar lectus, ut
viverra dui. Praesent ut turpis at libero consectetur imperdiet in ut metus. Donec condimentum ullamcorper sapien non sagittis. Etiam ut condimentum dolor. Nunc lacus ante, tempor sed posuere finibus, ornare sed augue</p>
I'm trying to fit a div with position: fixed inside another div and next to another one
<div class="container">
<div class="fixeddiv"></div>
<div class="contentdiv"></div>
</div>
My container div have a width of 1300px and should be in the middle of the paeg (margin auto)
The fixed div should be on the left side inside the container but shouldn't move when scrolling to read the bottom of the content div
I have try around with position: fixed but it always ends up on the left side and not in the middle of the page.
To illustrate what i had like i have make this picture:
Can i have suggestions how i can make this work please. My thougths are going away from position fixed and try to solve it with javascript but i had like to do it without js.
if you want the fixed div to take full height set top:0 bottom:0 and overflow-y:scroll if you want to make it scroll
for the content div just set margin-left little more then the fixed div so that it leaves some space
* {
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
width: 400px;
border: 1px solid red;
}
.fixeddiv {
position: fixed;
top: 0;
bottom: 0;
width: 100px;
background: blue;
overflow-y: scroll;
}
.contentdiv {
margin: 0 0 0 120px;
border:2px solid green;
}
<div class="container">
<div class="fixeddiv">
<h1>fixed div</h1>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
</div>
<div class="contentdiv">
<h1>width auto content</h1>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
</div>
</div>
If I understand you correctly then try something like this.
Applying position: fixed takes the DIV out of the normal flow of the document and the right column will end up stacking below the left (fixed) column. You can float the right column to the right to fix this or you could add an appropriate margin to the left side of the right column.
HTML
<div class="wrapper">
<div class="left">
Left
</div>
<div class="right">
Right
</div>
</div>
CSS
.wrapper {
width: 500px;
margin: 0 auto;
}
.left,
.right {
color: white;
}
.left {
background-color: blue;
min-height: 250px;
position: fixed;
width: 50px;
}
.right {
background-color: red;
float: right; /* or replace float with: margin-left: 100px */
min-height: 1000px;
width: 400px;
}
In the fiddles below I modified the container and column widths to better illustrate inside jsFiddle.
jsFiddle: http://jsfiddle.net/uvawqtfh/ - float version
jsFiddle: http://jsfiddle.net/uvawqtfh/1/ - margin-left version