Related
I am new to coding. I need to create a accordion, which I have created with html and used jQuery to expand collapse panel. When I try to open first panel, it opens and when I try to open the second panel the first panel closes, which I don't want to happen. I need a simple and easy jQuery method to achieve this.
if ($(this).next().is(':hidden') !== true) {
$(this).removeClass('active');
$(this).next().slideUp("fast");
//var height = $(this).clientHeight;
} else {
$('.panelHeading').removeClass('active');
$('.panelBody').slideUp('fast');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('active');
$(this).next().slideDown('fast');
}
this closes one panel when other is open. I want the open panel to stay open even if I open another.
$(document).ready(function() {
$('.question').click(function() {
if ($(this).next().is(':hidden') !== true) {
$(this).removeClass('active');
$(this).next().slideUp("normal");
} else {
$('.question').removeClass('active');
$('.answer').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('active');
$(this).next().slideDown('normal');
}
}
});
$('.answer').hide();
$('.expand').click(function(event) {
$('.question').next().slideDown('normal'); {
$('.question').addClass('active');
}
});
$('.collapse').click(function(event) {
$('.question').next().slideUp('normal'); {
$('.question').removeClass('active');
}
});
});
#wrapper {
margin-left: auto;
margin-right: auto;
padding-top: 30px;
font-family: verdana;
font-size: 12px;
}
.question {
width: 400px;
float: left;
background: #fff;
padding-left: 20px;
padding-top: 18px;
cursor: pointer;
background-position: 4px -19px;
background-repeat: no-repeat;
}
.answer {
width: 400px;
float: left;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 20px;
background: #fff;
}
.question::before {
content: '\25B6';
color: red;
}
.active:before {
content: '\25E2';
}
a {
color: #000;
text-decoration: none
}
a:hover {
text-decoration: underline
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div id="wrapper">
<div style="float:right;">Expand All | Collapse All</div>
<div class="question"><span class="head">Lorem ipsum dolor sit amet?</span></div>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec ligula lorem. Mauris laoreet sagittis sem, nec pulvinar neque tempus sit amet. Fusce at mi tortor, eget blandit velit. Phasellus sed dolor at felis auctor mollis nec eget nisl. Fusce
pretium nibh nisi. Aliquam congue iaculis velit, id facilisis elit pharetra a. Nulla posuere nunc vel tortor blandit sit amet tristique dolor venenatis. Phasellus nunc odio, feugiat non egestas ut, rutrum ac elit. Pellentesque iaculis tempor diam
quis ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ullamcorper, enim non imperdiet dictum, nisl eros interdum turpis, sed posuere diam ante ac orci. Pellentesque et malesuada elit.
</div>
<div class="question"><span class="head">Vestibulum in ornare metus?</span></div>
<div class="answer">
Vestibulum in ornare metus. Integer in libero vitae eros bibendum ultricies. Cras ultricies risus eu massa tincidunt faucibus rutrum enim malesuada. Nullam non est a nunc tincidunt porttitor a ac odio. Cras accumsan ante in odio ultrices semper. Fusce
dignissim eleifend vehicula. Aenean dictum ante et lorem lacinia vel fringilla urna vestibulum. Duis condimentum felis in ligula venenatis et auctor massa dapibus. Morbi tincidunt elit a odio scelerisque sodales. Integer et egestas lorem. Suspendisse
tincidunt varius augue, ac fermentum erat ultricies laoreet. Donec eu dolor justo, a convallis lectus. Pellentesque pellentesque, erat ut dictum lacinia, orci nulla posuere tellus, at gravida nibh tellus dictum velit. Donec molestie sapien non dolor
tincidunt eget interdum tortor molestie. Curabitur placerat scelerisque odio, at congue purus malesuada et.
</div>
<div class="question"><span class="head">Donec sagittis massa tristique urna placerat?</span></div>
<div class="answer">
Donec sagittis massa tristique urna placerat at facilisis tortor accumsan. Etiam pulvinar scelerisque mi eu euismod. Donec tempor euismod condimentum. Vivamus consequat tempus est sit amet blandit. Sed malesuada libero in risus fermentum ornare et sed
risus. Duis ut odio nibh. Vivamus pulvinar porta dui, at adipiscing nunc rutrum ut. Nullam elementum pretium faucibus. Quisque faucibus viverra lacus eget consequat. Pellentesque ut tristique nulla. Duis lacus velit, gravida sit amet molestie vitae,
dignissim in lectus. Quisque rhoncus nibh a ligula dictum quis ultrices risus lobortis. Cras volutpat, tortor ac porta mattis, turpis nisl lobortis purus, sed aliquet purus lorem eu tellus. Nunc lacinia bibendum vehicula. Phasellus ut augue eget tortor
viverra molestie at nec ante. Cras venenatis, quam eget rutrum semper, turpis mauris scelerisque lacus, eget placerat urna ante eget diam. Suspendisse quis posuere est. Sed quis magna vitae tellus eleifend iaculis sit amet et ligula. Phasellus mollis
nunc id dolor malesuada placerat. Fusce posuere congue est eu euismod.
</div>
<div class="question"><span class="head">Nulla nec egestas quam?</span></div>
<div class="answer">
Nulla nec egestas quam. Sed gravida libero nec felis consequat elementum. Vivamus ante erat, malesuada sed dictum ac, mattis rhoncus nunc. Mauris libero eros, euismod vitae varius at, pellentesque ac nisl. Pellentesque lobortis, felis eget scelerisque
adipiscing, erat nisi vehicula orci, vel dictum velit orci non ipsum. Aliquam egestas erat sit amet tortor feugiat eu volutpat erat laoreet. Fusce lacinia, dui ac sodales cursus, est eros accumsan metus, sit amet ornare ligula diam eget nisl. Sed
nec lectus tellus. Phasellus malesuada volutpat luctus. Praesent fringilla feugiat sem quis feugiat. Morbi lorem ante, fermentum et egestas vel, pellentesque in eros. Aliquam ut ipsum ullamcorper nunc cursus consequat. Fusce sagittis convallis risus,
vel accumsan orci scelerisque ut. Curabitur nec sollicitudin nibh. Pellentesque vitae nunc ac nibh lobortis porttitor. Duis sit amet ante lectus, luctus vehicula nisl.
</div>
</div>
You can do something as simple as:
$(document).ready(function() {
$('.question').click(function() {
$(this).toggleClass('active');//toggle on/off the active class
$(this).next().slideToggle('normal');// toggle up/down the slide
});
});
demo
You can just change below code on click of question;
$('.question').click(function() {
if($(this).next().is(':hidden') !== true) {
$(this).removeClass('active');
$(this).next().slideUp("normal");
} else {
$(this).addClass('active');
$(this).next().slideDown('normal');
}
});
Also find Working jsfiddle here.
$(document).ready(function() {
$('.question').click(function() {
if($(this).next().is(':hidden') !== true) {
$(this).removeClass('active');
$(this).next().slideUp("normal");
} else {
$(this).addClass('active');
$(this).next().slideDown('normal');
}
});
$('.answer').hide();
$('.expand').click(function(event)
{$('.question').next().slideDown('normal');
{$('.question').addClass('active');}
}
);
$('.collapse').click(function(event)
{$('.question').next().slideUp('normal');
{$('.question').removeClass('active');}
}
);
});
#wrapper {
margin-left: auto;
margin-right: auto;
padding-top:30px;
font-family:verdana;
font-size:12px;
}
.question {
width: 400px;
float: left;
background: #fff;
padding-left:20px;
padding-top:18px;
cursor: pointer;
background-position : 4px -19px;
background-repeat : no-repeat;
}
.answer {
width: 400px;
float: left;
padding-top:10px;
padding-bottom:10px;
margin-left:20px;
background: #fff;
}
.question::before{
content: '\25B6';
color: red;
}
.active:before {
content: '\25E2';
}
a{color:#000;text-decoration:none}
a:hover{text-decoration:underline}
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<body>
<div id="wrapper">
<div style="float:right;">Expand All | Collapse All</div>
<div class="question"><span class="head">Lorem ipsum dolor sit amet?</span></div>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec ligula lorem. Mauris laoreet sagittis sem, nec pulvinar neque tempus sit amet. Fusce at mi tortor, eget blandit velit. Phasellus sed dolor at felis auctor mollis nec eget nisl. Fusce pretium nibh nisi. Aliquam congue iaculis velit, id facilisis elit pharetra a. Nulla posuere nunc vel tortor blandit sit amet tristique dolor venenatis. Phasellus nunc odio, feugiat non egestas ut, rutrum ac elit. Pellentesque iaculis tempor diam quis ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ullamcorper, enim non imperdiet dictum, nisl eros interdum turpis, sed posuere diam ante ac orci. Pellentesque et malesuada elit.
</div>
<div class="question"><span class="head">Vestibulum in ornare metus?</span></div>
<div class="answer">
Vestibulum in ornare metus. Integer in libero vitae eros bibendum ultricies. Cras ultricies risus eu massa tincidunt faucibus rutrum enim malesuada. Nullam non est a nunc tincidunt porttitor a ac odio. Cras accumsan ante in odio ultrices semper. Fusce dignissim eleifend vehicula. Aenean dictum ante et lorem lacinia vel fringilla urna vestibulum. Duis condimentum felis in ligula venenatis et auctor massa dapibus. Morbi tincidunt elit a odio scelerisque sodales. Integer et egestas lorem. Suspendisse tincidunt varius augue, ac fermentum erat ultricies laoreet. Donec eu dolor justo, a convallis lectus. Pellentesque pellentesque, erat ut dictum lacinia, orci nulla posuere tellus, at gravida nibh tellus dictum velit. Donec molestie sapien non dolor tincidunt eget interdum tortor molestie. Curabitur placerat scelerisque odio, at congue purus malesuada et.
</div>
<div class="question"><span class="head">Donec sagittis massa tristique urna placerat?</span></div>
<div class="answer">
Donec sagittis massa tristique urna placerat at facilisis tortor accumsan. Etiam pulvinar scelerisque mi eu euismod. Donec tempor euismod condimentum. Vivamus consequat tempus est sit amet blandit. Sed malesuada libero in risus fermentum ornare et sed risus. Duis ut odio nibh. Vivamus pulvinar porta dui, at adipiscing nunc rutrum ut. Nullam elementum pretium faucibus. Quisque faucibus viverra lacus eget consequat. Pellentesque ut tristique nulla. Duis lacus velit, gravida sit amet molestie vitae, dignissim in lectus. Quisque rhoncus nibh a ligula dictum quis ultrices risus lobortis. Cras volutpat, tortor ac porta mattis, turpis nisl lobortis purus, sed aliquet purus lorem eu tellus. Nunc lacinia bibendum vehicula. Phasellus ut augue eget tortor viverra molestie at nec ante. Cras venenatis, quam eget rutrum semper, turpis mauris scelerisque lacus, eget placerat urna ante eget diam. Suspendisse quis posuere est. Sed quis magna vitae tellus eleifend iaculis sit amet et ligula. Phasellus mollis nunc id dolor malesuada placerat. Fusce posuere congue est eu euismod.
</div>
<div class="question"><span class="head">Nulla nec egestas quam?</span></div>
<div class="answer">
Nulla nec egestas quam. Sed gravida libero nec felis consequat elementum. Vivamus ante erat, malesuada sed dictum ac, mattis rhoncus nunc. Mauris libero eros, euismod vitae varius at, pellentesque ac nisl. Pellentesque lobortis, felis eget scelerisque adipiscing, erat nisi vehicula orci, vel dictum velit orci non ipsum. Aliquam egestas erat sit amet tortor feugiat eu volutpat erat laoreet. Fusce lacinia, dui ac sodales cursus, est eros accumsan metus, sit amet ornare ligula diam eget nisl. Sed nec lectus tellus. Phasellus malesuada volutpat luctus. Praesent fringilla feugiat sem quis feugiat. Morbi lorem ante, fermentum et egestas vel, pellentesque in eros. Aliquam ut ipsum ullamcorper nunc cursus consequat. Fusce sagittis convallis risus, vel accumsan orci scelerisque ut. Curabitur nec sollicitudin nibh. Pellentesque vitae nunc ac nibh lobortis porttitor. Duis sit amet ante lectus, luctus vehicula nisl.
</div>
</div>
</body>
Hope this is what you are looking for.
(function(factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
module.exports = function(root, jQuery) {
if (jQuery === undefined) {
if (typeof window !== 'undefined') {
jQuery = require('jquery');
} else {
jQuery = require('jquery')(root);
}
}
factory(jQuery);
return jQuery;
};
} else {
factory(jQuery);
}
}(function($) {
var originalToggle = $.ui.accordion.prototype._toggle;
$.extend($.ui.accordion.prototype, {
multiple: false,
_toggle: function(data) {
if (this.options.multiple && data.newPanel.length) {
data.oldPanel = data.oldHeader = this.prevShow = $('');
if (this.options.collapsible && data.newPanel.is(':visible')) {
data.oldPanel = data.newPanel;
data.newPanel = $('');
}
}
originalToggle.apply(this, arguments);
}
});
}));
$( function() {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$( "#accordion" ).accordion({
collapsible: true,
multiple: true,
active: 1,
icons: icons
});
} );
#wrapper {
margin-left: auto;
margin-right: auto;
padding-top: 30px;
font-family: verdana;
font-size: 12px;
}
.question {
width: 400px;
float: left;
background: #fff;
padding-left: 20px;
padding-top: 18px;
cursor: pointer;
background-position: 4px -19px;
background-repeat: no-repeat;
}
.answer {
width: 400px;
float: left;
padding-top: 10px;
padding-bottom: 10px;
margin-left: 20px;
background: #fff;
}
.question::before {
content: '\25B6';
color: red;
}
.active:before {
content: '\25E2';
}
a {
color: #000;
text-decoration: none
}
a:hover {
text-decoration: underline
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3>Section 3</h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
I'm trying to make it so this first section of my page will fit the whole browser, but I also want it to be responsive. The problem I have right now is that when I resize the browser, the text or some things may get cut off.
In the photo, you can see some of the text is cut off, but I don't want it to get cut off.
Basically, what I'm trying to do is make the top section fit the whole browser for any size, but also the content inside must be responsive as well.
Here is a JSFiddle
#import url('https://fonts.googleapis.com/css?family=Asap');
body, html
{
background-color: #598392;
margin: 0;
padding: 0;
font-family: 'Asap', sans-serif;
height:100%;
}
.menuIcon
{
padding:20px;
display:none;
cursor:pointer;
}
.navigationBar
{
background-color: #124559;
width:100%;
overflow:hidden;
position:fixed;
}
.title
{
overflow:hidden;
height:100vh;
}
.navigationBar li
{
padding:20px;
display: inline;
list-style-type:none;
}
a
{
color: #EFF6E0;
text-decoration: none;
}
a:hover
{
color: #AEC3B0;
}
nav ul
{
padding: 20px;
margin: 0;
transition: max-height 1s;
}
.title h1
{
padding: 75px 0 0 20px;
}
.title article
{
padding: 20px;
}
.show
{
display:block;
}
#media only screen and (max-width: 768px)
{
.menuIcon
{
display:block;
}
.navigationBar
{opacity: 0.9;}
.navigationBar li
{
display:block;
padding: 10px;
text-align: center;
}
nav ul
{
max-height: 0;
padding: 0px;
}
.show
{
max-height: 200px;
}
.title article
{
padding: 20px;
}
}
/*
#media only screen and (min-width: 768px)
{
nav ul
{
display: block !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type ="text/css" href = "nav.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class = "navigationBar">
<img src = "https://i.imgur.com/nfbKl0W.png" class = "menuIcon">
<ul class = "linkBar">
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Media</li>
<li>Miscellaneous</li>
</ul>
</nav>
<section class = "title">
<h1>Welcome</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis vitae magna quis lacinia. Donec felis velit, consequat at nisi quis, sollicitudin scelerisque quam. Proin metus sapien, lobortis ac lacus a, maximus porttitor magna. Praesent pellentesque felis a consequat semper. Sed commodo gravida elit sit amet interdum. Suspendisse felis tellus, consequat vel varius eu, tincidunt eu elit. Quisque porttitor ultricies risus, at accumsan diam vehicula in. Aliquam sit amet arcu nec dui pretium viverra et eget ipsum. Mauris id diam sem. Etiam pellentesque eleifend odio non sagittis. Phasellus eleifend felis et convallis mollis. Donec eget diam nisl. Nam non molestie mi. Suspendisse vitae efficitur nisl. In ac urna at mi ultrices commodo.
</article>
<article>
Vestibulum quis porttitor nisl, eget tincidunt ante. Ut ac fringilla nulla. Donec cursus est semper sodales mollis. In pellentesque elementum porttitor. Curabitur aliquet velit risus, sed blandit nisl luctus cursus. Vivamus sem massa, cursus vitae ipsum fringilla, feugiat porta tellus. Fusce ac ornare nisi. Maecenas metus nibh, tincidunt vel sem vel, iaculis pharetra sem. Aenean dolor nisl, porta sit amet rutrum et, posuere nec nibh. Pellentesque ante nisi, molestie dignissim porttitor sit amet, dignissim ut magna.
</article>
<article>
Vestibulum congue finibus felis suscipit pellentesque. Nunc pulvinar neque a ipsum molestie, condimentum congue urna hendrerit. Morbi egestas ac velit quis tincidunt. Donec consectetur finibus dui a consequat. Sed varius diam ut dui viverra, a pellentesque nunc molestie. Nullam tristique iaculis nibh, non posuere nunc scelerisque eu. Suspendisse dictum velit et felis lacinia ullamcorper.
</article>
<article>
Suspendisse purus ipsum, fermentum ultricies nisl eu, condimentum luctus sem. In bibendum tristique elit, at luctus sem interdum porta. Suspendisse potenti. Cras id tellus at felis egestas pharetra ut eget massa. Aliquam sed euismod dolor. Vestibulum convallis sem vel rhoncus tincidunt. Nunc at dictum purus, sed imperdiet tellus. Suspendisse at justo quis ligula blandit euismod a eget urna. Maecenas quis ligula eget leo iaculis mattis. In et varius tellus. Quisque lacinia magna mi, nec molestie felis condimentum non. Nunc laoreet sem sit amet massa ultrices auctor. Aliquam a convallis lectus, ut sagittis massa.
</article>
<article>
Nullam feugiat porttitor luctus. Vivamus ac imperdiet dui, in venenatis sapien. Maecenas faucibus nunc a ex hendrerit hendrerit eget at nisi. Praesent tempor dictum nulla. Nam mattis fringilla fermentum. Vestibulum iaculis, velit nec viverra consectetur, tellus leo eleifend quam, vel venenatis urna eros nec ipsum. Curabitur lobortis venenatis mauris eu viverra. Donec vel condimentum neque. Aenean molestie lectus a ante facilisis tincidunt. Cras urna purus, porta a lacinia in, varius quis leo. Fusce ligula velit, dapibus non dui nec, pharetra scelerisque nunc. Aliquam ut mattis leo. Maecenas vitae porttitor risus. Nunc euismod viverra condimentum. Aliquam sagittis, nibh quis rutrum tincidunt, purus ligula rhoncus quam, egestas semper nunc ante non mi. Aliquam eget enim aliquet, laoreet leo sit amet, finibus lorem.
</article>
</section>
<section class = "about" id = "about">
<h1>About</h1>
<article>
Suspendisse purus ipsum, fermentum ultricies nisl eu, condimentum luctus sem. In bibendum tristique elit, at luctus sem interdum porta. Suspendisse potenti. Cras id tellus at felis egestas pharetra ut eget massa. Aliquam sed euismod dolor. Vestibulum convallis sem vel rhoncus tincidunt. Nunc at dictum purus, sed imperdiet tellus. Suspendisse at justo quis ligula blandit euismod a eget urna. Maecenas quis ligula eget leo iaculis mattis. In et varius tellus. Quisque lacinia magna mi, nec molestie felis condimentum non. Nunc laoreet sem sit amet massa ultrices auctor. Aliquam a convallis lectus, ut sagittis massa.
</article>
<article>
Nullam feugiat porttitor luctus. Vivamus ac imperdiet dui, in venenatis sapien. Maecenas faucibus nunc a ex hendrerit hendrerit eget at nisi. Praesent tempor dictum nulla. Nam mattis fringilla fermentum. Vestibulum iaculis, velit nec viverra consectetur, tellus leo eleifend quam, vel venenatis urna eros nec ipsum. Curabitur lobortis venenatis mauris eu viverra. Donec vel condimentum neque. Aenean molestie lectus a ante facilisis tincidunt. Cras urna purus, porta a lacinia in, varius quis leo. Fusce ligula velit, dapibus non dui nec, pharetra scelerisque nunc. Aliquam ut mattis leo. Maecenas vitae porttitor risus. Nunc euismod viverra condimentum. Aliquam sagittis, nibh quis rutrum tincidunt, purus ligula rhoncus quam, egestas semper nunc ante non mi. Aliquam eget enim aliquet, laoreet leo sit amet, finibus lorem.
</article>
</section>
<script>
$('.menuIcon').on('click', function() {
$('nav ul').toggleClass('show');
});
$('.aboutLink').on('click', function() {
$('html, body').animate({scrollTop: $('#about').offset().top}, 2000);
});
</script>
</body>
</html>
The text being cut off is due to the two css properties given to the title class
.title
{
overflow:hidden;
height:100vh;
}
100vh means the div will be 100% of the view (usually the browsers) height. As the text spans more lines due to the lines getting thinner, the text will start to overflow. As the overflow of the div is set to hidden the text will be cut off.
This could be considered a fixed height and it is recommended not to give fixed heights to div's with content.
If you remove these two lines of code the text will not be cut off. If you would like to keep the height on larger screens you could use the following code to ensure that the height does not drop under 100vh
min-height:100vh;
#import url('https://fonts.googleapis.com/css?family=Asap');
body, html
{
background-color: #598392;
margin: 0;
padding: 0;
font-family: 'Asap', sans-serif;
height:100%;
}
.menuIcon
{
padding:20px;
display:none;
cursor:pointer;
}
.navigationBar
{
background-color: #124559;
width:100%;
overflow:hidden;
position:fixed;
top: 0;
}
.navigationBar li
{
padding:20px;
display: inline;
list-style-type:none;
}
a
{
color: #EFF6E0;
text-decoration: none;
}
a:hover
{
color: #AEC3B0;
}
nav ul
{
padding: 20px;
margin: 0;
transition: max-height 1s;
}
section h1
{
padding: 75px 0 0 20px;
}
section article
{
padding: 20px;
}
.show
{
display:block;
}
#media only screen and (max-width: 768px)
{
.menuIcon
{
display:block;
}
.navigationBar
{opacity: 0.9;}
.navigationBar li
{
display:block;
padding: 10px;
text-align: center;
}
nav ul
{
max-height: 0;
padding: 0px;
}
.show
{
max-height: 200px;
}
.title article
{
padding: 20px;
}
}
/*
#media only screen and (min-width: 768px)
{
nav ul
{
display: block !important;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type ="text/css" href = "nav.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class = "navigationBar">
<img src = "https://i.imgur.com/nfbKl0W.png" class = "menuIcon">
<ul class = "linkBar">
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li>Media</li>
<li>Miscellaneous</li>
</ul>
</nav>
<section class = "title">
<h1>Welcome</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin facilisis vitae magna quis lacinia. Donec felis velit, consequat at nisi quis, sollicitudin scelerisque quam. Proin metus sapien, lobortis ac lacus a, maximus porttitor magna. Praesent pellentesque felis a consequat semper. Sed commodo gravida elit sit amet interdum. Suspendisse felis tellus, consequat vel varius eu, tincidunt eu elit. Quisque porttitor ultricies risus, at accumsan diam vehicula in. Aliquam sit amet arcu nec dui pretium viverra et eget ipsum. Mauris id diam sem. Etiam pellentesque eleifend odio non sagittis. Phasellus eleifend felis et convallis mollis. Donec eget diam nisl. Nam non molestie mi. Suspendisse vitae efficitur nisl. In ac urna at mi ultrices commodo.
</article>
<article>
Vestibulum quis porttitor nisl, eget tincidunt ante. Ut ac fringilla nulla. Donec cursus est semper sodales mollis. In pellentesque elementum porttitor. Curabitur aliquet velit risus, sed blandit nisl luctus cursus. Vivamus sem massa, cursus vitae ipsum fringilla, feugiat porta tellus. Fusce ac ornare nisi. Maecenas metus nibh, tincidunt vel sem vel, iaculis pharetra sem. Aenean dolor nisl, porta sit amet rutrum et, posuere nec nibh. Pellentesque ante nisi, molestie dignissim porttitor sit amet, dignissim ut magna.
</article>
<article>
Vestibulum congue finibus felis suscipit pellentesque. Nunc pulvinar neque a ipsum molestie, condimentum congue urna hendrerit. Morbi egestas ac velit quis tincidunt. Donec consectetur finibus dui a consequat. Sed varius diam ut dui viverra, a pellentesque nunc molestie. Nullam tristique iaculis nibh, non posuere nunc scelerisque eu. Suspendisse dictum velit et felis lacinia ullamcorper.
</article>
<article>
Suspendisse purus ipsum, fermentum ultricies nisl eu, condimentum luctus sem. In bibendum tristique elit, at luctus sem interdum porta. Suspendisse potenti. Cras id tellus at felis egestas pharetra ut eget massa. Aliquam sed euismod dolor. Vestibulum convallis sem vel rhoncus tincidunt. Nunc at dictum purus, sed imperdiet tellus. Suspendisse at justo quis ligula blandit euismod a eget urna. Maecenas quis ligula eget leo iaculis mattis. In et varius tellus. Quisque lacinia magna mi, nec molestie felis condimentum non. Nunc laoreet sem sit amet massa ultrices auctor. Aliquam a convallis lectus, ut sagittis massa.
</article>
<article>
Nullam feugiat porttitor luctus. Vivamus ac imperdiet dui, in venenatis sapien. Maecenas faucibus nunc a ex hendrerit hendrerit eget at nisi. Praesent tempor dictum nulla. Nam mattis fringilla fermentum. Vestibulum iaculis, velit nec viverra consectetur, tellus leo eleifend quam, vel venenatis urna eros nec ipsum. Curabitur lobortis venenatis mauris eu viverra. Donec vel condimentum neque. Aenean molestie lectus a ante facilisis tincidunt. Cras urna purus, porta a lacinia in, varius quis leo. Fusce ligula velit, dapibus non dui nec, pharetra scelerisque nunc. Aliquam ut mattis leo. Maecenas vitae porttitor risus. Nunc euismod viverra condimentum. Aliquam sagittis, nibh quis rutrum tincidunt, purus ligula rhoncus quam, egestas semper nunc ante non mi. Aliquam eget enim aliquet, laoreet leo sit amet, finibus lorem.
</article>
</section>
<section class = "about" id = "about">
<h1>About</h1>
<article>
Suspendisse purus ipsum, fermentum ultricies nisl eu, condimentum luctus sem. In bibendum tristique elit, at luctus sem interdum porta. Suspendisse potenti. Cras id tellus at felis egestas pharetra ut eget massa. Aliquam sed euismod dolor. Vestibulum convallis sem vel rhoncus tincidunt. Nunc at dictum purus, sed imperdiet tellus. Suspendisse at justo quis ligula blandit euismod a eget urna. Maecenas quis ligula eget leo iaculis mattis. In et varius tellus. Quisque lacinia magna mi, nec molestie felis condimentum non. Nunc laoreet sem sit amet massa ultrices auctor. Aliquam a convallis lectus, ut sagittis massa.
</article>
<article>
Nullam feugiat porttitor luctus. Vivamus ac imperdiet dui, in venenatis sapien. Maecenas faucibus nunc a ex hendrerit hendrerit eget at nisi. Praesent tempor dictum nulla. Nam mattis fringilla fermentum. Vestibulum iaculis, velit nec viverra consectetur, tellus leo eleifend quam, vel venenatis urna eros nec ipsum. Curabitur lobortis venenatis mauris eu viverra. Donec vel condimentum neque. Aenean molestie lectus a ante facilisis tincidunt. Cras urna purus, porta a lacinia in, varius quis leo. Fusce ligula velit, dapibus non dui nec, pharetra scelerisque nunc. Aliquam ut mattis leo. Maecenas vitae porttitor risus. Nunc euismod viverra condimentum. Aliquam sagittis, nibh quis rutrum tincidunt, purus ligula rhoncus quam, egestas semper nunc ante non mi. Aliquam eget enim aliquet, laoreet leo sit amet, finibus lorem.
</article>
</section>
<script>
$('.menuIcon').on('click', function() {
$('nav ul').toggleClass('show');
});
$('.aboutLink').on('click', function() {
$('html, body').animate({scrollTop: $('#about').offset().top}, 2000);
});
</script>
</body>
</html>
I have a div that sticks once scrolled to top of the container - similar to this fiddle I found and have hacked (I appreciate the code is not great but is for the purposes of showing my issue).
I would like the next div to scroll over the previous div, and also stick once it hits the same position. At the minute, I can only get the div to continue scrolling behind, or 'jump', like what it is doing now.
I wish to achieve a scrolling set of divs that each fix at the top of the container, one after the other, on top of one another, rather than continuing to scroll beyond - this is the only option I can come up with so far.
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
$('#sticky-anchor').height($('#sticky').outerHeight());
} else {
$('#sticky').removeClass('stick');
$('#sticky-anchor').height(0);
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky1').addClass('stick');
$('#sticky-anchor').height($('#sticky1').outerHeight());
} else {
$('#sticky1').removeClass('stick');
$('#sticky-anchor').height(0);
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
#sticky,
#sticky1 {
padding: 0.5ex;
width: 400px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky.stick {
margin-top: 0 !important;
position: fixed;
top: 0;
z-index: 1;
border-radius: 0 0 0.5em 0.5em;
}
#sticky1.stick {
margin-top: 0 !important;
position: fixed;
top: 0;
z-index: 2;
border-radius: 0 0 0.5em 0.5em;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<p>...</p>
<div id="sticky-anchor"></div>
<div id="sticky1">This should continue to scroll and stick on top
</div>
<p>...</p>
How about this? Should be at least a start.
https://jsfiddle.net/mqf7h5dz/
HTML:
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top;
$('.sticky').each(function() {
//$(this).find(".scrolling").width( width * imgLength * 1.2 );
div_top = $(this).offset().top;
console.log("Top for this div: ", div_top);
if (window_top > div_top) {
$(this).removeClass('sticky');
$(this).addClass('sticked');
//$(this).height($('.sticky').outerHeight());
$(this).clone().appendTo($('#sticky_container'));
}
});
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
.sticky {
padding: 0.5ex;
width: 400px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
.sticky-header {
padding: 0.5ex;
width: 400px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky_container {
position: fixed;
top: 0;
}
.sticky.stick {
margin-top: 0 !important;
position: fixed;
top: 0;
z-index: 1;
border-radius: 0 0 0.5em 0.5em;
background: red;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sticky_container"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque, lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus. Maecenas lacinia bibendum
accumsan. Curabitur lobortis convallis purus non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat. Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan ullamcorper lorem id porttitor. Aliquam vitae
</p>
<div class="sticky-anchor"></div>
<div class="sticky sticky-header">This will stay at top of page</div>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue.
Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies
eget.
</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue.
Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies
eget.
</p>
<div class="sticky-anchor"></div>
<div class="sticky sticky-header">This should continue to scroll and stick on top
</div>
<p>
Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
sit amet sodales risus leo quis nisi.</p>
<p>
Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
sit amet sodales risus leo quis nisi.</p>
<p>
Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
sit amet sodales risus leo quis nisi.</p>
I have used the iscroll in my page inside one div which has list of users. Scrolling for users list is perfect here but after reaching to the end of the users list, I want to scroll down to the page section after this list which is not covered in iscroll wrapper, like "Other Section of a Page", "page footer". Specially with mobile devices where my page content goes vertically responsive.
Please look at the following HTML page code. I will request that pls see this page in mobile resolution. Copy and paste this HTML code in a file and save it with .html extension and open into browser will recommend firefox.
After opening into the browser please use "ctrl + shift + m" to see the page with small resolution. Now scroll to travel the users list you can use mouse scroll or swipe, but after reaching to the users list end i.e. user 50 i want that other section of a page should be scroll.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>iScroll demo: scrollbars</title>
<script type="text/javascript" src="http://lab.cubiq.org/iscroll5/build/iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded () {
myScroll = new IScroll('#wrapper', {
scrollbars: true,
mouseWheel: true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body,ul,li {
padding: 0;
margin: 0;
border: 0;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
}
#header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background: #CD235C;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
font-weight: bold;
}
#footer {
background: #444 none repeat scroll 0 0;
border-top: 1px solid #444;
height: 48px;
left: 0;
margin-top: 45px;
padding: 0;
position: absolute;
width: 100%;
z-index: 2;
}
p {
font-family: "Times New Roman", Times, serif;
font-style: normal;
font-weight: normal;
font-size: 14px;
letter-spacing: normal;
line-height: normal;
text-transform: none;
text-decoration: none;
text-align: left;
}
#wrapper {
position: relative;
z-index: 1;
top: 45px;
bottom: 48px;
left: 0;
width: 100%;
background: #ccc;
overflow: hidden;
height: 300px;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
}
#scroller li {
padding: 0 10px;
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 18px;
}
</style>
</head>
<body onload="loaded()">
<div id="header">iScroll</div>
<div id="wrapper">
<div id="scroller">
<h2 style="margin-left: 10px;">User Scrollable List with IScroll</h2>
<ul>
<li>User 1</li>
<li>User 2</li>
<li>User 3</li>
<li>User 4</li>
<li>User 5</li>
<li>User 6</li>
<li>User 7</li>
<li>User 8</li>
<li>User 9</li>
<li>User 10</li>
<li>User 11</li>
<li>User 12</li>
<li>User 13</li>
<li>User 14</li>
<li>User 15</li>
<li>User 16</li>
<li>User 17</li>
<li>User 18</li>
<li>User 19</li>
<li>User 20</li>
<li>User 21</li>
<li>User 22</li>
<li>User 23</li>
<li>User 24</li>
<li>User 25</li>
<li>User 26</li>
<li>User 27</li>
<li>User 28</li>
<li>User 29</li>
<li>User 30</li>
<li>User 31</li>
<li>User 32</li>
<li>User 33</li>
<li>User 34</li>
<li>User 35</li>
<li>User 36</li>
<li>User 37</li>
<li>User 38</li>
<li>User 39</li>
<li>User 40</li>
<li>User 41</li>
<li>User 42</li>
<li>User 43</li>
<li>User 44</li>
<li>User 45</li>
<li>User 46</li>
<li>User 47</li>
<li>User 48</li>
<li>User 49</li>
<li>User 50</li>
</ul>
</div>
</div>
<hr>
<div style="padding: 10px; top: 50px; position: relative;">
<h2>Other Section of a Page</h2>
<p>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. 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. 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. 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. 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. 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. 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.</p>
</div>
<div id="footer"></div>
</body>
</html>
You can make the other section of your page scroll by changing your current styling of it to
<div style="padding: 10px; top: 50px; height: 70vh; overflow-y:scroll; position: relative;">
You can tweak the 70vh to 65 or whatever but that's basically how you will solve the problem.
here is a fiddle http://jsfiddle.net/5s1u36wg/
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">