6
Ich habe ein tolles kleines Hamburger Navigationsmenü fast funktioniert, aber es gibt einige seltsame Verhalten, die passiert, nur nachdem ich die Größe des Fensters zweimal. Die Hamburger-Taste tut was es soll, wenn ich die Seite lade, wenn das Fenster schmal ist (Breite < 800px), oder wenn ich lade, wenn breit (Breite> 800px) und die Größe zu schmal wird.Warum wird mein Hamburger-Menü zweimal statt nur einmal nach zwei Bildschirmgrößen umgeschaltet?
Das Problem tritt auf, wenn:
- ich laden, wenn schmal (Breite < 800px),
- dann das Navigationsmenü wechseln,
- dann zu breit der Größe (Breite> 800px),
- dann verkleinern Sie die Größe (Breite < 800px).
Wenn ich durch diese Schritte gehen, schaltet die Hamburger, um das Menü geöffnet ist (wie es sein sollte), aber es schaltet es dann auch sofort schließen, das ich es nicht tun wollen.
Ich bin mir ziemlich sicher, dass ich mit dem Event-Listener etwas falsch mache und ich glaube, dass mein Javascript schuld ist. Wenn Sie mir helfen können, es zu reparieren, so dass der Hamburgerknopf immer das Menü öffnet, würde ich es schätzen!
Hier ist der Codepen: http://codepen.io/ihatecoding/pen/OXmRAd oder wenn Sie bevorzugen, können Sie das Snippet ausführen.
// media query event handler
if (matchMedia) {
var mq = window.matchMedia("(max-width: 800px)");
mq.addListener(function() {
WidthChange(mq);
});
WidthChange(mq);
};
// media query change/
function WidthChange(mq) {
if (mq.matches) {
$("#hamburgerDiv").show();
$(".hamburger").show();
$(".cross").hide();
$(".nav").slideToggle("slow",function() {
// Animation complete.
});
hamburger();
}
else {
$(".nav").show();
$("#hamburgerDiv").hide();
};
};
function hamburger(){
$(".hamburger").click(function() {
$(".nav").slideToggle("slow", function() {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function() {
$(".nav").slideToggle("slow", function() {
$(".cross").hide();
$(".hamburger").show();
});
});
};html,
body {
margin: 0;
height: 100%
}
#header {
position: fixed;
top: 0;
margin-bottom: -100px;
left: 0;
z-index: 999;
padding-left: .5%;
padding-right: .5%;
background-color: #909090!important;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
}
#areaTitle {
text-transform: uppercase;
box-sizing: border-box;
text-transform: uppercase;
text-decoration: none;
color: White;
vertical-align: middle;
flex: 0 1 15%;
padding: 0 !important;
margin: 0!important;
}
#areaTitle a {
text-transform: uppercase;
font-size: 30px;
text-decoration: none;
color: White;
vertical-align: middle !important;
padding: 0 !important;
margin: 0!important;
}
#nav {
flex: 1 1 90%;
padding: 0;
}
#menu {
padding-left: 0;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 20px;
text-align: right;
vertical-align: top;
width: auto;
list-style: none;
-webkit-text-stroke: 1px;
letter-spacing: 2px;
}
#menu li {
text-transform: uppercase;
text-align: center;
vertical-align: middle;
color: #909090;
/*area color*/
display: inline;
}
a {
color: white;
text-decoration: none;
}
#fullpage{
margin:10%;}
span {
box-sizing:border-box;
text-align: center;
display: block;
width: 100%;
margin-top:60px;
margin-bottom:60px;
}
h2 {color:MediumVioletRed;}
.important {color: Blue;
display: inline;
width: 10%;}
#menu li a {
text-transform: uppercase !important;
text-decoration: none;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 15px;
padding-right: 15px;
white-space: nowrap;
}
/* ----------------------hamburger code------------------------*/
.cross{color:white;
float:right;
font-size:90px;
line-height:2px;
/*margin-top: 15px;*/
padding:36px 5px 0px 5px;
outline:none;
margin-top: 5px;
}
.hamburger{color:white;
float:right;
font-size:40px;
line-height:40px;
margin-top: 5px;
padding:0 5px 0px 5px;
}
.hamburgerDiv{display:none;
padding-right: 10px;}
/* ----media query for changing navigation and hamburger----------*/
@media screen and (max-width:800px) {
#header {
justify-content: left;
flex-wrap: wrap;
padding: 0 ;
}
#areaTitle a{font-size:4vw;}
#menu {
width: 100% !important;
min-width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
#menu li {
padding: 0;
margin-left: 1%;
margin-right: 1%;
}
#menu li a {
padding: 0;
margin: 0;
font-size: 100%;
}
#nav {
text-align: center;
flex:0 0 100%;
padding: 0 0 10px 0;
}
.hamburgerDiv{
display:inline;
flex: 1 1 auto;
}
}<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<title>my hmaburger</title>
</head>
<body>
<div id="header" class="header">
<div id="areaTitle" class="navText">
<a href="www.google.com">Hamburger problems</a>
</div>
<div class="hamburgerDiv">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</div>
<nav id="nav">
<ul id="menu" class="navbar-nav nav pubMenuList >
<li id="first"><a href="#noanc" id="section0" class="navText"></a></li>
<li id="first menuItem"><a href="#section1Anc" id="section1" class="navText">section 1</a></li>
<li ><a href="#section2Anc" id="section2" class="navText">section 2</a></li>
<li class="menuItem" ><a href="#section3Anc" id="section3" class="navText">section 3</a></li>
<li class="menuItem"><a href="#section4Anc" id="section4" class="navText">section 4</a></li>
<li class="menuItem"><a href="#section5Anc" id="section5" class="navText">section 5</a></li>
<li class="menuItem"> <a href="#section6Anc" id="section6" class="navText">section 6</a></li>
<li class="menuItem"> <a href="#section7Anc" id="section7" class="navText">section 7</a></li>
<li class="menuItem"> <a href="#section8Anc" id="section8" class="navText">section 8</a></li>
<li class="menuItem"> <a href="#section9Anc" id="section9" class="navText">section 9</a></li>
</ul>
</div>
</div>
<div id="fullpage">
<section id="section1Anc" class="areaSection scrollto">
<h1><span>Section 1</span></h1>
<div id = "section1Div" class = "pubSub">
<p ><h2>On the surface it looks like my hamburger menu is working - but there is a problem.</p> <p> The problem occurs if you resize the window from a small view (width <800 px), to a larger one (width > 800px), then back to a small view (width <800 px). Once the screen is returned to a smaller version, and you click on the hamburger, the menu toggles back and forth, instead of simply revealing the navigation. Can you help me so it stops doing this? <span class="important">I think it might be happening because I don't know how to use event handlers properly.</span></p>
<p>IMPORTANT ELEMENTS:
<ul>
<li><span class="important">#nav</span> is the list of menu items that I only want visible during wide screen and after the hamburger is pressed at width < 800px</li>
<li><span class="important">#hamburgerDiv</span> is the container that contains both the hamburger/open-menu button (.hamburger) and the cross/close-menu button (.cross) </li>
<li><span class="important"> .hamburger </span>is the hamburger/open-menu button </li>
<li><span class="important">.cross</span> is the cross/close-menu button </li><ul></h2></p>
<img src="http://i.imgur.com/Q23PKdJ.gif" height="334" width="1045">
</div>
</section>
<section id="section2Anc" class="areaSection scrollto">
<h1><span>Section 2</span></h1>
<div id = "section2Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section3Anc" class="areaSection scrollto">
<h1><span>Section 3</span></h1>
<div id = "section3Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
</div>
</section>
<section id="section4Anc" class="areaSection scrollto">
<h1><span>Section 4</span></h1>
<div id = "section4Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section5Anc" class="areaSection scrollto">
<h1><span>Section 5</span></h1>
<div id = "section5Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section6Anc" class="areaSection scrollto">
<h1><span>Section 6</span></h1>
<div id = "section6Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section7Anc" class="areaSection scrollto">
<h1><span>Section 7</span></h1>
<div id = "section7Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section8Anc" class="areaSection scrollto">
<h1><span>Section 8</span></h1>
<div id = "section8Div" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
<section id="section9Anc" class="areaSection scrollto">
<h1><span>Section 9</span></h1>
<div id = "proceedingsPubDiv" class = "pubSub">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id vehicula arcu. In hac habitasse platea dictumst. Proin pharetra luctus placerat. Vivamus tincidunt varius dui sit amet iaculis. Maecenas ullamcorper dolor at urna vestibulum, sed varius erat ornare. Vestibulum vel ultricies ligula. Morbi quis fringilla urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum vel egestas sapien, sed commodo dui. Curabitur bibendum quam at risus facilisis, a fermentum lectus sagittis.</p>
<p>Duis ultrices ipsum in condimentum gravida. Praesent lorem urna, posuere ac mi imperdiet, dictum bibendum leo. Nulla odio lorem, vestibulum ac bibendum in, facilisis et ligula. Sed vitae euismod erat, a lobortis ipsum. Maecenas finibus neque vitae velit mollis, non ultricies risus aliquet. Morbi vitae erat et lectus faucibus facilisis. Nulla et sagittis quam. Nullam et nisl at lacus condimentum imperdiet et vel mauris. Cras sollicitudin eros eu est mollis, id viverra mi aliquet.</p>
<p>Cras non dolor ante. Praesent at neque venenatis, dapibus turpis vel, ullamcorper orci. Vivamus consequat est augue. Donec rhoncus erat ac elit faucibus bibendum. Praesent at mauris in risus imperdiet lacinia sed at nisi. Proin rutrum rutrum congue. Aliquam quis mi et eros faucibus elementum a dictum dolor. Nam quis magna ultricies tortor ultrices dapibus sit amet at quam. Phasellus non faucibus neque, ac consectetur diam. Praesent nec porttitor urna. Nulla accumsan sit amet felis ac consequat. Quisque id nibh mauris. Phasellus luctus nulla sit amet tristique placerat.</p>
<p>Suspendisse ornare finibus dui, sed consectetur metus lacinia ut. Cras pellentesque, lectus vel placerat semper, mi turpis malesuada nulla, vehicula aliquam risus sapien ac nibh. Quisque finibus mattis dapibus. Duis eget mollis elit. Duis convallis pulvinar quam et blandit. Etiam ac pulvinar turpis, eu sollicitudin nulla. Nullam cursus placerat egestas. Fusce dignissim, mauris in cursus fermentum, dui nisl faucibus tellus, eget scelerisque elit diam blandit lectus.</p>
</div>
</section>
</div>
</body>starker Text
Ja, das hat den Trick gemacht! Hier ist der forked Codepen mit Ihrem Fix implementiert. http://codepen.io/ihatecoding/pen/mEmWkQ – CoderScissorhands
Froh, dass es geholfen hat. Prost! –