moschan
5/23/2014 - 3:40 AM

jsbin.mipufoca.css

jsbin.mipufoca.js
content_copyfile_download

$(function(){
  var contentHeight = $("html").height() - $(window).height();
  var reachBottom = false;
  var $slidein= $(".slideinContent");

  $(window).scroll(function(e){

    if( $(this).scrollTop() / contentHeight < 0.8 ){reachBottom = true;}
    
    if($(this).scrollTop() / contentHeight > 0.9 && reachBottom === true) {
      $slidein.addClass("isDisp");
      }
    
  });

  
  $(".close").click(function(){
    $slidein.removeClass("isDisp");
    reachBottom = false; 
  });

  
});
jsbin.mipufoca.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A inventore error omnis recusandae consectetur quasi iure autem placeat quod tenetur vero suscipit velit itaque sequi sint deserunt ipsam maxime accusantium.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A inventore error omnis recusandae consectetur quasi iure autem placeat quod tenetur vero suscipit velit itaque sequi sint deserunt ipsam maxime accusantium.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A inventore error omnis recusandae consectetur quasi iure autem placeat quod tenetur vero suscipit velit itaque sequi sint deserunt ipsam maxime accusantium.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A inventore error omnis recusandae consectetur quasi iure autem placeat quod tenetur vero suscipit velit itaque sequi sint deserunt ipsam maxime accusantium.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A inventore error omnis recusandae consectetur quasi iure autem placeat quod tenetur vero suscipit velit itaque sequi sint deserunt ipsam maxime accusantium.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A inventore error omnis recusandae consectetur quasi iure autem placeat quod tenetur vero suscipit velit itaque sequi sint deserunt ipsam maxime accusantium.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A inventore error omnis recusandae consectetur quasi iure autem placeat quod tenetur vero suscipit velit itaque sequi sint deserunt ipsam maxime accusantium.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A inventore error omnis recusandae consectetur quasi iure autem placeat quod tenetur vero suscipit velit itaque sequi sint deserunt ipsam maxime accusantium.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A inventore error omnis recusandae consectetur quasi iure autem placeat quod tenetur vero suscipit velit itaque sequi sint deserunt ipsam maxime accusantium.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A inventore error omnis recusandae consectetur quasi iure autem placeat quod tenetur vero suscipit velit itaque sequi sint deserunt ipsam maxime accusantium.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A inventore error omnis recusandae consectetur quasi iure autem placeat quod tenetur vero suscipit velit itaque sequi sint deserunt ipsam maxime accusantium.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A inventore error omnis recusandae consectetur quasi iure autem placeat quod tenetur vero suscipit velit itaque sequi sint deserunt ipsam maxime accusantium.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A inventore error omnis recusandae consectetur quasi iure autem placeat quod tenetur vero suscipit velit itaque sequi sint deserunt ipsam maxime accusantium.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A inventore error omnis recusandae consectetur quasi iure autem placeat quod tenetur vero suscipit velit itaque sequi sint deserunt ipsam maxime accusantium.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A inventore error omnis recusandae consectetur quasi iure autem placeat quod tenetur vero suscipit velit itaque sequi sint deserunt ipsam maxime accusantium.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A inventore error omnis recusandae consectetur quasi iure autem placeat quod tenetur vero suscipit velit itaque sequi sint deserunt ipsam maxime accusantium.</p>

  <div class="slideinContent">
    <div class="close">×</div>
    <h3>楽しい旅行</h3>
    <div class="banners">
      <img src="http://placekitten.com/g/150/150" alt="">
      <img src="http://placekitten.com/g/150/150" alt="">
      <img src="http://placekitten.com/g/150/150" alt="">
      <img src="http://placekitten.com/g/150/150" alt="">
    </div>
  </div>

</body>
</html>
jsbin.mipufoca.css
content_copyfile_download
html {
  overflow-x: hidden;
}

body {
  position: relative;
  margin: 0;
}


h3 {
  color: #FFF;
  padding-left: 20px;
}


.slideinContent {
  position: absolute;
  overflow: hidden;
  float: right;
  right: -100%;
  bottom: 0;
  width: 100%;
  height: 200px;
  background: #111111;
  transition: .5s linear; 
}


.banners {
  margin: 0 auto;  
  text-align: center;
}


.slideinContent img{
  display: inline-block;
}


.close {
  position: absolute;
  top: -10px;
  right: 0;
  font-size: 50px;
  color: #FFF;
}


.isDisp{
  right: 0;
}