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>

Answer 2

说实话，如果我是你，我不会为从头开始构建单页模板而烦恼。如果这是针对贵公司的网站，那么考虑使用预先制作的模板，他们通常只需要10美元左右，并且考虑到他们为您节省的时间，他们是值得的。（所有你需要做的就是填写网站，用css和js做一些调整，也许添加一些自定义部分）

无论如何，这只是一个建议，因为我只是简单地滚过变色龙，你会遇到很多问题:)

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

2 个答案: