javascript - 如何创建div堆栈并动态滚动显示？

Question

这是我正在设计的网站模板的链接，我希望下一个 div 能够顺利显示，但是当我快速滚动时，它会显示 div 的边框!!这是一个 ( http://jsfiddle.net/kailash8591/329cos9y/embedded/result/ )这是我尝试遵循设计的引用站点!!
chameleon
我如何使用 jQuery 实现这一目标？

$(function () {

    $(".wrapper").scroll(function () {

        var height = $(".active").height();

        if ($(".wrapper").scrollTop() > (height - 400)) {
            //alert("wrapper content "+$(".wrapper content").scrollTop());
            //ert("height of wrapper"+height);
            $(".active").animate({
                'opacity': 0
            }, 'slow');

            $next = $(".active").next();
            $next.addClass('active');
            $next.siblings().removeClass('active')
            $prev = $next.prev();
            $next.animate({
                'opacity': 1
            }, 'slow');
        }

    });

});

<div class="header">
    <div class="companylogo">logo</div>
    <div class="companytitle">Click Online Services</div>
</div>
<div class="wrapper" id='wrapper'>
    <!--column-->
    <div class="green active" id="green">
        <img class="bg-img" src="http://s15.postimg.org/n4xk7g62j/green.jpg">
        <div class='Description'>
            <p> <span>Company Brief</span> 3 click online services is a leading Solutions Provider, implementing technology and design to deliver the best in time. Founded with an aim to revamp end user's perception of the Web. Industry and still growing, 3 click online services have added a whole new dimension to Web Development and Design. 3 click online services is not just limited his boundaries to Web development but also Software Development Logo Designing etc. 3 click online services are a bunch of passionate people working round the clock to bring that 'smile-of-content' on your face. We stay a step ahead of your expectations, upholding high and professional standards of work. With our technical expertise at play, all our solutions are tailor-made to suite your business needs. Our core team of developers, programmers and artists are dedicated to offering business class services with a touch of compassion. Talking about clients, our relationships do not end with deployment.</p>
            <p>Companies Services Logo Designing 3 click online services provide an artistic creation of logos. Web Designing and Development 3 click online services solution provides a broad range of web design services from static html websites to web applications and software development. We focus on achieving our clients' business goals. We know that a successful website is not only about a beautiful design - it is about understanding the clients' business requirements and translating them into scalable web design solutions. We are proud to be a part of our clients' team, unlike many other web companies who merely treat designing as a job. The end result is websites and web applications that are consistent with our clients' online expectations we pay high attention to details, provide fast turn-around and are extremely affordable. Our clients range from individuals to large corporations throughout the world. All of the cutting-edge market tendencies are presented in Development Services of our company. We are skilled in Html, Java, .NET, PHP .Our web sites and networks have a wide functionality and are integrated with payment systems, mobile platforms and corporate resources. We are passionate about what we do, and believe that the best way to demonstrate our expertise is to show you our work.</p>
        </div>
    </div>
    <div class="red">
        <img class="bg-img" src="http://s15.postimg.org/hi179z3jv/red.jpg">
    </div>
    <div class="yellow">
        <img class="bg-img" src="http://s15.postimg.org/c966c3l4r/yellow.jpg">
    </div>
    <div class="blue" id="blue">
        <img class="bg-img" src="http://s15.postimg.org/wmxb7hrqz/blue.jpg">
    </div>
    <div class="dblue">
        <img class="bg-img" src="http://s15.postimg.org/dj3zr5ewr/darkblue.jpg">
    </div>
    <!--contentwrapper-->
</div>

 html, body {
     height: 100%;
     margin:0;
     padding:0;
     overflow: hidden;
     font-family:'robotolight';
 }
 .wrapper {
     position: relative;
     overflow-y: scroll;
     width: 100%;
     overflow-x: hidden;
 }
 .wrapper {
     position:relative;
     margin-top:65px;
     background-image: url("http://s15.postimg.org/3vvw3owjf/black.jpg");
 }
 .bg-img {
     width:1366px;
     height:2000px;
 }
 .wrapper, .green {
     height:100%;
     left:0;
     top:0;
     opacity:1;
 }
 .red, .blue, .yellow, .dblue {
     opacity:0;
     position:absolute;
     left:0;
     top:0;
     height:100%;
     border-style: none;
     border-color: transparent;
     background-color: transparent;
     /*     display:none; */
 }
 .green {
     border-style: none;
     position:absolute;
     left:0;
     top:0;
     background-color: transparent;
     border-color: transparent;
     z-index: 2;
 }
 .green img {
     width:1366px;
     height:1366px;
     margin-top:-388px;
 }
 .red img {
     margin-top: -208px
 }
 .yellow img {
     margin-top: -388px;
 }
 .blue img {
     margin-top: -388px;
 }
 .dblue img {
     margin-top: -388px;
 }
 .red {
     z-index:4;
 }
 .yellow {
     z-index: 6;
 }
 .blue {
     z-index: 10;
 }
 .dblue {
     z-index: 12;
 }
 .header {
     height:60px;
     width:100%;
     z-index:200;
     position:fixed;
     background-color:rgba(2, 2, 2, 0.8);
     color:white;
     font-size: 24px;
     text-align: center;
     padding-top: 5px
 }
 .header .companylogo {
     position: absolute;
     width:137px;
     height:40px;
     float:left;
     margin: 6px 8px;
     overflow:hidden;
     border-color: white;
     border:1px solid;
 }
 .header .companytitle {
     width: 280px;
     margin: auto;
     padding-top: 12px;
 }
 .Description {
     position:absolute;
     top: 34px;
     left:200px;
     margin: auto;
     width: 700px;
     height: 400px;
     background-color: transparent;
     z-index: 51;
 }

Answer 1

jsBin demo

我会简单地这样做:

• 在元素中存储所需的颜色 data-*属性:<div class="page" data-bgcolor="#27AE61"> .该颜色将使用 JS 分配给 body元素。
• 创建一个数组，该数组将动态收集所有元素的位置和颜色，结果为:[[0,"#27AE61"],[1250,"gold"],....etc]
• 在滚动时获取与滚动位置匹配的数组项并检索它的颜色(当元素大部分可见时我使用了 /1.5 )
• 将该颜色设置为 $('body')并使用 CSS3 实现 BODY bg 颜色过渡:body{ transition: background 3s;}

JS/jQ:

var $page = $('.page'),
    pos2Color = [], // [[pos,color],[pos,color],...]
    winH, scrH, oldColor,
    start = true;

function getPosColorData(){ // Creates the Array [[pos, color], ... ]
   pos2Color = [];
   winH = $(window).height();
   scrH = $('html, body')[0].scrollHeight;
   $page.each(function(){
      pos2Color.push([
        this.getBoundingClientRect().top,
        this.dataset.bgcolor
      ]);
   });
}

$(window).on("scroll", function(){
  if(start){      // Do it only once on first scroll
    getPosColorData();
    start=false;
  }
  var st = $(this).scrollTop();
  var color = pos2Color.filter(function(k){ // Search in our Array...
    return  k[0] > ( st-winH / 1.5 );       // (change 1.5 to your needs)
  })[0][1];                                 // ...and retrieve the color!

  if(color!==oldColor){                     // Only if it's a new color!
    $("body").css({background: color});
    oldColor = color;
  }
}).on('resize', function(){
   start = true;  // Something changed, allow another take.
});

HTML:

  <header>
    <h1>HELLO WORLD</h1>
  </header>

  <div class="page" data-bgcolor="#27AE61"><h1>page1</h1></div>
  <div class="page" data-bgcolor="gold"><h1>page2</h1></div>
  <div class="page" data-bgcolor="#37e"><h1>page3</h1></div>
  <div class="page" data-bgcolor="#e73"><h1>page4</h1></div>
  <div class="page" data-bgcolor="#7fe"><h1>page5</h1></div>