jQuery和JavaScript滚动和响应式网站都搞砸了

Question

我尝试使用Scrollit.js，http://bytemuse.com/scrollIt.js/，jquery-1.10.2.min.js和响应式网格系统http://www.responsivegridsystem.com创建投资组合网站。我想这有点超出了我的联赛，因为它全都搞砸了。以下是发生的事情：

^蓝色不应该存在，但在较小的窗口中不是问题。

^不是一个大问题

^这里是它被抬高的地方。背景应该是白色的，蓝色不应该在顶部和底部偷看。这也是较小窗口中的问题。

^ ...就是，呃。非常令人沮丧。

我已经篡改了我的代码几个小时，我不知道接下来该做什么。如果有人可以提出建议我会非常感激！这里有一个代码：http://jsfiddle.net/p28w9/我认为问题会出现在这个CSS片段的某个地方，但我无法真正说出原因，我无法确定如果我是对的。这就是我需要一些帮助的原因。 ＆GT;。＆LT;

/*  SECTIONS  */
section {
    padding-top: 60px;
    height: 838px;
    width: 100%;
}

#work {
    margin-top: 200px;
    padding: 50px;
}

section:nth-child(odd) {
    padding-top: 260px;
    height: 320px;
    background-color: #1ab7ea;
    color: #fff;
}

/*.section {
    clear: both;
    padding: 0px;
    padding: 20px;
}*/

section .content {
    margin: 160px auto;
    max-width: 640px;
}

Answer 1

我可以直接指出的一个问题是你为你的部分设置的高度。 我建议您使用至少 1200px的高度，并将填充顶部与所有部分保持一致。

section {
padding-top: 80px;
height: 1200px;
width: 100%;
}

同样在你的第n个孩子的部分，你不应该设置额外的高度或填充，因为这会弄乱你的Scrollit。下面的Css对你来说很好。

section:nth-child(odd) {
background-color: #1ab7ea;
color: #fff;
}

我想提到的另一件事是，在较高的1200px分辨率（在Y轴上）将导致下一页的一部分，在上一页的底部。因此，在开始您的投资组合之前，您应该问自己，您希望您的网站能够与之合作的最大分辨率是什么。

希望这会对你有所帮助，

此致

萨诺斯