向下滚动转换和徽标移动

实现以下目标的最佳方法是什么:

我想获得一个大的居中徽标,缩小并移动到top left页面,当你向下滚动并成为其中的一部分nav bar.我也希望nav bar从顶部淡出.(我只知道如何做这个定时不依赖于滚动)

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

有什么方法可以根据您滚动的距离进行转换.那么如果你停止一半你的转型也会停止？

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

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

$(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-statement中,我们确保百分比不能超过100%.

HTML和CSS部分

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

HTML结构:

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

隐藏标题/导航栏:

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始终具有" 50" 的值.| 开始50,结束0.

logoSize:滚动时计算徽标的大小.| 从高度开始logo,结束于高度 header.

headerPos:滚动时计算标题的位置.| 从负高度开始header,结束0.

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

添加新样式:

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.

那基本上就是这样.希望这可以帮助你.

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

工作小提琴