Question

实现以下目标的最佳方式是什么：

我想获得一个大的居中徽标，当您向下滚动并成为top left的一部分时缩小并移动到页面的nav bar。我还希望nav bar从顶部淡出。（我只知道如何做这个不依赖滚动的时间）

当网站加载时，它看起来就像一个简单背景的徽标。向下滚动时，徽标将移至top left，nav bar将会缓及，背景图片也会向上移动。

是否有任何方法可以根据您滚动的距离进行转换。那么，如果你停止一半，你的转型也将停止？

Answer 1

如果我理解正确，你想在滚动的同时转换到导航栏/标题和徽标，具体取决于你滚动了多少？如果是这样，它听起来就不那么难了。

首先，我们必须找出您在页面上滚动了多少像素以及在转换完成之前要滚动的像素数。请参阅下面的代码示例。

$(window).on("scroll", function() {
  var yPos = $(this).scrollTop(),
      yPer = (yPos / 120);

      if (yPer > 1) {
         yPer = 1;
      }
});

此处找到页面的 y 位置yPos，当向下滚动120像素时，转换设置为完成。通过这些信息，我们可以计算滚动像素的百分比，直到达到120像素; yPer。

0px = 0％， 60px = 50％， 120px =的 100％

在if - 声明中，我们确保百分比不能超过100％。

HTML和CSS部分

在我们继续使用JavaScript部分之前，让我们设置HTML和CSS。

HTML结构：

<header></header> <img class="logo" src="http://oi68.tinypic.com/2z5m4pu.jpg" />

在这种情况下，徽标不在标题内，因为我们默认会隐藏标题，这也会隐藏包括徽标在内的所有子元素，这是我们不想要的。

隐藏标题/导航栏：

header { width: 100%; height: 60px; background: #FFF; position: fixed; top: -60px; opacity: 0; }

由于您希望标题在滚动时从顶部淡入，top设置为标题本身的负高度，opacity设置为0。

以徽标为中心：

img.logo { height: 200px; position: fixed; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); }

通过这种方式，无论浏览器窗口的大小和分辨率如何，我们都会将徽标置于屏幕中间。如果top，left和translate3d中的值都设置为0，则徽标将位于左上角。这就是为什么这是在我们的情境中这样做的好方法。

JavaScript部分 - 续

现在我们已准备好继续使用JavaScript部分。

在变量中存储高度：

var header = $("header"), headerHeight = header.height(), logo = $(".logo"), logoHeight = logo.height(); $(window).on("scroll", function() { // Rest of our code });

为了让我们以后更轻松，我们将自动找到header和logo的高度，并将它们存储在变量中。通过这样做，我们不必更改JavaScript代码中的任何内容，如果我们以后想要更改元素的高度。我们只需要在CSS中更改它。

我们将在scroll - 函数之前设置这些变量，因为它们在滚动时不会改变，如上所示。

计算：

var logoPos = ( -1*(yPer * 50) + 50), logoSize = ((headerHeight * yPer) - (logoHeight * yPer) + logoHeight), headerPos = ((yPer * headerHeight) - headerHeight);

这是我们代码中非常重要的一部分。这些表达式是计算元素在滚动时应如何设置动画的一次。


logoPos：在滚动时计算徽标的新位置。我们知道top，left和translate3d总是有。{1}}，50和50   值“0”。 | 从logo开始，以header结束。

logoSize：在滚动时计算徽标的大小。 | 从header的高度开始，以高度结束   0。

headerPos：在滚动时计算标题的位置。 | 从logo.css({ top: logoPos + "%", left: logoPos + "%", transform: "translate3d(-" + logoPos + "%,-" + logoPos + "%,0)", height: logoSize }); header.css({ top: headerPos, opacity: yPer });的负高度开始，以logo结束。

注意：如果我们没有像以前那样存储元素的高度，我们不得不在计算中手动更改它们，如果我们以后想要更改它们。

添加新样式：

translate3d

在这里，我们使用所有计算来在滚动时设置元素的样式。在logoPos bottom right我们必须记住在center之前加减号。此外，徽标将从yPer而不是{{1}}开始移动。

对于不透明度，我们不必计算任何东西。我们只使用{{1}}。

那基本上就是这样。希望这可以帮到你。

您可以在上下文中查看完整代码，并在此小提琴中添加注释：

Working Fiddle

Answer 2

如果我理解你的问题，你应该使用$（window）.scrollTop（）。

例如，在您的javascript文件中，

$(document).ready(
  function () {
      setInterval(function () {
          if ($(window).scrollTop() >= 650) {
         // Move your logo to where you want 
         }
         else{
         //Move the logo back to the original position 
         }
      }, 1000);
  });

此代码将检查滚动的当前顶部是否超过650px并将触发该代码。如果它小于650像素，它将触发其他代码将图片移回。使用setInterval使其每1秒不断检查一次，但您可以根据需要进行更改。

将650更改为您认为最合适的任何内容。

在没有提供任何代码的情况下很难弄清楚你的问题，但我希望这会有所帮助。

向下滚动转换和徽标移动

2 个答案:

HTML和CSS部分

JavaScript部分 - 续