Question

我使用此代码将徽标（.logo）放置在背景（.bird-box）之上，我对.logo

有疑问

当我的徽标的实际高度为100px时，我使用下面的代码（高度设置为100px，一切都很好

 .bird-box
 position: relative
 height: 800px
 background:
   image: url(../images/background-small.png)
   size: auto 800px
   position: top center
   attachment: fixed
 overflow: hidden

 .logo
  height: 100px
  width: 100%
  background:
    image: url(../images/shardfund.png)
    position: center
    repeat: no-repeat
  position: relative
  top: 50%
  margin-top: -50px

使用上面的代码结果：我有两个窗口可以查看代码：在Chrome中和Atom（编辑器）中的浏览器中。

在Atom浏览器中：徽标随滚动一起移动（当我向下滚动时，徽标会上升）。背景是静态的。

在Chrome浏览器中：徽标随着滚动而移动但速度较慢，因此当我滚动800px（背景的高度）时，徽标会消失。它总是停留在可见的背景中心，随着背景的消失，徽标也会消失（如果不清楚则道歉，这是我能提供的最好的口头解释）。附：这实际上是预期的效果！我还测试了Firefox中的代码（像Chrome一样 - 完美）在IE10中（像Atom explorer一样工作 - 不好！）

问题：为什么Atom和Chrome浏览器之间存在差异？如何解决？

然而，当我调整高度为200px的实际徽标并使用下面的代码时，情况会有所不同（如下所述）。

 .bird-box
 position: relative
 height: 800px
 background:
   image: url(../images/background-small.png)
   size: auto 800px
   position: top center
   attachment: fixed
 overflow: hidden

 .logo
  height: 200px
  width: 100%
  background:
    image: url(../images/shardfund.png)
    position: center
    repeat: no-repeat
  position: relative
  top: 50%
  margin-top: -100px

实施更改后，徽标将变为200px（至少可以使用），但在运动方面： - 在Chrome中，徽标与背景保持静止（不是所需的结果） - 在Atom浏览器中，它随着滚动而移动（不是所需的结果）

问题1：我如何通常调整徽标的大小并设法使其保持在背景的中心，直到滚动过程中背景消失为止（通过Chrome中的第一次实现）

问题2：如何使这种运动在所有浏览器中都有效？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BlackBird Co.</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<header class="bird-box">
  <div class="back-bird"></div>
  <div class="logo"></div>
  <div class="fore-bird"></div>
</header>
<section class="content">
  <article>
    <h1>Clothing Store</h1>
    <hr>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </article>
  <!--Make the webpage scrollable-->
  <div style="height: 2000px"> </div>
</section>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/functions.js"></script>
</body>
</html>

Answer 1

我实际上自己研究了这个问题，因为我发布了这个问题并提出了答案，所以这就是：

使用javaScript。

$(window).scroll(function(){

  var wScroll = $(this).scrollTop();

  $('.logo').css({
'transform' : 'translate(0px, '+ wScroll /2 +'%)'

  })

});

图像大小和浏览器差异的问题

问题：为什么Atom和Chrome浏览器之间存在差异？如何解决？

1 个答案: