I've made these accordion navigation and it works (mainly) as expected.
BUT: If one opens the text-sections by clicking on the expand-/contract-buttons one can see that the whole content-container moves to the left, respectively to the right.
Currently I've got no idea were these moving comes or how to prevent it.
Perhaps someone has an idea what goes wrong there?
// Get all span-"buttons".
var buttons = document.querySelectorAll('.sign');
buttons = Array.prototype.slice.call(buttons);
// Toggles the visibility of the text-paragraphs.
function toggleDisplayed() {
var section = this.parentNode;
var paragraphs = section.getElementsByTagName('p');
// Storing the context.
var that = this;
// Removes a class and adds the opposite class.
// --- Parameter -------
// 1.: Paragraph-element on which to add / remove.
// 2.: The class to remove.
// 3.: The class to add.
// 4.: The text-node of the span-element.
var manageClasses = function(paragraphObject, toRemove, toAdd, newSign) {
paragraphObject.classList.remove(toRemove);
paragraphObject.classList.add(toAdd);
that.textContent = newSign;
}
paragraphs = Array.prototype.slice.call(paragraphs);
// Change the state of the paragraphs in the section.
paragraphs.forEach(function(paragraph, i) {
if (paragraph.classList.contains('notDisplayed')) {
manageClasses(paragraph, 'notDisplayed', 'displayed', '-');
} else {
manageClasses(paragraph, 'displayed', 'notDisplayed', '+');
}
});
}
// Attach the toggle-function to all span-"buttons".
buttons.forEach(function(button, i) {
button.addEventListener('click', toggleDisplayed)
});
body {
background-color: rgba(240, 240, 240, 1.0);
overflow-y: scroll;
}
.wrap {
width: 800px;
margin: 0 auto;
padding: 10px 25px;
background-color: rgba(250, 250, 250, 1.0);
border-radius: 6px;
}
.wrap h3 {
display: inline-block;
width: 200px;
}
/* The toggle-Button */
.sign {
font-size: 120%;
font-weight: bold;
color: white;
background-color: rgba(50, 50, 50, 1.0);
border-radius: 30%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
display: inline-block;
}
.sign:hover {
background-color: rgba(50, 50, 50, 0.7);
}
.notDisplayed {
display: none;
}
.displayed {
display: block;
}
<div class="wrap">
<section>
<h2>About us</h2>
<p> Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero.</p>
</section>
<section class="info-about">
<h3>Current projects</h3><span class="sign">+</span>
<p class="notDisplayed">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque.</p>
<p class="notDisplayed">Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Nunc nulla. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec venenatis vulputate lorem.</p>
</section>
<section class="info-about">
<h3>Future projects</h3><span class="sign">+</span>
<p class="notDisplayed">Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui. Sed in libero ut nibh placerat accumsan. Proin faucibus arcu quis ante. In consectetuer turpis ut velit. Nulla sit amet est. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Suspendisse feugiat. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Praesent nec nisl a purus blandit viverra. Praesent ac massa at ligula laoreet iaculis. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna. Quisque ut nisi. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Suspendisse non nisl sit amet velit hendrerit rutrum. Ut leo. Ut a nisl id ante tempus hendrerit.</p>
</section>
<section class="info-about">
<h3>Closed projects</h3><span class="sign">+</span>
<p class="notDisplayed">Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Suspendisse eu ligula. Nulla facilisi. Donec id justo. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna. Duis vel nibh at velit scelerisque suscipit. Curabitur turpis. Vestibulum suscipit nulla quis orci. Fusce ac felis sit amet ligula pharetra condimentum. Maecenas egestas arcu quis ligula mattis placerat. Duis lobortis massa imperdiet quam. Suspendisse potenti. Pellentesque commodo eros a enim. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Sed libero. Aliquam erat volutpat. Etiam vitae tortor. Morbi vestibulum volutpat enim. Aliquam eu nunc. Nunc sed turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nulla porta dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque dapibus hendrerit tortor. Praesent egestas tristique nibh. Sed a libero. Cras varius. Donec vitae orci sed dolor rutrum auctor. Fusce egestas elit eget lorem. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Nam at tortor in tellus interdum sagittis. Aliquam lobortis. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Curabitur blandit mollis lacus. Nam adipiscing. Vestibulum eu odio. Vivamus laoreet. Nullam tincidunt adipiscing enim. Phasellus tempus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Fusce neque. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Vivamus aliquet elit ac nisl. Fusce fermentum odio nec arcu. Vivamus euismod mauris. In ut quam vitae odio lacinia tincidunt. Praesent ut ligula non mi varius sagittis. Cras sagittis. Praesent ac sem eget est egestas volutpat. Vivamus consectetuer hendrerit lacus. Cras non dolor. Vivamus in erat ut urna cursus vestibulum. Fusce commodo aliquam arcu. Nam commodo suscipit quam.</p>
<p class="notDisplayed">Quisque id odio. Praesent venenatis metus at tortor pulvinar varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.</p>
</section>
</div>
That happens when the scroll bar appears, because you defined an auto margin to your wrap. You can turn on the scroll bar, this is the easiest way to fix it.
just add this CSS property to your wrap DIV:
overflow-y: scroll;
Remove the last two rules display: and use visibility instead see demo. The reason why the display jumps is because display: none actually removes the element from DOM so there's a sudden empty space that is obvious when the element is display:block and jumps in to fill that empty space.
Withvisibility: hidden, the element is still there taking up space it's just invisible unlike display:none which achieves invisibility by not existing at all.
.notDisplayed {
visibility: hidden;
}
.displayed {
visibility: visible;
}
// Get all span-"buttons".
var buttons = document.querySelectorAll('.sign');
buttons = Array.prototype.slice.call(buttons);
// Toggles the visibility of the text-paragraphs.
function toggleDisplayed() {
var section = this.parentNode;
var paragraphs = section.getElementsByTagName('p');
// Storing the context.
var that = this;
// Removes a class and adds the opposite class.
// --- Parameter -------
// 1.: Paragraph-element on which to add / remove.
// 2.: The class to remove.
// 3.: The class to add.
// 4.: The text-node of the span-element.
var manageClasses = function(paragraphObject, toRemove, toAdd, newSign) {
paragraphObject.classList.remove(toRemove);
paragraphObject.classList.add(toAdd);
that.textContent = newSign;
}
paragraphs = Array.prototype.slice.call(paragraphs);
// Change the state of the paragraphs in the section.
paragraphs.forEach(function(paragraph, i) {
if (paragraph.classList.contains('notDisplayed')) {
manageClasses(paragraph, 'notDisplayed', 'displayed', '-');
} else {
manageClasses(paragraph, 'displayed', 'notDisplayed', '+');
}
});
}
// Attach the toggle-function to all span-"buttons".
buttons.forEach(function(button, i) {
button.addEventListener('click', toggleDisplayed)
});
body {
background-color: rgba(240, 240, 240, 1.0);
/*overflow-y: scroll;*/
}
.wrap {
width: 800px;
margin: 0 auto;
padding: 10px 25px;
background-color: rgba(250, 250, 250, 1.0);
border-radius: 6px;
/*overflow-y: scroll;*/
}
.wrap h3 {
display: inline-block;
width: 200px;
}
/* The toggle-Button */
.sign {
font-size: 120%;
font-weight: bold;
color: white;
background-color: rgba(50, 50, 50, 1.0);
border-radius: 30%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
display: inline-block;
}
.sign:hover {
background-color: rgba(50, 50, 50, 0.7);
}
.notDisplayed {
visibility: hidden;
/*display: none;*/
}
.displayed {
visibility: visible;
/*display: block;*/
}
<div class="wrap">
<section>
<h2>About us</h2>
<p> Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero.</p>
</section>
<section class="info-about">
<h3>Current projects</h3><span class="sign">+</span>
<p class="notDisplayed">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque.</p>
<p class="notDisplayed">Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Nunc nulla. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec venenatis vulputate lorem.</p>
</section>
<section class="info-about">
<h3>Future projects</h3><span class="sign">+</span>
<p class="notDisplayed">Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui. Sed in libero ut nibh placerat accumsan. Proin faucibus arcu quis ante. In consectetuer turpis ut velit. Nulla sit amet est. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Suspendisse feugiat. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Praesent nec nisl a purus blandit viverra. Praesent ac massa at ligula laoreet iaculis. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna. Quisque ut nisi. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Suspendisse non nisl sit amet velit hendrerit rutrum. Ut leo. Ut a nisl id ante tempus hendrerit.</p>
</section>
<section class="info-about">
<h3>Closed projects</h3><span class="sign">+</span>
<p class="notDisplayed">Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Suspendisse eu ligula. Nulla facilisi. Donec id justo. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna. Duis vel nibh at velit scelerisque suscipit. Curabitur turpis. Vestibulum suscipit nulla quis orci. Fusce ac felis sit amet ligula pharetra condimentum. Maecenas egestas arcu quis ligula mattis placerat. Duis lobortis massa imperdiet quam. Suspendisse potenti. Pellentesque commodo eros a enim. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Sed libero. Aliquam erat volutpat. Etiam vitae tortor. Morbi vestibulum volutpat enim. Aliquam eu nunc. Nunc sed turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nulla porta dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque dapibus hendrerit tortor. Praesent egestas tristique nibh. Sed a libero. Cras varius. Donec vitae orci sed dolor rutrum auctor. Fusce egestas elit eget lorem. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Nam at tortor in tellus interdum sagittis. Aliquam lobortis. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Curabitur blandit mollis lacus. Nam adipiscing. Vestibulum eu odio. Vivamus laoreet. Nullam tincidunt adipiscing enim. Phasellus tempus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Fusce neque. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Vivamus aliquet elit ac nisl. Fusce fermentum odio nec arcu. Vivamus euismod mauris. In ut quam vitae odio lacinia tincidunt. Praesent ut ligula non mi varius sagittis. Cras sagittis. Praesent ac sem eget est egestas volutpat. Vivamus consectetuer hendrerit lacus. Cras non dolor. Vivamus in erat ut urna cursus vestibulum. Fusce commodo aliquam arcu. Nam commodo suscipit quam.</p>
<p class="notDisplayed">Quisque id odio. Praesent venenatis metus at tortor pulvinar varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.</p>
</section>
</div>
Imagine a div that has a height of 300 px, and at its bottom there is another div nested with a height of 100 px. I'd like to freeze (stick to top) this 100 px div, but the background properties (eg. background color) are set in its container div.
jsfiddle
body {
padding: 0;
margin: 0;
border: 0;
}
#first {
background: #121212;
width: 100%;
height: 300px;
color: #ffffff;
}
#nonsticky {
height: 200px;
}
#sticky {
background: rgba(255, 255, 255, 0.3);
height: 100px;
}
#second {
background: #cecece;
width: 100%;
}
p {
padding: 15px 30px;
margin: 0;
}
<div id="first">
<div id="nonsticky">
<p>This div should scroll away when scrolling down the page.</p>
</div>
<div id="sticky">
<p>This div should stick to top of screen when scrolling down the page. However, the "first" div should stick, as background properties are set there.</p>
</div>
</div>
<div id="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan pharetra nibh in lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sodales a dui accumsan accumsan. Ut vitae diam turpis. Sed eu ante non quam cursus cursus ac nec nunc. Mauris bibendum massa et turpis semper porttitor. Integer consectetur dignissim ligula quis semper. Praesent a lorem erat.</p>
<p>Donec eleifend gravida massa, sed hendrerit nibh laoreet et. Pellentesque dapibus, metus sed pretium sodales, arcu dui suscipit felis, ac dignissim quam ex bibendum mi. Sed ut ornare enim. Pellentesque condimentum pulvinar metus, egestas varius justo commodo at. Praesent sollicitudin ultrices tortor non fermentum. Vestibulum ultrices justo sit amet consequat auctor. Nullam tristique odio felis, vel dapibus tortor ornare a. Cras quis lectus iaculis, mattis ipsum dignissim, pharetra urna. Integer lobortis tellus turpis, in molestie ante condimentum sed. Maecenas bibendum augue non libero porta, sed congue lorem varius.</p>
<p>Nam justo massa, sollicitudin at purus non, viverra lacinia mi. Morbi nisi ipsum, vestibulum eget hendrerit vel, placerat vitae velit. Suspendisse a enim in massa aliquet lacinia a vel quam. In luctus, ligula fermentum mattis semper, est neque tincidunt neque, faucibus elementum lectus odio a urna. Etiam suscipit augue eu dui tempus condimentum ac sed ligula. Aliquam erat volutpat. Nulla interdum ante at nunc viverra, eget ullamcorper justo sodales. Duis venenatis lectus at felis varius, accumsan sodales diam rutrum. Integer lobortis ante nisl, vel dapibus lacus finibus semper. Pellentesque nec semper ipsum. In eu purus rhoncus, dictum arcu volutpat, mollis nisi. Phasellus metus mi, aliquet sed ultricies a, viverra sit amet turpis. Duis vestibulum vitae eros at porttitor. Pellentesque aliquam est quis massa suscipit interdum. Donec urna magna, commodo in condimentum a, rhoncus in enim. Donec mattis magna sed libero gravida, vulputate condimentum lacus pulvinar.</p>
<p>Sed mattis semper tellus in imperdiet. Suspendisse vel faucibus justo, lobortis vulputate ex. Sed malesuada porta ullamcorper. Nullam mattis metus ac nunc faucibus, id vulputate ex tincidunt. Nunc sagittis, ligula in ullamcorper dignissim, massa arcu elementum quam, rutrum mollis ante ligula sit amet massa. Suspendisse finibus commodo elit, id lacinia mauris cursus eu. Aliquam luctus nisi sit amet massa fermentum iaculis. Nulla porttitor ex id faucibus mollis. Mauris suscipit gravida ante eu ultrices. Nullam a dictum tellus. Pellentesque ac magna quam. Quisque varius ac odio eget gravida. Donec aliquam libero mi, in euismod urna condimentum nec. Integer imperdiet tortor et velit rutrum tempus.</p>
<p>Proin rutrum turpis purus, ac ullamcorper tellus tincidunt id. Quisque pretium pulvinar luctus. Fusce viverra purus id ipsum mollis accumsan non at purus. Aenean non ultrices mi. Sed ante mi, gravida tempus efficitur at, tempor in orci. Praesent molestie justo lectus, at euismod urna consectetur eget. Aliquam bibendum, nibh ut semper rhoncus, ligula magna ultrices turpis, at auctor neque tellus nec tellus. Cras dictum at lacus et ullamcorper. Nulla in molestie augue. Mauris turpis ligula, porttitor sed congue sit amet, mollis ac mauris. Aliquam rhoncus nec leo quis condimentum. Morbi tempor cursus sapien vel luctus. Sed tincidunt nibh quis quam feugiat mattis. Integer ac ante maximus, pretium augue vel, eleifend arcu. Vivamus augue nisl, pulvinar sit amet eleifend vitae, mattis rhoncus nibh. Donec sed luctus tellus, in venenatis velit.</p>
</div>
Thank you all in advance!
A possible solution, using jQuery:
$first = $('#first');
$sticky = $('#sticky');
$(window).scroll(function() {
$first.toggleClass('fixed', $(window).scrollTop() > $first.height() - $sticky.height())
.css('top', $(window).scrollTop() - $first.height() + $sticky.height());
});
The CSS:
.fixed{
position: relative;
top: 0;
left: 0;
width: 100%;
}
JS Fiddle Demo
if I understand your question the "sticky" part has a rgba background so I guess the first container has background image or simillar.
I your case I would stick the full container with negative top value to make the effect is the sticky part the one fixed positioned.
basically you use this simple jquery:
$(window).scroll(function () {
if ($(window).scrollTop() > 200) {
$("#first").addClass("fixed");
} else {
$("#first").removeClass("fixed");
}
});
and you add this class:
.fixed {position:fixed;top:-200px}
Here's your FIDDLE
Something like this?
Updated 2
JSFiddle
Bassically you need to add the following class style to your CSS:
#sticky.top {
position: fixed;
top: 0;
}
And the following jQuery.
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 200) {
$("#sticky").addClass("top");
} else {
$("#sticky").removeClass("top");
}
});
body {
padding: 0;
margin: 0;
border: 0;
}
#first {
background: #121212;
width: 100%;
height: 300px;
color: #ffffff;
}
#nonsticky {
height: 200px;
}
#sticky {
background: rgba(255, 255, 255, 0.3);
height: 100px;
}
#sticky.top {
background:#585858;
position: fixed;
top: 0;
}
#second {
background: #cecece;
width: 100%;
}
p {
padding: 15px 30px;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="first">
<div id="nonsticky">
<p>This div should scroll away when scrolling down the page.</p>
</div>
<div id="sticky">
<p>This div should stick to top of screen when scrolling down the page. However, the "first" div should stick, as background properties are set there.</p>
</div>
</div>
<div id="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan pharetra nibh in lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sodales a dui accumsan accumsan. Ut vitae diam turpis.
Sed eu ante non quam cursus cursus ac nec nunc. Mauris bibendum massa et turpis semper porttitor. Integer consectetur dignissim ligula quis semper. Praesent a lorem erat.</p>
<p>Donec eleifend gravida massa, sed hendrerit nibh laoreet et. Pellentesque dapibus, metus sed pretium sodales, arcu dui suscipit felis, ac dignissim quam ex bibendum mi. Sed ut ornare enim. Pellentesque condimentum pulvinar metus, egestas varius justo
commodo at. Praesent sollicitudin ultrices tortor non fermentum. Vestibulum ultrices justo sit amet consequat auctor. Nullam tristique odio felis, vel dapibus tortor ornare a. Cras quis lectus iaculis, mattis ipsum dignissim, pharetra urna. Integer
lobortis tellus turpis, in molestie ante condimentum sed. Maecenas bibendum augue non libero porta, sed congue lorem varius.</p>
<p>Nam justo massa, sollicitudin at purus non, viverra lacinia mi. Morbi nisi ipsum, vestibulum eget hendrerit vel, placerat vitae velit. Suspendisse a enim in massa aliquet lacinia a vel quam. In luctus, ligula fermentum mattis semper, est neque tincidunt
neque, faucibus elementum lectus odio a urna. Etiam suscipit augue eu dui tempus condimentum ac sed ligula. Aliquam erat volutpat. Nulla interdum ante at nunc viverra, eget ullamcorper justo sodales. Duis venenatis lectus at felis varius, accumsan
sodales diam rutrum. Integer lobortis ante nisl, vel dapibus lacus finibus semper. Pellentesque nec semper ipsum. In eu purus rhoncus, dictum arcu volutpat, mollis nisi. Phasellus metus mi, aliquet sed ultricies a, viverra sit amet turpis. Duis vestibulum
vitae eros at porttitor. Pellentesque aliquam est quis massa suscipit interdum. Donec urna magna, commodo in condimentum a, rhoncus in enim. Donec mattis magna sed libero gravida, vulputate condimentum lacus pulvinar.</p>
<p>Sed mattis semper tellus in imperdiet. Suspendisse vel faucibus justo, lobortis vulputate ex. Sed malesuada porta ullamcorper. Nullam mattis metus ac nunc faucibus, id vulputate ex tincidunt. Nunc sagittis, ligula in ullamcorper dignissim, massa arcu
elementum quam, rutrum mollis ante ligula sit amet massa. Suspendisse finibus commodo elit, id lacinia mauris cursus eu. Aliquam luctus nisi sit amet massa fermentum iaculis. Nulla porttitor ex id faucibus mollis. Mauris suscipit gravida ante eu ultrices.
Nullam a dictum tellus. Pellentesque ac magna quam. Quisque varius ac odio eget gravida. Donec aliquam libero mi, in euismod urna condimentum nec. Integer imperdiet tortor et velit rutrum tempus.</p>
<p>Proin rutrum turpis purus, ac ullamcorper tellus tincidunt id. Quisque pretium pulvinar luctus. Fusce viverra purus id ipsum mollis accumsan non at purus. Aenean non ultrices mi. Sed ante mi, gravida tempus efficitur at, tempor in orci. Praesent molestie
justo lectus, at euismod urna consectetur eget. Aliquam bibendum, nibh ut semper rhoncus, ligula magna ultrices turpis, at auctor neque tellus nec tellus. Cras dictum at lacus et ullamcorper. Nulla in molestie augue. Mauris turpis ligula, porttitor
sed congue sit amet, mollis ac mauris. Aliquam rhoncus nec leo quis condimentum. Morbi tempor cursus sapien vel luctus. Sed tincidunt nibh quis quam feugiat mattis. Integer ac ante maximus, pretium augue vel, eleifend arcu. Vivamus augue nisl, pulvinar
sit amet eleifend vitae, mattis rhoncus nibh. Donec sed luctus tellus, in venenatis velit.</p>
</div>
I have the following code that is suppose to illustrate navigation menu bar that can float.
Unfortunately, it cannot work in Microsoft IE (IE 8, 9) but it
<html lang="en">
<head>
<title></title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<style type="text/css">
body {
background-color: #333;
color: #999;
font: 12px/1.4em Arial,sans-serif;
}
#wrap {
margin: 10px auto;
background: #666;
padding: 10px;
width: 700px;
}
#header {
background-color: #666;
color: #FFF;
}
#logo {
font-size: 30px;
line-height: 40px;
padding: 5px;
}
#navWrap {
height: 30px;
}
#nav {
padding: 5px;
//background: #999;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav li {
float: right;
padding: 3px 8px;
background-color: #FFF;
margin: 0 10px 0 0;
color: #F00;
list-style-type: none;
}
#nav li a {
color: #F00;
text-decoration: none;
}
#nav li a:hover {
text-decoration: underline;
}
br.clearLeft {
clear: left;
}
.bigNum {
font-size: 20px;
color: #000;
background: #FFF;
padding: 2px;
}
#eduHomeBackLink {
position: fixed;
right: 20px;
bottom: 20px;
background-color: #333;
background-color: rgba(0,0,0,0.85);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
font-family: Lato,'Lucida Grande',sans-serif;
}
#eduHomeBackLink a {
padding: 10px;
border: none;
}
#eduHomeBackLink a:hover {
color: #FFF;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(function() {
// Stick the #nav to the top of the window
var nav = $('#nav');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
left: nav.offset().left,
width: nav.width()
});
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
position: 'static'
});
isFixed = false;
}
});
});
//]]>
</script>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">Start Slowly Scrolling Down<br /> This Page!</div>
<div id="navWrap">
</div>
</div>
<p><a name="1"></a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta justo in tellus porttitor non placerat dui pulvinar. Aliquam erat volutpat. Morbi ullamcorper libero sit amet tortor porta iaculis. Duis sit amet diam dolor. Mauris bibendum pharetra justo, sed ornare arcu scelerisque vitae. Integer molestie dignissim lacinia. Etiam sagittis consectetur iaculis. Pellentesque fringilla nulla at tortor dictum lobortis.
</p>
<div id="eduHomeBackLink">« Back to Education Center Home</div>
<p>
<span class="bigNum">1.</span> Aliquam erat volutpat. Integer pulvinar dignissim lacus eu lacinia. Sed vitae orci eget nisl ultricies feugiat quis ut velit. Sed urna mauris, viverra volutpat pulvinar et, tempus vel odio. Aenean at posuere massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam quis augue nisi, quis ornare nisl. Nulla sagittis neque at massa venenatis tincidunt. Morbi sed nibh magna, vel consectetur nisi. Nullam tortor augue, scelerisque et consequat eu, fermentum at eros. Donec scelerisque ullamcorper tincidunt.
</p>
<div id="nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<br class="clearLeft" />
</div>
<p>
Pellentesque ut nulla dolor. Sed non diam odio, ac luctus mauris. Nunc erat turpis, imperdiet vel laoreet laoreet, scelerisque vel dui. Sed nec nisl nulla, ut gravida neque. Mauris augue nibh, accumsan id viverra et, pellentesque a orci. Integer venenatis congue urna a ornare. Fusce in facilisis tortor. In lobortis est non lacus cursus venenatis. Donec a metus erat, id rhoncus turpis. Quisque vitae venenatis tellus. Donec quis risus erat, in luctus justo. Nulla ultrices, urna quis faucibus vehicula, lorem nibh tristique magna, nec tristique augue massa sit amet arcu. Donec malesuada, erat iaculis pretium ultricies, lorem nisl lacinia tellus, vel luctus augue nunc eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque dignissim, orci ut ultrices aliquet, enim nisl auctor magna, nec feugiat eros lorem vehicula ipsum.
</p>
<p>
Maecenas vitae mauris enim, vel pretium turpis. Sed pharetra accumsan tellus. Maecenas pulvinar ipsum viverra sapien volutpat blandit. Vivamus vel massa velit. Pellentesque condimentum tincidunt aliquam. Vivamus mattis auctor diam, eu commodo massa laoreet ut. Sed congue faucibus arcu, quis hendrerit nisl pellentesque non. Nunc sagittis condimentum lacus. Cras tincidunt sem quis lorem tempor eget porta magna pulvinar. Donec molestie diam sagittis sem tristique in iaculis ligula aliquet. Aenean rutrum eleifend metus nec tempus. Integer nisi ligula, pretium in porta vel, euismod non lectus. Aliquam erat volutpat. Praesent sit amet massa purus.
</p>
<p><a name="2"></a>
Ut pellentesque, lectus ut porttitor ullamcorper, velit nulla dignissim tellus, eu luctus nibh mauris non arcu. Mauris viverra purus et leo condimentum adipiscing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam condimentum facilisis lacus, quis rutrum purus tristique non. Nam vestibulum mauris eu sem porttitor accumsan. Phasellus at eleifend neque. Nam interdum ultrices commodo. Nunc dignissim aliquet dui. Nunc id nisl congue dolor pharetra pulvinar vel ac lectus. Nunc mi justo, semper id sollicitudin et, luctus eget quam. Ut condimentum porta consectetur. Donec nunc turpis, molestie ac semper ut, aliquet id nulla. Vestibulum id ipsum purus, sed tempor lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</p>
<p>
<span class="bigNum">2.</span> Aliquam erat volutpat. Duis euismod porta eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque porta tincidunt gravida. Praesent sed mi nisl, non pretium mi. Suspendisse nibh orci, mollis eget adipiscing id, malesuada quis enim. Nullam facilisis elit ut magna facilisis ac eleifend diam tempor. Curabitur et justo est, a sagittis velit. Proin mollis, libero ac luctus faucibus, ipsum risus consequat dolor, viverra sagittis felis lorem non quam. Nam risus nisl, congue a semper eu, dapibus ac nunc. Maecenas tortor nisl, pellentesque eu luctus at, viverra ut libero. Nullam quis egestas massa. Donec dapibus rhoncus risus nec tincidunt. Suspendisse condimentum ante sit amet odio consequat id suscipit ante tempus. Aenean purus leo, blandit a iaculis non, tristique ullamcorper ante.
</p>
<p>
Phasellus consectetur, ante nec pretium hendrerit, arcu nunc ullamcorper lectus, non pulvinar sapien nibh ac sem. Nullam dignissim erat sit amet sapien convallis ornare. In hac habitasse platea dictumst. Fusce et ante ut turpis condimentum dictum. Mauris elit justo, laoreet eget consectetur sed, suscipit ut augue. Phasellus id sollicitudin enim. Aenean et justo magna, in ultricies lectus. Nunc blandit quam rhoncus quam pretium tempor. Aenean nec fermentum nibh. Donec ornare magna nec leo tempus ac varius tortor hendrerit. Ut vel erat purus. Maecenas volutpat convallis est a sagittis.
</p>
<p>
Duis mattis orci at justo molestie blandit. Nunc blandit tortor vitae ipsum congue ut pharetra nibh accumsan. Phasellus dapibus risus sed purus laoreet mattis. Ut placerat imperdiet diam, ut blandit dolor auctor vel. Nunc in odio quis eros fringilla consectetur. Ut porttitor imperdiet arcu nec ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis hendrerit felis id mauris pulvinar faucibus sodales magna dictum.
</p>
<p>
Mauris in tincidunt ante. Donec fermentum varius interdum. Nulla consectetur faucibus purus, eu interdum nulla aliquet eu. Cras id lectus lacus, eleifend rhoncus lorem. Integer malesuada tristique lobortis. Phasellus a dolor non turpis euismod euismod vel a enim. Duis eu augue a elit commodo pellentesque. Ut dolor odio, ornare ac faucibus sed, tincidunt vel ipsum. Nunc et nibh eros, ut vehicula massa. Donec tempus, augue vel consequat adipiscing, nibh lacus mollis nunc, egestas commodo nisi quam sed orci.
</p>
<p>
Maecenas sit amet tortor nunc. Donec nec tempor augue. Mauris mi dolor, dictum et dictum a, tincidunt sit amet sapien. Nunc dapibus nunc nec arcu tristique sit amet consectetur libero eleifend. Suspendisse dignissim massa eu neque lacinia tincidunt. Vivamus vel nisl eu nulla convallis pretium. Nunc ante justo, hendrerit a malesuada vitae, semper a risus. Nunc viverra purus quis lorem cursus quis ultrices mauris ullamcorper. Pellentesque luctus, nibh vel elementum facilisis, nisi turpis aliquet augue, et feugiat nisi massa sed risus. Aenean dui velit, molestie placerat euismod vel, sodales at mauris. Donec leo felis, eleifend nec placerat sed, placerat vulputate libero.
</p>
<p>
Nullam in mauris eleifend lorem mollis facilisis dapibus vel felis. Morbi pharetra euismod semper. Vivamus mollis gravida imperdiet. Proin mattis, nulla sed lobortis tincidunt, mauris dui suscipit dolor, sed fermentum nisi orci eget neque. Ut mattis leo eu dolor fringilla eu auctor tortor blandit. Mauris eleifend risus nec felis elementum mattis. Nulla rhoncus ante quam, eu eleifend leo. Aliquam euismod felis in nunc suscipit congue. Sed facilisis sapien a erat posuere ac facilisis lectus cursus. Praesent nulla felis, placerat nec lacinia sit amet, laoreet eget odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent non urna mattis dui porttitor egestas at sed tellus. Integer id commodo quam. Nullam fermentum, velit nec sagittis placerat, magna nibh posuere dolor, vel dictum mi tortor et dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean iaculis, orci eu pulvinar pulvinar, tellus nisl luctus lectus, ac scelerisque leo purus non eros.
</p>
<p>
Cras est sem, rutrum non malesuada ac, fringilla et risus. Mauris sit amet quam eget orci varius mattis quis eu augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam at ipsum eros. Pellentesque porta vestibulum mi, a pulvinar est condimentum scelerisque. Duis vitae metus a metus euismod tempor. Nunc augue mi, aliquam at commodo sed, condimentum a lorem. Proin rhoncus faucibus congue. Quisque diam ante, lacinia non fermentum at, dapibus nec lacus. Nunc suscipit vestibulum sem, a euismod mauris imperdiet et. Quisque gravida nulla sit amet magna posuere vel fringilla urna porta. Praesent rhoncus congue quam a gravida. Curabitur nisl erat, mattis non pharetra vel, tincidunt sit amet lorem. Donec tristique lacus luctus augue dapibus a semper eros suscipit.
</p>
<p>
Fusce interdum tincidunt felis, id ullamcorper urna gravida ac. Ut ut mi quam. Vestibulum ultricies consequat porta. Donec orci felis, viverra non sodales a, gravida id enim. Duis vulputate lacus et nunc fermentum eu elementum erat pharetra. Aliquam et quam tortor, in ultrices eros. Integer elit ipsum, cursus at varius sed, molestie a tellus.
</p>
</body>
</html>
The page is in quirks mode that's why it isn't working. Please add the suitable document type then it will work.
Example:
Add this to the top of the page and then try.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">