transform: translateY(-100%)偏移实现上滑隐藏导航栏

最新推荐文章于 2025-04-16 17:00:29 发布

「已注销」

最新推荐文章于 2025-04-16 17:00:29 发布

阅读量2.1w

点赞数 4

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_43571807/article/details/107106641

版权

前端学习专栏收录该内容

3 篇文章

订阅专栏

本文介绍了CSS3中的transform属性，特别是translateY(-100%)的用法，用于上滑隐藏导航栏。内容详细解释了transform的语法、取值以及translate系列方法的使用，包括translate、translateX和translateY，提供了相关示例代码和实现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 {
    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;
    });

实现效果图：