Skrollr init set <body> height to be too high

Question 1

Skrollr init set <body> height to be too high

javascript parallax skrollr

designil · Nov 4, 2013 · Viewed 19.4k times · Source

Answer

Answer

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.

Question 2

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.

Skrollr init set <body> height to be too high

Answer

Related questions