平滑设置页眉动画 [英] Smoothly animating a header

问题描述

我正在尝试制作与这些标头之一类似的东西，以减小尺寸，并在页面开始向下滚动时使元素滑动.所不同的是，我见过的大多数此类标头都有一个带有背景色的大标头，我的客户希望徽标位于导航栏的单独空间中.顶部有一个空格，上面只有徽标，然后是带有背景色的导航栏.因此，我试图将导航栏固定在滚动条的顶部，并将徽标滑动到其他位置.我已经尝试过动画和转场，但是滚动仍然很震撼.

I'm trying to make something similar to one of those headers that reduces in size and has an element slide when the page starts scrolling down. The difference is that most of those kinds of headers that I've seen have a single large header with a background-color, and my client wants the logo to be in a separate space to the nav-bar. There's a blank space at the top with just the logo in it, then there's the nav-bar which has a background-color. So I'm trying to make the nav-bar stick to the top on scroll and slide the logo into a different position. I've tried animations and transitions but it's still really jarring on scroll.

以下是一些当前代码，这些代码使用jQuery在滚动条上添加css类，然后以不同的方式放置元素.我实际上使用的是sass，还没有将其更改为常规的CSS.

Here's some current code that uses jQuery to add css classes on scroll, then positions the elements differently. I'm actually using sass and haven't changed it to regular css.

HTML:

<header>
<a href="index.php"><img src="images/logo.png" width="170" height="68" /></a>
<nav>
<ol>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="gallery.php">Gallery</a></li>
</ol>
</nav>
</header>

JS:

$(window).scroll(function() {
  if ($(this).scrollTop() > 80){
$('nav').addClass("scroll");
$('header img').addClass("logoScroll");
}
else{
$('nav').removeClass("scroll");
$('header img').removeClass("logoScroll");
}
});

SASS:

header{
 width: 100%;
img{
margin-left:68%;
}}

 nav{
 padding:5px;
 z-index:2;
 background:#571189;
 font-size:1.3em;
 }

.scroll {
position:fixed;
top:0;
width:100%;
}

.logoScroll{
position:fixed;
top:0;
right:4%;
z-index:3;
zoom:0.6;
transition: all 0.4s ease;
}

推荐答案

要平滑转换标题和图像/徽标，您要做的就是将这些标签绑定到Jquery Scroll事件，并相应地添加和删除类.

For smooth transition of header and image/logo, what you have to do is, bind those tags to Jquery Scroll event and add and remove classes accordingly.

在此处检查此小提琴

为使徽标平滑过渡，请尝试在过渡时使用CSS3 translation属性.

For smooth logo transition, try to use CSS3 translate property with some transition.

示例HTML

<header>
    <img src="https://unsplash.it/100/50">
    <h4>Scroll below</h4>
</header>

示例CSS

header{
    padding:20px;
    background:#111; 
    width:100%;
    position:fixed;
    -webkit-transition: all 0.35s;
       -moz-transition: all 0.35s;
            transition: all 0.35s;}

.nav-collapse{
    padding:0}

img{
    -webkit-transition: all 0.35s;
       -moz-transition: all 0.35s;
            transition: all 0.35s;
    float:left}

img.translate{
    -ms-transform: translate(250px,0px);
    -webkit-transform: translate(250px,0px);
            transform: translate(250px,0px)}

h4{color:#FFFFFF; float:right:display:inline-block}

示例jQuery

$(window).scroll(function() {
    if ($("header").offset().top > 50) {
        $("header").addClass("nav-collapse");
        $("img").addClass("translate");
   } else {
        $("header").removeClass("nav-collapse");
        $("img").removeClass("translate");
    }
});

更新的小提琴-另一种变体

这篇关于平滑设置页眉动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！