Menu Fixed with Pure Javascript

Question

Menu Fixed with Pure Javascript

Navigation

#1 by (1 votes)

1

I have a menu in jQuery that is fixed when scrolling the scroll up. Works well. Now I would like to have the same effect, except with pure javascript.

Example of menu in jquery: link

$window 		  = jQuery(window);    
var $fixed_enabled = jQuery(".primary-nav.fixed-enabled");
    if ($fixed_enabled.length > 0) {
            jQuery(function() {
                var navScroll_1 = jQuery(document).scrollTop();
                var headerHeight = $fixed_enabled.offset().top;

                $window.scroll(function() {
                    var navScroll_2 = jQuery(document).scrollTop();

                    if (navScroll_2 > headerHeight) { $fixed_enabled.addClass('fixed-nav'); } else { $fixed_enabled.removeClass('fixed-nav'); }

                    if (navScroll_2 > navScroll_1) { $fixed_enabled.removeClass('fixed-nav-appear'); } else { $fixed_enabled.addClass('fixed-nav-appear'); }

                    navScroll_1 = jQuery(document).scrollTop();
                });
            });
    }

header:after, {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: " ";
}
header {
  width:100%;
  margin:0;
  padding:0;
  display:block;
  position:relative;
}
.header-content{background:#ddd;
padding:20px;}
.header-content h1 {
  padding:0;
  margin:0;
}
.primary-nav {
  position:relative;
  min-height:40px;
  background: #30A6E6;
}



.primary-nav ul, .primary-nav li {
	margin: 0;
	padding: 0;
}
.primary-nav ul {
	background: gray;
	list-style: none;
	width: 100%;
}
.primary-nav li {
	float: left;
	position: relative;
	width:auto;
}
.primary-nav a {
	color: #FFFFFF;
	display: block;
	font: bold 12px/20px sans-serif;
	padding: 10px 25px;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
.primary-nav li:hover a {
	background: #000000;
}
#submenu {
	left: 0;
	opacity: 0;
	position: absolute;
	top: 35px;
	visibility: hidden;
	z-index: 1;
}
li:hover ul#submenu {
	opacity: 1;
	top: 40px;	/* adjust this as per top nav padding top & bottom comes */
	visibility: visible;
}
#submenu li {
	float: none;
	width: 100%;
}
#submenu a:hover {
	background: #DF4B05;
}
#submenu a {
	background-color:#000000;
}

/* Fixed Nav */
.fixed-nav {
	position: fixed;
	top: -90px;
	width: 100%;
	z-index: 9999;
	opacity: 0.95;
	-webkit-transition: top .5s;
	   -moz-transition: top .5s;
		 -o-transition: top .5s;
			transition: top .5s;

	-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
	   -moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
			box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
}

.fixed-nav-appear {
  top: 0;
}
.nav-logo  {
  background:#AAA;
  display:none
}
.fixed-nav-appear.fixed-nav .nav-logo {
  display:block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><header><divclass="header-content">
    <h1>JQUERY FIXED NAV</h1>
  </div>
  <nav class="primary-nav fixed-enabled">
    <ul>
      <li class="nav-logo"><a href="#">jQuery Sticky NAV</a></li>
      <li><a href="#">Home</a></li>
    <li><a href="#">Sub</a>
      <ul id="submenu">
        <li><a href="#">Difference between SVG vs. Canvas</a></li>
        <li><a href="#">New features in HTML5</a></li>
        <li><a href="#">Creating links to sections within a webpage</a></li>
      </ul>
    </li>
    <li><a href="#">News</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo. Praesent eu ex ligula. Aenean hendrerit pretium odio, nec pretium nisl ornare vitae. Vestibulum vel velit non tortor tristique fermentum ac et turpis. Sed tristique tempor arcu sit amet facilisis. Cras accumsan condimentum urna id tincidunt. Sed sem eros, cursus in dapibus a, viverra id lorem. Vivamus ultricies ullamcorper nisi ut porta. Aenean eget justo eu turpis auctor gravida.
</p>
<p>
Mauris in metus vitae libero laoreet malesuada vel a turpis. Sed tincidunt, arcu quis commodo auctor, purus erat egestas metus, luctus tempor orci quam sed augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rutrum tellus at augue elementum sollicitudin. Ut sed mattis diam. Morbi tellus urna, vulputate ac mi nec, dictum tempus nunc. Nulla lobortis vitae lectus in sollicitudin.
</p>
<p>
Fusce quis risus ut felis laoreet finibus. Mauris gravida ante non quam rutrum, a dictum eros bibendum. Aliquam non euismod lacus, sed rutrum massa. Fusce in diam eu elit elementum rhoncus. Vivamus dignissim rhoncus cursus. Vivamus et nibh eu metus vestibulum lobortis. Donec augue nisl, ornare vel mi non, luctus aliquet ligula. Sed vitae euismod orci, in vestibulum dui. Sed condimentum ex arcu, et vulputate sem condimentum sed. Etiam faucibus ante sit amet enim sagittis, nec blandit orci malesuada. Aliquam quam lorem, vehicula eget malesuada et, volutpat id est. Quisque vitae ante quis erat blandit tempus.
</p>
<p>
Phasellus imperdiet dignissim felis ultricies lobortis. Maecenas in feugiat quam, feugiat vehicula diam. Maecenas sit amet enim lorem. Pellentesque sed mi dictum, mollis ligula eu, efficitur nisl. Donec egestas lorem a tempor commodo. Aenean ultricies at nisi quis dignissim. Curabitur lacinia, augue quis interdum tempus, erat magna hendrerit risus, et ullamcorper felis nunc non arcu. Nam suscipit pellentesque ante, vitae sollicitudin lacus volutpat eu. Donec suscipit, sem sed fringilla elementum, orci tortor pulvinar enim, eget blandit nulla nulla et lacus. Duis molestie bibendum turpis, at lobortis enim accumsan vitae. Suspendisse pellentesque quam in metus porta, ac dignissim leo consequat. Curabitur tortor arcu, ultricies sit amet malesuada eget, auctor a diam.
</p>
<p>
Pellentesque convallis enim at massa mattis accumsan. Suspendisse non venenatis ligula, id molestie dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer at mauris vel tortor maximus lacinia rutrum sit amet tellus. Ut sit amet orci egestas, molestie sem eget, luctus nulla. Praesent imperdiet eros at volutpat ullamcorper. Maecenas bibendum semper nulla ac auctor. Aliquam rutrum nibh quis magna accumsan lobortis.
</p>
<p>
Maecenas fermentum enim a eros efficitur, id rutrum magna consequat. Quisque dignissim, nunc in faucibus volutpat, risus dolor eleifend ligula, eu malesuada orci leo sit amet ipsum. In enim magna, congue id sodales vel, condimentum ac orci. Ut malesuada lorem eget orci faucibus, molestie euismod metus mattis. Nullam ornare interdum iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ut ex vestibulum, semper mauris id, pulvinar nisi. Phasellus a consectetur nisl.
</p>
<p>
Mauris libero ligula, egestas quis ullamcorper vitae, ultrices non est. Donec id pulvinar mauris. Vestibulum eget rhoncus justo. Aenean sodales tellus turpis, mattis pellentesque libero vehicula ac. Vestibulum porttitor convallis rhoncus. Suspendisse id lorem ac odio facilisis porttitor. Aenean vestibulum tristique risus, id semper erat tempus id. Aliquam nec felis sit amet mauris egestas auctor.
</p>
<p>
Sed blandit mattis magna, a hendrerit lorem sagittis ac. Ut vel sapien eu elit tempus tincidunt non eu nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer diam nisi, vulputate nec justo quis, efficitur dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet luctus elit. Aenean fringilla malesuada dolor sed scelerisque. Fusce eu sollicitudin dolor. Ut consectetur id dolor pulvinar euismod. Quisque consectetur a risus sit amet facilisis. Phasellus in convallis tortor. Cras ut iaculis tortor. Proin id sapien non eros gravida dignissim.
</p>
<p>
Proin non mattis purus. Proin id orci ut nibh faucibus sagittis ac varius nulla. Vivamus id elit ultricies, porta leo ac, viverra risus. Suspendisse ut pretium orci, non ullamcorper diam. Donec dolor eros, posuere at eros sed, accumsan vulputate sapien. Donec dignissim mattis urna, eu posuere eros sodales eget. Phasellus non eros ut quam porta maximus. Aliquam erat volutpat. Maecenas a pellentesque ligula.
</p>
<p>
Aliquam erat volutpat. Ut tempus tortor nisl, non lobortis nisl sagittis in. Aliquam interdum diam ac tincidunt lacinia. Fusce sodales neque lacus, sit amet laoreet ex rhoncus consectetur. Maecenas scelerisque nulla quis nibh aliquet eleifend. Donec ac elit imperdiet, rhoncus est a, euismod lorem. Ut varius auctor malesuada. Vestibulum pellentesque bibendum lobortis. Suspendisse potenti. Mauris porta aliquet dolor, id sollicitudin ex auctor at. Sed bibendum nec lacus vitae dapibus.
</p>
<p>
Nullam molestie dolor eu metus porta, vulputate condimentum metus volutpat. Integer mattis, arcu id vehicula commodo, quam dui fringilla est, in convallis erat purus sed metus. Suspendisse sed dolor quis nulla sagittis sollicitudin dignissim hendrerit odio. Vivamus quis lorem quis lectus posuere blandit. Fusce pharetra lacus dignissim odio dapibus, sed lacinia tortor faucibus. Curabitur sollicitudin, libero ac elementum porta, diam erat facilisis turpis, id ultrices nisl tellus at neque. Suspendisse sed mauris aliquet metus dapibus rutrum eget eu mauris. Nam augue lectus, facilisis eget vulputate at, ornare ut nunc. Vivamus aliquet ac ligula at sagittis. Nullam et tortor et sem volutpat commodo sit amet vel metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla lacinia lorem et ante porttitor fermentum. Vivamus vulputate nisl consectetur, consequat magna in, sodales arcu. Praesent tempus efficitur hendrerit.
</p>
<p>
In sed suscipit justo, sed efficitur nibh. Donec imperdiet cursus sem, et convallis justo. Ut ornare rhoncus leo, ut sodales augue elementum nec. Donec euismod ullamcorper fermentum. Etiam augue dui, varius non magna et, pulvinar ornare ligula. Nunc sagittis enim libero, ut feugiat augue pharetra lobortis. Vestibulum eu suscipit mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam scelerisque pretium sollicitudin.
</p>
<p>
Quisque quam dolor, vestibulum sed purus eget, porta ornare lorem. Phasellus placerat interdum dictum. Cras elementum ullamcorper massa, sed lobortis leo volutpat nec. Duis sapien massa, faucibus non justo eu, auctor accumsan mauris. Sed aliquam accumsan tellus quis commodo. Pellentesque at augue nec nibh viverra congue. Duis quis mollis purus. Etiam mattis massa id ornare commodo. Phasellus gravida eros in nibh dictum, sed placerat eros cursus. Phasellus consectetur ligula vel tortor vestibulum, a aliquet lorem bibendum. Sed sed neque id enim tempor dignissim vel vel nulla.
</p>
<p>
Fusce eget convallis odio. Suspendisse potenti. Aliquam at turpis a turpis iaculis cursus in eget tortor. Maecenas iaculis congue hendrerit. In tincidunt massa id pretium lobortis. Sed vel nisl sagittis, dictum diam sit amet, varius sem. Nulla massa massa, porta nec dignissim sagittis, dapibus et metus. Integer viverra tellus ligula, quis convallis nibh dapibus eget. Donec ac egestas nulla, ut iaculis dolor. Suspendisse vel rutrum enim. Fusce quis ligula non nibh aliquet pharetra. Morbi varius est dolor, in efficitur nulla rutrum quis. Etiam dapibus sapien et turpis dignissim tempor. Duis pulvinar dolor vitae eros volutpat, sed venenatis lorem pharetra.
</p>
<p>
Aenean ut diam sapien. Fusce tincidunt justo eget nisi porttitor, et maximus sem egestas. Vestibulum quis est libero. Nullam mattis felis nulla, nec gravida sem facilisis a. Nunc placerat odio non odio dignissim, a cursus enim vulputate. Integer non maximus risus. Suspendisse sed pellentesque dolor. Aenean blandit eleifend sem vitae varius. Curabitur sit amet nulla a libero luctus finibus lacinia sit amet nisi. Aenean vitae tristique tortor. Donec sit amet justo et leo accumsan porttitor. Curabitur mollis, ligula non blandit scelerisque, sapien tortor tempor tortor, nec vulputate metus mi eget nibh. Phasellus sollicitudin massa id eleifend consectetur. Nam sed ante nec diam faucibus maximus sodales non erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam nec nulla vitae turpis aliquam volutpat non eget nisl.
</p>
<p>
Proin ac sagittis dolor. Vestibulum imperdiet blandit metus, vel malesuada ipsum ultricies a. Aenean sed dui commodo, imperdiet lectus eu, facilisis leo. Fusce ullamcorper interdum semper. Nullam eget lorem risus. Proin ut tellus neque. Proin consectetur erat in tempus volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean augue mauris, vestibulum et bibendum non, pellentesque eget mauris. Pellentesque quis scelerisque felis. Proin fermentum porttitor mauris, nec lacinia nisl imperdiet eget. Maecenas pulvinar neque ac quam tempus consequat. Sed vestibulum sed diam vel interdum. Quisque posuere posuere arcu, eget laoreet mi sodales at. Quisque egestas vestibulum massa ut condimentum.
</p>
<p>
Aenean malesuada, risus sit amet lacinia pellentesque, arcu velit fermentum turpis, dictum sodales metus neque ultricies dolor. Praesent id pharetra mauris, vitae mattis odio. Mauris auctor sapien libero, vitae sodales justo pretium non. Sed iaculis tristique lacinia. Morbi eu massa non ante fermentum sollicitudin eget vel nisl. Nunc erat sem, posuere et laoreet cursus, suscipit quis nunc. Proin finibus nunc eu nibh tempus, et semper eros facilisis. Pellentesque rhoncus magna mauris, nec convallis ipsum maximus viverra.
</p>
<p>
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sit amet rhoncus dui. Nulla facilisi. Nunc urna risus, dictum vitae ullamcorper sit amet, volutpat sed neque. Nam aliquam blandit massa, sit amet vulputate odio pharetra vitae. Cras vehicula aliquam mauris, non hendrerit nibh gravida at. Aenean in risus id magna vestibulum gravida. Donec volutpat pretium odio, eget mollis dolor fermentum vitae. Vestibulum at quam sit amet augue rutrum vulputate vel non nisl.
</p>
<p>
Phasellus facilisis ligula eget scelerisque pulvinar. Phasellus gravida tempus ligula. Pellentesque non odio dolor. Nulla id nulla orci. In vehicula convallis libero quis consectetur. Phasellus luctus pulvinar risus. Fusce in metus vel ante ornare vulputate id vehicula ex. Vivamus sit amet nisi mollis, luctus eros eu, semper elit. Curabitur porttitor nunc sit amet pellentesque semper. Nulla hendrerit accumsan vehicula. Etiam nec arcu nisi. Vivamus suscipit purus leo, id lobortis ligula pellentesque vitae. Fusce eleifend commodo congue. Aenean a felis vitae dolor finibus scelerisque.
</p>
<p>
Aliquam non ante vitae eros efficitur porttitor non eu risus. Curabitur mattis turpis sed quam sagittis consequat. Aenean fermentum risus ac elit volutpat interdum. Duis semper euismod malesuada. Nunc luctus ante nec turpis sagittis, vel viverra orci consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer commodo diam vel risus fringilla interdum ac luctus libero. Nam non sapien sed justo mollis imperdiet.
</p>
</main>

javascript jquery

asked by anonymous 18.04.2018 / 17:11

1 answer

What's the difference between these forms of command execution? Function operation fork ()

score 1 · Accepted Answer

Follow the converted code for pure JS ( cross-browser ):

var fixed_enabled = document.body.querySelector(".primary-nav.fixed-enabled");
if(fixed_enabled){
   
   (function(){
      var navScroll_1 = window.pageYOffset || window.scrollY || window.scrollTop;
      var headerHeight = fixed_enabled.offsetTop;
      
      window.onscroll = function(){
         
         var navScroll_2 = window.pageYOffset || window.scrollY || window.scrollTop;
         
         if(navScroll_2 > headerHeight){ fixed_enabled.classList.add("fixed-nav"); }else{ fixed_enabled.classList.remove("fixed-nav"); }

         if(navScroll_2 > navScroll_1){ fixed_enabled.classList.remove("fixed-nav-appear"); }else{ fixed_enabled.classList.add("fixed-nav-appear"); }
         
         navScroll_1 = window.pageYOffset || window.scrollY || window.scrollTop;
      }
      
   })();
   
}

header:after, {
	display: block;
	visibility: hidden;
	clear: both;
	height: 0;
	content: " ";
}
header {
  width:100%;
  margin:0;
  padding:0;
  display:block;
  position:relative;
}
.header-content{background:#ddd;
padding:20px;}
.header-content h1 {
  padding:0;
  margin:0;
}
.primary-nav {
  position:relative;
  min-height:40px;
  background: #30A6E6;
}



.primary-nav ul, .primary-nav li {
	margin: 0;
	padding: 0;
}
.primary-nav ul {
	background: gray;
	list-style: none;
	width: 100%;
}
.primary-nav li {
	float: left;
	position: relative;
	width:auto;
}
.primary-nav a {
	color: #FFFFFF;
	display: block;
	font: bold 12px/20px sans-serif;
	padding: 10px 25px;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
.primary-nav li:hover a {
	background: #000000;
}
#submenu {
	left: 0;
	opacity: 0;
	position: absolute;
	top: 35px;
	visibility: hidden;
	z-index: 1;
}
li:hover ul#submenu {
	opacity: 1;
	top: 40px;	/* adjust this as per top nav padding top & bottom comes */
	visibility: visible;
}
#submenu li {
	float: none;
	width: 100%;
}
#submenu a:hover {
	background: #DF4B05;
}
#submenu a {
	background-color:#000000;
}

/* Fixed Nav */
.fixed-nav {
	position: fixed;
	top: -90px;
	width: 100%;
	z-index: 9999;
	opacity: 0.95;
	-webkit-transition: top .5s;
	   -moz-transition: top .5s;
		 -o-transition: top .5s;
			transition: top .5s;

	-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
	   -moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
			box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
}

.fixed-nav-appear {
  top: 0;
}
.nav-logo  {
  background:#AAA;
  display:none
}
.fixed-nav-appear.fixed-nav .nav-logo {
  display:block
}

<header>
  <div class="header-content">
    <h1>JQUERY FIXED NAV</h1>
  </div>
  <nav class="primary-nav fixed-enabled">
    <ul>
      <li class="nav-logo"><a href="#">jQuery Sticky NAV</a></li>
      <li><a href="#">Home</a></li>
    <li><a href="#">Sub</a>
      <ul id="submenu">
        <li><a href="#">Difference between SVG vs. Canvas</a></li>
        <li><a href="#">New features in HTML5</a></li>
        <li><a href="#">Creating links to sections within a webpage</a></li>
      </ul>
    </li>
    <li><a href="#">News</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo. Praesent eu ex ligula. Aenean hendrerit pretium odio, nec pretium nisl ornare vitae. Vestibulum vel velit non tortor tristique fermentum ac et turpis. Sed tristique tempor arcu sit amet facilisis. Cras accumsan condimentum urna id tincidunt. Sed sem eros, cursus in dapibus a, viverra id lorem. Vivamus ultricies ullamcorper nisi ut porta. Aenean eget justo eu turpis auctor gravida.
</p>
<p>
Mauris in metus vitae libero laoreet malesuada vel a turpis. Sed tincidunt, arcu quis commodo auctor, purus erat egestas metus, luctus tempor orci quam sed augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer rutrum tellus at augue elementum sollicitudin. Ut sed mattis diam. Morbi tellus urna, vulputate ac mi nec, dictum tempus nunc. Nulla lobortis vitae lectus in sollicitudin.
</p>
<p>
Fusce quis risus ut felis laoreet finibus. Mauris gravida ante non quam rutrum, a dictum eros bibendum. Aliquam non euismod lacus, sed rutrum massa. Fusce in diam eu elit elementum rhoncus. Vivamus dignissim rhoncus cursus. Vivamus et nibh eu metus vestibulum lobortis. Donec augue nisl, ornare vel mi non, luctus aliquet ligula. Sed vitae euismod orci, in vestibulum dui. Sed condimentum ex arcu, et vulputate sem condimentum sed. Etiam faucibus ante sit amet enim sagittis, nec blandit orci malesuada. Aliquam quam lorem, vehicula eget malesuada et, volutpat id est. Quisque vitae ante quis erat blandit tempus.
</p>
<p>
Phasellus imperdiet dignissim felis ultricies lobortis. Maecenas in feugiat quam, feugiat vehicula diam. Maecenas sit amet enim lorem. Pellentesque sed mi dictum, mollis ligula eu, efficitur nisl. Donec egestas lorem a tempor commodo. Aenean ultricies at nisi quis dignissim. Curabitur lacinia, augue quis interdum tempus, erat magna hendrerit risus, et ullamcorper felis nunc non arcu. Nam suscipit pellentesque ante, vitae sollicitudin lacus volutpat eu. Donec suscipit, sem sed fringilla elementum, orci tortor pulvinar enim, eget blandit nulla nulla et lacus. Duis molestie bibendum turpis, at lobortis enim accumsan vitae. Suspendisse pellentesque quam in metus porta, ac dignissim leo consequat. Curabitur tortor arcu, ultricies sit amet malesuada eget, auctor a diam.
</p>
<p>
Pellentesque convallis enim at massa mattis accumsan. Suspendisse non venenatis ligula, id molestie dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer at mauris vel tortor maximus lacinia rutrum sit amet tellus. Ut sit amet orci egestas, molestie sem eget, luctus nulla. Praesent imperdiet eros at volutpat ullamcorper. Maecenas bibendum semper nulla ac auctor. Aliquam rutrum nibh quis magna accumsan lobortis.
</p>
<p>
Maecenas fermentum enim a eros efficitur, id rutrum magna consequat. Quisque dignissim, nunc in faucibus volutpat, risus dolor eleifend ligula, eu malesuada orci leo sit amet ipsum. In enim magna, congue id sodales vel, condimentum ac orci. Ut malesuada lorem eget orci faucibus, molestie euismod metus mattis. Nullam ornare interdum iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ut ex vestibulum, semper mauris id, pulvinar nisi. Phasellus a consectetur nisl.
</p>
<p>
Mauris libero ligula, egestas quis ullamcorper vitae, ultrices non est. Donec id pulvinar mauris. Vestibulum eget rhoncus justo. Aenean sodales tellus turpis, mattis pellentesque libero vehicula ac. Vestibulum porttitor convallis rhoncus. Suspendisse id lorem ac odio facilisis porttitor. Aenean vestibulum tristique risus, id semper erat tempus id. Aliquam nec felis sit amet mauris egestas auctor.
</p>
<p>
Sed blandit mattis magna, a hendrerit lorem sagittis ac. Ut vel sapien eu elit tempus tincidunt non eu nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer diam nisi, vulputate nec justo quis, efficitur dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet luctus elit. Aenean fringilla malesuada dolor sed scelerisque. Fusce eu sollicitudin dolor. Ut consectetur id dolor pulvinar euismod. Quisque consectetur a risus sit amet facilisis. Phasellus in convallis tortor. Cras ut iaculis tortor. Proin id sapien non eros gravida dignissim.
</p>
<p>
Proin non mattis purus. Proin id orci ut nibh faucibus sagittis ac varius nulla. Vivamus id elit ultricies, porta leo ac, viverra risus. Suspendisse ut pretium orci, non ullamcorper diam. Donec dolor eros, posuere at eros sed, accumsan vulputate sapien. Donec dignissim mattis urna, eu posuere eros sodales eget. Phasellus non eros ut quam porta maximus. Aliquam erat volutpat. Maecenas a pellentesque ligula.
</p>
<p>
Aliquam erat volutpat. Ut tempus tortor nisl, non lobortis nisl sagittis in. Aliquam interdum diam ac tincidunt lacinia. Fusce sodales neque lacus, sit amet laoreet ex rhoncus consectetur. Maecenas scelerisque nulla quis nibh aliquet eleifend. Donec ac elit imperdiet, rhoncus est a, euismod lorem. Ut varius auctor malesuada. Vestibulum pellentesque bibendum lobortis. Suspendisse potenti. Mauris porta aliquet dolor, id sollicitudin ex auctor at. Sed bibendum nec lacus vitae dapibus.
</p>
<p>
Nullam molestie dolor eu metus porta, vulputate condimentum metus volutpat. Integer mattis, arcu id vehicula commodo, quam dui fringilla est, in convallis erat purus sed metus. Suspendisse sed dolor quis nulla sagittis sollicitudin dignissim hendrerit odio. Vivamus quis lorem quis lectus posuere blandit. Fusce pharetra lacus dignissim odio dapibus, sed lacinia tortor faucibus. Curabitur sollicitudin, libero ac elementum porta, diam erat facilisis turpis, id ultrices nisl tellus at neque. Suspendisse sed mauris aliquet metus dapibus rutrum eget eu mauris. Nam augue lectus, facilisis eget vulputate at, ornare ut nunc. Vivamus aliquet ac ligula at sagittis. Nullam et tortor et sem volutpat commodo sit amet vel metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla lacinia lorem et ante porttitor fermentum. Vivamus vulputate nisl consectetur, consequat magna in, sodales arcu. Praesent tempus efficitur hendrerit.
</p>
<p>
In sed suscipit justo, sed efficitur nibh. Donec imperdiet cursus sem, et convallis justo. Ut ornare rhoncus leo, ut sodales augue elementum nec. Donec euismod ullamcorper fermentum. Etiam augue dui, varius non magna et, pulvinar ornare ligula. Nunc sagittis enim libero, ut feugiat augue pharetra lobortis. Vestibulum eu suscipit mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam scelerisque pretium sollicitudin.
</p>
<p>
Quisque quam dolor, vestibulum sed purus eget, porta ornare lorem. Phasellus placerat interdum dictum. Cras elementum ullamcorper massa, sed lobortis leo volutpat nec. Duis sapien massa, faucibus non justo eu, auctor accumsan mauris. Sed aliquam accumsan tellus quis commodo. Pellentesque at augue nec nibh viverra congue. Duis quis mollis purus. Etiam mattis massa id ornare commodo. Phasellus gravida eros in nibh dictum, sed placerat eros cursus. Phasellus consectetur ligula vel tortor vestibulum, a aliquet lorem bibendum. Sed sed neque id enim tempor dignissim vel vel nulla.
</p>
<p>
Fusce eget convallis odio. Suspendisse potenti. Aliquam at turpis a turpis iaculis cursus in eget tortor. Maecenas iaculis congue hendrerit. In tincidunt massa id pretium lobortis. Sed vel nisl sagittis, dictum diam sit amet, varius sem. Nulla massa massa, porta nec dignissim sagittis, dapibus et metus. Integer viverra tellus ligula, quis convallis nibh dapibus eget. Donec ac egestas nulla, ut iaculis dolor. Suspendisse vel rutrum enim. Fusce quis ligula non nibh aliquet pharetra. Morbi varius est dolor, in efficitur nulla rutrum quis. Etiam dapibus sapien et turpis dignissim tempor. Duis pulvinar dolor vitae eros volutpat, sed venenatis lorem pharetra.
</p>
<p>
Aenean ut diam sapien. Fusce tincidunt justo eget nisi porttitor, et maximus sem egestas. Vestibulum quis est libero. Nullam mattis felis nulla, nec gravida sem facilisis a. Nunc placerat odio non odio dignissim, a cursus enim vulputate. Integer non maximus risus. Suspendisse sed pellentesque dolor. Aenean blandit eleifend sem vitae varius. Curabitur sit amet nulla a libero luctus finibus lacinia sit amet nisi. Aenean vitae tristique tortor. Donec sit amet justo et leo accumsan porttitor. Curabitur mollis, ligula non blandit scelerisque, sapien tortor tempor tortor, nec vulputate metus mi eget nibh. Phasellus sollicitudin massa id eleifend consectetur. Nam sed ante nec diam faucibus maximus sodales non erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam nec nulla vitae turpis aliquam volutpat non eget nisl.
</p>
<p>
Proin ac sagittis dolor. Vestibulum imperdiet blandit metus, vel malesuada ipsum ultricies a. Aenean sed dui commodo, imperdiet lectus eu, facilisis leo. Fusce ullamcorper interdum semper. Nullam eget lorem risus. Proin ut tellus neque. Proin consectetur erat in tempus volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean augue mauris, vestibulum et bibendum non, pellentesque eget mauris. Pellentesque quis scelerisque felis. Proin fermentum porttitor mauris, nec lacinia nisl imperdiet eget. Maecenas pulvinar neque ac quam tempus consequat. Sed vestibulum sed diam vel interdum. Quisque posuere posuere arcu, eget laoreet mi sodales at. Quisque egestas vestibulum massa ut condimentum.
</p>
<p>
Aenean malesuada, risus sit amet lacinia pellentesque, arcu velit fermentum turpis, dictum sodales metus neque ultricies dolor. Praesent id pharetra mauris, vitae mattis odio. Mauris auctor sapien libero, vitae sodales justo pretium non. Sed iaculis tristique lacinia. Morbi eu massa non ante fermentum sollicitudin eget vel nisl. Nunc erat sem, posuere et laoreet cursus, suscipit quis nunc. Proin finibus nunc eu nibh tempus, et semper eros facilisis. Pellentesque rhoncus magna mauris, nec convallis ipsum maximus viverra.
</p>
<p>
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sit amet rhoncus dui. Nulla facilisi. Nunc urna risus, dictum vitae ullamcorper sit amet, volutpat sed neque. Nam aliquam blandit massa, sit amet vulputate odio pharetra vitae. Cras vehicula aliquam mauris, non hendrerit nibh gravida at. Aenean in risus id magna vestibulum gravida. Donec volutpat pretium odio, eget mollis dolor fermentum vitae. Vestibulum at quam sit amet augue rutrum vulputate vel non nisl.
</p>
<p>
Phasellus facilisis ligula eget scelerisque pulvinar. Phasellus gravida tempus ligula. Pellentesque non odio dolor. Nulla id nulla orci. In vehicula convallis libero quis consectetur. Phasellus luctus pulvinar risus. Fusce in metus vel ante ornare vulputate id vehicula ex. Vivamus sit amet nisi mollis, luctus eros eu, semper elit. Curabitur porttitor nunc sit amet pellentesque semper. Nulla hendrerit accumsan vehicula. Etiam nec arcu nisi. Vivamus suscipit purus leo, id lobortis ligula pellentesque vitae. Fusce eleifend commodo congue. Aenean a felis vitae dolor finibus scelerisque.
</p>
<p>
Aliquam non ante vitae eros efficitur porttitor non eu risus. Curabitur mattis turpis sed quam sagittis consequat. Aenean fermentum risus ac elit volutpat interdum. Duis semper euismod malesuada. Nunc luctus ante nec turpis sagittis, vel viverra orci consectetur. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer commodo diam vel risus fringilla interdum ac luctus libero. Nam non sapien sed justo mollis imperdiet.
</p>
</main>