web-dev-qa-db-fra.com

Skrollr init set <body> hauteur to be too high

J'ai utilisé la bibliothèque Skrollr pour créer un effet de parallaxe pour l'arrière-plan. Cependant, lorsque skillor.init () est appelé, la hauteur du corps est trop élevée et crée un espace supplémentaire en dessous de la page.

Le problème peut être vu ici: 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});
});

Je ne sais pas quel élément rend la page trop haute.

javascriptparallaxskrollr
25
designil
skrollr.init({forceHeight: false});

https://github.com/Prinzhorn/skrollr#forceheighttrue

Skrollr s'assure que vous pouvez réellement atteindre data-bottom-top. Comme vous pouvez le voir, l'écart permet au bas de l'élément d'être parfaitement aligné avec le haut de la fenêtre.

71
Prinzhorn