我正在尝试制作一个不错的视差滚动网站，这是我第一次做这样的事情。 这是我的代码的一部分。
<header>
<div class="container-fluid">
<div class="section1">
<!--<img src="images/Untitled-1.png" alt="" class="img-responsive">-->
</div>
</div>
<div class="section2">
<div class="coveculjak" id="eboy">
<div class="coveculjak2">
</div>
</div>
<!--<img src="images/dobrodosli.png" alt="" class="img-responsive" width="100%">-->
</div>
</header>
<body>
<div class="container-fluid">
<div class="section3">
</div>
</div>
<div class="kontakt">
<div class="well well-sm">
<form class="form-horizontal" method="post">
<fieldset>
<legend class="text-center header">Contact us</legend>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
<div class="col-md-8">
<input id="fname" name="name" type="text" placeholder="First Name" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-user bigicon"></i></span>
<div class="col-md-8">
<input id="lname" name="name" type="text" placeholder="Last Name" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-envelope-o bigicon"></i></span>
<div class="col-md-8">
<input id="email" name="email" type="text" placeholder="Email Address" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-phone-square bigicon"></i></span>
<div class="col-md-8">
<input id="phone" name="phone" type="text" placeholder="Phone" class="form-control">
</div>
</div>
<div class="form-group">
<span class="col-md-1 col-md-offset-2 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span>
<div class="col-md-8">
<textarea class="form-control" id="message" name="message" placeholder="Unesite vašu poruku i u najskorijem roku ćemo Vas kontaktirati." rows="7"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-primary btn-lg dugme">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
CSS：
@media screen and (max-width: 1600px){
body,
html {
margin:0;
padding:0;
width: 80%;
height: auto;
}
.section1 {
max-width: 80%;
}
.section2 {
max-width:100%;
background-size: 1600px 642px;
}
.section3 {
max-width:100%;
background-size: 1600px 200px;
}
.coveculjak {
width: 700px;
margin-left: 380px;
}
}
* { margin:0; padding:0; } /* to remove the top and left whitespace */
body,
html {
margin:0;
padding:0;
width: 100%;
height: auto;
}
.container-fluid{
width: 100%;
height: auto;
}
.section1 {
max-width: 100%;
padding:0;
margin:0;
height:auto;
position: relative;
height: 800px;
background-image: url("../images/head.png");
size: auto 600px;
position: top-center;
background-attachment: fixed;
overflow: hidden;
}
.section1 img {
width:100%;
height:auto;
}
.coveculjak {
width: 900px;
height: 300px;
background-image: url("../images/eboy.png");
background-repeat: no-repeat;
background-position: bottom;
position: absolute;
margin-top: 5%;
margin-left: 28%;
}
.section2 {
width:100%;
padding:0;
margin:0;
height:auto;
position: relative;
height: 646px;
background-image: url("../images/dobrodosli01.png");
size: contain;
position: top-center;
z-index: -100;
}
.section2 img {
width:100%;
height:auto;
}
.kontakt {
margin-top:280px;
position: relative;
position: top-center;
background-attachment: fixed;
overflow: hidden;
opacity: 0.2;
}
.section3 {
height:200px;
background-image: url("../images/kapija.png");
z-index: 100;
}
.section3 img{
position: relative;
left: 0px;
top: 0px;
z-index: 100;
}
.section4 {
margin-bottom: 20px;
position: relative;
opacity: 0;
transform: translateX(-40px);
}
.is-showing{
opacity: 1;
transform: translateX(0px);
transition: all 0.3s ease-in-out;
}
.is-hide {
opacity: 0;
position: relative;
}
JS
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
if($(window).scrollTop() > 750){
//$(".coveculjak").css({"transform" : "translate(0px, "+ 1.1 +"px)"});
$(".coveculjak").css({"transform" : "translateY(0px)"});
$(".coveculjak").css("margin-top", wScroll-600+"px");
}
else{
$('.coveculjak').css({
'transform' : 'translate(3px, '+ wScroll /12 +'%)'});
$(".coveculjak").css("margin-top", "0px");
$(".coveculjak").css("margin-left", wScroll/ 1.5);
// $(".coveculjak").css({"transform" : "translateX(200px)"});
// $(".coveculjak").css({"margin-left", wScroll-300+"px"});
}
if (wScroll > $('.section4').offset().top - ($(window).height() / 2.2)) { // umesto .offset().top - 500
// Vidi visunu ekrana i podeli je sa ... da ne bi bilo fiksno! Razmotriti i 1,8 i 2.2 vrednost!
$('.section4').each(function(i){
setTimeout(function(){
$('.section4').eq(i).addClass('is-showing');
}, 250 * (i+1));
});
// malo me mozda buni eq= equal?
}
var kontaktOffset = $('.kontakt').offset().top - 100;
//alert(kontaktOffset);
if (wScroll > kontaktOffset - ($(window).height() / 200 )) {
$('.coveculjak').css({
'transform' : 'translate(200px' + wScroll / 120 + '%)'});
$(".coveculjak").css("margin-top", kontaktOffset - 800 +"px");
$(".coveculjak").css("margin-left", wScroll / 120);
// $(".kontakt").css("z-index", -100);
//$('.coveculjak').css({'transform' : 'translate(3px, ' + wScroll / 12 + '%)'});
//$(".coveculjak").css("margin-top", "0px");
// $(".coveculjak").css("margin-left", wScroll - 300 "px");
}
所以我遇到了两件事。
我的男孩在页面上滚动，当他来到联系部分时，应该从右向左滑动。正如他在页面顶部所做的那样，只是相反。 但在这种情况下，他只是消失并出现在其他坐标上。
另一个问题是我现在正在我的电脑上工作，当我在笔记本电脑上测试时，它看起来并不像我想要的那样，这个男孩滑得太长了，那怎么可能呢？我减少JS代码的价值，比在笔记本电脑上好，但不在PC中...... $（＆＃34; .coveculjak＆＃34;）。css（＆＃34; margin-left＆＃34;，wScroll / 1.5）; 那么我可以使用一些百分比还是做其他事情？
我希望你能理解我想问的问题，并希望这个问题是正确的。