Menu
I used Skrollr library to create parallax effect for the background. However, when skillor.init() is called, the body height is too high and create extra space below in the page.
The problem can be seen here: http://codepen.io/designil/pen/Ggxde
HTML:
<div class="headrow"> <div class="container"> <div class="row"> <div class="col-md-3"> <h1 class="logo"><a href="#">21GUNS</a></h1> </div> <div class="col-md-9"> <div class="topmenu"> <p> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> <a href="#"><i class="fa fa-pinterest"></i></a> </p> <ul class="list-unstyled"> <li> <div class="dropdown"> <a data-toggle="dropdown" href="#">MENU 1</a> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div> </li> <li> <a href="#">MENU 2</a> </li> <li> <a href="#">MENU 3</a> </li> <li> <a href="#">MENU 4</a> </li> <li> <a href="#">MENU 5</a> </li> </ul> </div> </div> </div> </div> </div><!-- headrow --> <div class="bannerrow"> <img src="http://placehold.it/1800x600" alt="" /> </div> <div class="servicerow" data-top-bottom="background-position: 50% 75%;" data-bottom-top="background-position: 50% 100%;"> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3 text-center"> <header> <h2>21SERVICES</h2> <p>Drive next-generation technologies vortals engage, systems services dynamic to our clients.</p> </header> </div> </div><!-- row --> <div class="row"> <div class="col-md-5"> <div class="column2-box"> <i class="fa fa-gift fa-fw"></i> <h3>FLAT DESIGN</h3> <p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p> </div> </div> <div class="col-md-5 col-md-offset-2"> <div class="column2-box"> <i class="fa fa-gift fa-fw"></i> <h3>FLAT DESIGN</h3> <p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p> </div> </div> </div><!-- row --> <div class="row"> <div class="col-md-5"> <div class="column2-box"> <i class="fa fa-gift fa-fw"></i> <h3>FLAT DESIGN</h3> <p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p> </div> </div> <div class="col-md-5 col-md-offset-2"> <div class="column2-box"> <i class="fa fa-gift fa-fw"></i> <h3>FLAT DESIGN</h3> <p>End-to-end, user-centred web-readiness cultivate granular drive convergence.</p> </div> </div> </div><!-- row --> </div> </div> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.11/skrollr.min.js"></script> CSS:
@blue: #293448; @red: #C1392B; @import url(http://fonts.googleapis.com/css?family=Open+Sans); body { font-family: 'Open Sans', sans-serif; } .headrow { background: @blue; } .logo a { color: #fff; transition: 0.3s; &:hover { text-decoration: none; color: #eee; } } .topmenu { text-align: right; p { margin-top: 10px; a { display: inline-block; margin: 0 5px; text-align: right; } } ul { margin-bottom: 0; } li { display: inline-block; margin-left: 30px; a { color: #eee; display: block; padding-bottom: 10px; border-bottom: 3px solid transparent; transition: 0.3s; } a:hover { text-decoration: none; border-bottom: 3px solid @red; } .dropdown-menu { text-align: left; li { margin: 0; display: block; } a:hover { background: #ccc; } a { color: @blue; border: 0; transition: 0; } } } } .bannerrow { img { width: 100%; height: auto;} } .servicerow { color: #fff; padding-bottom: 100px; background: url(http://i.imgur.com/pIaoyxQ.jpg) no-repeat; background-size: cover; header { margin-top: 60px; margin-bottom: 20px; h2 { margin-bottom: 10px; } p { font-size: 13pt; } } } .column2-box { border: 1px solid #ddd; padding: 10px; margin: 15px 0; i { font-size: 110px; float: left; } h3 { margin-top: 0; } } JS:
$(function() { $('.dropdown-toggle').dropdown(); $('.dropdown').hover(function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200); }, function() { $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200); }); var s = skrollr.init({forceHeight: false}); }); I am not sure which element makes the page too high.
270
skrollr.init({forceHeight: false}); https://github.com/Prinzhorn/skrollr#forceheighttrue
Skrollr makes sure you can actually reach data-bottom-top. As you can see, the gap allows the element's bottom to be perfectly aligned with the top of the viewport.
186
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
