Question

我尝试制作类似于其中一个缩小尺寸的标题，并在页面开始向下滚动时滑动元素。不同的是，我见过的大多数这类标题都有一个带背景颜色的大标题，我的客户希望标识位于导航栏的单独空间。顶部有一个空白区域，里面只有徽标，然后是带有背景颜色的导航栏。所以我试图让导航条在滚动时粘到顶部并将徽标滑动到不同的位置。我尝试过动画和过渡动画，但它仍然在滚动时非常震撼。

这里有一些使用jQuery在滚动时添加css类的当前代码，然后以不同方式定位元素。我实际上正在使用sass并且避免将其更改为常规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;
}

Answer 1

为了平滑过渡标题和图像/徽标，您需要做的是将这些标记绑定到Jquery Scroll事件并相应地添加和删除类。

Check this fiddle here

为了平滑徽标转换，请尝试使用CSS3 translate属性进行一些转换。

示例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");
    }
});

Updated fiddle - another variant

平滑地设置标题动画

1 个答案: