CSS and HTML 5 – Sticky Position – Eli the Computer Guy

By setting the Position Attribute to “Sticky” it will allow the element to stay at the same location as you scroll through an HTML page.

stickyStyle.css

.stickyDiv {
	position: sticky;
	top: 0px;
	background-color: lightgrey;
	
}

.mainDiv {
	position: relative;
	top: 0px;
	margin-left: 10%;
	margin-right:10%;
}

sticky.html

<html>
<head>
<link rel="stylesheet" href="stickyStyle.css" />
</head>
<body>

<div class="stickyDiv"> 
<h1>Sticky Stuff</h1>
<p>This is where you can put stuff that you want to remain on the screen while users scroll thourgh your html document</p>
</div>

<div class="mainDiv">
Lorem ipsum dolor sit amet, justo justo mauris id facilisis maecenas. Id cras sit nunc semper cras tempor, sapien vulputate sociis est potenti nunc, erat a viverra malesuada lobortis nulla, id molestie nam nulla. Lacus vestibulum penatibus, wisi pede nobis ante orci congue, ut ut, pretium arcu condimentum ipsum ultricies ante. Ultrices at, ligula proin aliquam sagittis mattis, suspendisse phasellus risus vitae, et pede dolor lorem arcu, lorem dictum congue feugiat nulla. Sed nulla, sed condimentum, gravida maecenas mauris. Proin venenatis praesent id donec, nascetur platea orci arcu. Sapien saepe conubia, sed vel cras cras nulla risus leo.
Gravida vestibulum eu tellus est lectus odio, nunc nulla dictum nec metus, id vel eros vel tristique ac urna, libero in dis aliquam ut. Elit mauris nunc, luctus nunc, magna vel est metus quis, erat laoreet eleifend vestibulum pellentesque, a vivamus mauris non sed mus pellentesque. Tellus vestibulum nunc aenean. Nulla erat volutpat lectus cras est eget. Eget eu justo sem sit, pretium fermentum in nisl sem metus sit, aliquet leo ac nec sed condimentum in. Odio dis consequat donec turpis, eu consectetuer ullamcorper morbi leo duis, donec imperdiet egestas eu turpis, adipiscing fames vivamus venenatis ornare odio donec, et sodales sapien at wisi in. Adipiscing vestibulum, tincidunt elit lorem nunc turpis quis, pede elementum ut non ipsum at ac, nisl at lacus euismod at mauris. Ultrices dictum pretium adipiscing wisi. Tempus vitae, inceptos vivamus tempor mollis amet pede at, cursus in nisl, veniam lacinia semper. Consectetuer aliquam vulputate cras sequi velit tortor, elit nulla amet ut aenean enim phasellus. Scelerisque vestibulum sem lorem vehicula libero.
Tellus proin, amet integer orci, wisi risus donec aliquet tincidunt sit donec, urna dui suspendisse ultrices, mi mi adipiscing. Amet duis bibendum a egestas commodo, integer in, quam feugiat convallis inceptos pede nunc. Elementum nullam massa cubilia porttitor, sed curabitur vulputate, pharetra diam quis sunt ipsum tincidunt ultricies. Nunc sit aliquet ac non neque, arcu cras arcu elementum in, semper fermentum elementum dolor. Mauris tellus nulla quasi quisque, nibh ut tellus, donec ut fermentum, nam purus suspendisse. Donec eget non, sit aptent elit ut ut ac, etiam quis arcu a lorem purus nunc. Scelerisque in eu pretium, wisi sit porttitor posuere dui quis, a in nonummy lacus lorem lorem lobortis, arcu erat. A lorem eget, ridiculus quam sit, porttitor suspendisse ac at mi.
Velit posuere rutrum justo viverra tincidunt. Nunc sit in dolor, malesuada donec. Velit laoreet faucibus, dolor vel, cursus id ac nec donec adipisicing, vestibulum suspendisse bibendum placerat, sed in consectetuer. Proin ab tellus vel erat fringilla, sed dolor et pellentesque, turpis ac lacus interdum nibh, nulla minima ut aptent, ac in feugiat viverra in posuere. Ornare felis ut vestibulum, ac hymenaeos ut ante praesent, pede eget. Nec sapien rutrum aliquet magnis ultrices habitant, faucibus facilisis elit odio eu, ut amet duis gravida feugiat nec id, lectus mi, quam wisi. Id pulvinar neque, donec libero, integer exercitation, sociis facilisis erat justo. Morbi etiam, vestibulum ac, suspendisse enim placerat nibh duis nulla adipiscing, quis urna in nulla tellus vulputate.
+
</div>

</body>
</html>