主页 / 问题 / 729456
Accepted
YourDeveloper
Asked:2020-10-11 20:36:06 +0000 UTC2020-10-11 20:36:06 +0000 UTC

为什么视差不起作用？

  • 772

为什么视差效果不起作用？

var scrollParal = $(this).scrollTop();
console.log(scrollParal);


$('.middle .circle').css({
  'transform' : 'translate(0%, ' + scrollParal + '%)'
}); 
.top {
  position: relative;
  height: 100vh;
  background: green;
}

.middle {
  position: relative;
  height: 500px;
  background: url(https://img1.goodfon.ru/wallpaper/big/d/63/foto-kartinka-art-stil-domo.jpg);
}
.middle .circle {
  height: 50px;
  width: 50px;
  display: inline-block;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: 50%;
  margin-left: -25px;
  background: green;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
footer {
   position: relative;
   height: 500px;
   background: brown;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="top">
  Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Не лучше путь мир всеми назад над города приставка вскоре прямо текстов запятой собрал предложения, даль. От всех агенство, за обеспечивает.
</section>

<section class="middle">
  <span class="circle"></span>
</section>

<footer>
  
</footer>

javascript

2 个回答

  1. Best Answer

    你没有设置事件，所以我改变了它，但不知何故我不明白你想做什么？如果你在问题中解释，我会改变答案。

    $(window).bind('scroll', function(){
  var scrollParal = $(this).scrollTop();
  $('.middle .circle').css({
    'transform' : 'translate(0%, ' + scrollParal + '%)'
  });
});
    .top {
  position: relative;
  height: 100vh;
  background: green;
}

.middle {
  position: relative;
  height: 500px;
  background: url(https://img1.goodfon.ru/wallpaper/big/d/63/foto-kartinka-art-stil-domo.jpg);
}
.middle .circle {
  height: 50px;
  width: 50px;
  display: inline-block;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: 50%;
  margin-left: -25px;
  background: green;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
footer {
   position: relative;
   height: 500px;
   background: brown;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="top">
  Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Не лучше путь мир всеми назад над города приставка вскоре прямо текстов запятой собрал предложения, даль. От всех агенство, за обеспечивает.
</section>

<section class="middle">
  <span class="circle"></span>
</section>

<footer>
  
</footer>

    这是第二个例子：

    $(document).ready(function(){
	var middle_offset = $( ".middle" ).offset();
  var middle_top = middle_offset.top;
  console.log(middle_top);
  $(window).bind('scroll', function(){
    var scrollParal = $(this).scrollTop() / 2;
    if(middle_top < $(this).scrollTop()){
      $('.middle .circle').css({
        'transform' : 'translate(0%, ' + scrollParal + '%)'
      });
    }
    
  });
});
    .top {
  position: relative;
  height: 100vh;
  background: green;
}

.middle {
  position: relative;
  height: 500px;
  background: url(https://img1.goodfon.ru/wallpaper/big/d/63/foto-kartinka-art-stil-domo.jpg);
}
.middle .circle {
  height: 50px;
  width: 50px;
  display: inline-block;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: 50%;
  margin-left: -25px;
  background: green;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
footer {
   position: relative;
   height: 500px;
   background: brown;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="top">
  Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Не лучше путь мир всеми назад над города приставка вскоре прямо текстов запятой собрал предложения, даль. От всех агенство, за обеспечивает.
  
</section>
<section class="middle">
  
  <span class="circle"></span>
</section>

<footer>
  
</footer>

    • 2 

  2. var scrollParal;
window.onscroll = function() {
scrollParal = $(window).scrollTop();

$('.middle .circle').css({
  'transform' : 'translate(0%, ' + scrollParal/5 + 'px)'
});
}
    .top {
  position: relative;
  height: 100vh;
  background: green;
}

.middle {
  position: relative;
  height: 500px;
  background: url(https://img1.goodfon.ru/wallpaper/big/d/63/foto-kartinka-art-stil-domo.jpg);
}
.middle .circle {
  height: 50px;
  width: 50px;
  display: inline-block;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  left: 50%;
  margin-left: -25px;
  background: green;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
footer {
   position: relative;
   height: 500px;
   background: brown;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="top">
  Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Не лучше путь мир всеми назад над города приставка вскоре прямо текстов запятой собрал предложения, даль. От всех агенство, за обеспечивает.
</section>

<section class="middle">
  <span class="circle"></span>
</section>

<footer>
  
</footer>

    • 1

相关问题