transform：translateY（-100%）偏移实现上滑隐藏导航栏transform:translateY(100%) 语法：
Transform字⾯上就是变形，改变的意思。在CSS3中transform主要包括以下⼏种：旋转rotate、扭曲skew、缩放scale和移动translate 以及矩阵变形matrix。下⾯我们⼀起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现，⽼样⼦，我们就从transform的语法开始吧。
语法：
transform ： none ;    也就是：  transform: rotate | scale | skew | translate |matrix;
none：表⽰不进么变换；表⽰⼀个或多个变换函数，以空格分开；换句话说就是我们同时对⼀个元素进⾏transform的多种属性操作，例如rotate、scale、translate三种，但这⾥需要提醒⼤家的，以往我们叠加效果都是⽤逗号（“，”）隔开，但transform中使⽤多个属性时却需要有空格隔开。⼤家记住了是空格隔开。
取值：
transform属性实现了⼀些可⽤SVG实现的同样的功能。它可⽤于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素，他有⼏个属性值参数：rotate;translate;scale;skew;matrix。下⾯我们
分别来介绍这⼏个属性值参数的具体使⽤⽅法：
⼆、移动translate
移动translate我们分为三种情况：translate(x,y)⽔平⽅向和垂直⽅向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅⽔平⽅向移动（X轴移动）；translateY(Y)仅垂直⽅向移动（Y轴移动），具体使⽤⽅法如下：
1、translate([, ]) ：通过⽮量[tx, ty]指定⼀个2D translation，tx 是第⼀个过渡值参数，ty 是第⼆个过渡值参数选项。如果未被提供，则ty以 0 作为其值。也就是translate(x,y)，它表⽰对象进⾏平移，按照设定的x,y参数值，当值为负数时，反⽅向移动物体，其基点默认为元素中⼼点，也可以根据transform-origin进⾏改变基点。如transform:translate(100px,20px):
2、translateX() ： 通过给定⼀个X⽅向上的数⽬指定⼀个translation。只向x轴进⾏移动元素，同样其基点是元素中⼼点，也可以根据transform-origin改变基点位置。如：transform:translateX(100px):
3、translateY() ：通过给定Y⽅向的数⽬指定⼀个translation。只向Y轴进⾏移动，基点在元素⼼点，可以通过transform-origin改变基点位置。如：transform:translateY(20px)://正数为向上，负数为向下
css属性：
.smart-scroll.scrolling.up {
border-bottom: 1px solid #f8f9fa;
-webkit-transform: translateY(0);
transform: translateY(0);
transition: all .3s ease-out;
}
.smart-scroll.scrolling {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
.smart-scroll {
rotate属性
background-color: #ffffff;
position: fixed;
top: 0;
z-index: 1020;
width: 100%;
transition: all .3s ease-out;
}
js代码：
var scrollTop = 0;
$(window).scroll(function () {//窗⼝滚动事件回调函数
var scroll = $(window).scrollTop();//窗⼝滚动条
/
/adjust menu background
if (scroll > 80) {
if (scroll > scrollTop) {
$('.smart-scroll').addClass('scrolling').removeClass('up');            } else {
$('.smart-scroll').addClass('up');
}
} else {
// remove if scroll = scrollTop
$('.smart-scroll').removeClass('scrolling').removeClass('up');        }
scrollTop = scroll;
return false;
});
实现效果图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。