Javascript 滚动上的粘性导航，从中心延伸导航宽度

我在滚动条上有一个粘性导航条，当导航条“粘性”时，我想做两件事：

• 我想把导航宽度从中心扩大到100vw（或100%），但我不知道怎么做 我试过这个：

• 我还希望导航定位在顶部0

---

所以我尝试了一些东西，这是我得到的，但正如你所看到的，导航宽度没有从中心扩展，当导航定位到顶部0时，有一个我并不想要的动画：

如果你在

.header

和

heightHeader

这样的转换选项中进行更改

-webkit-transition: width 0.8s ease;
-moz-transition: width 0.8s ease;
-ms-transition: width 0.8s ease;
transition: width 0.8s ease;

---

您将只设置

width

属性的动画，容器将从中心展开，并且您将避免设置

顶部的动画。平滑度的问题从菜单中的设置
左边距：auto
开始。根据我的经验，如果您更改
.header
和
heightHeader
这样的转换选项，则无法设置
auto
属性的动画。

-webkit-transition: width 0.8s ease;
-moz-transition: width 0.8s ease;
-ms-transition: width 0.8s ease;
transition: width 0.8s ease;

您将只设置
width
属性的动画，容器将从中心展开，并且您将避免设置
顶部的动画。平滑度的问题从菜单中的设置
左边距：auto
开始。根据我的经验，您无法设置
auto
属性的动画。
尽管您的代码非常混乱。请尝试为您的2个css选择器使用以下代码：

header{
    position:absolute;
    top:54px;
    left:0;
    right:0;
    margin:auto;
    transition: .3s;
    z-index:500;
    transform-origin: center;
    transform: scaleX(0.95);
}

.heightHeader{
    position:fixed;
    top:0;
    width:100vw;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    transition: all 0.8s ease;
    transform: scale(1);
}


虽然你的代码很乱。请尝试为您的2个css选择器使用以下代码：

header{
    position:absolute;
    top:54px;
    left:0;
    right:0;
    margin:auto;
    transition: .3s;
    z-index:500;
    transform-origin: center;
    transform: scaleX(0.95);
}

.heightHeader{
    position:fixed;
    top:0;
    width:100vw;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -ms-transition: all 0.8s ease;
    transition: all 0.8s ease;
    transform: scale(1);
}


动画被转换为
过渡
，这在本代码中得到了解决。我已经删除了所有动画，因为你说你不想要它。


tranform origin
将从
中心扩展宽度

无需更改
导航类
，因为您已经在更改
标题
查看整页模式下的结果

//滚动上的粘性导航
const header=document.querySelector（'header'）；
const nav=document.querySelector（“#main”）；
const topOfNav=header.offsetTop；
函数stickyNav（）{
如果（window.scrollY>=topOfNav）{
//导航栏高度
header.classList.add（'heightHeader'）；
}否则{
header.classList.remove（'heightHeader'）；
}
}
window.addEventListener（'scroll'，stickyNav）
*{
保证金：0；
填充：0；
框大小：边框框；
}
a{
文字装饰：无；
}
李{
列表样式：无；
}
标题{
位置：绝对位置；
顶部：54px；
左：0；
右：0；
保证金：自动；
宽度：95vw；
变换原点：中心；
z指数：500；
}
.高度头{
位置：固定；
排名：0；
宽度：100vw；
变换原点：中心；
}
主导航{
高度：120px；
盒影：0px 15px 30px 0000001A；
边界半径：15px；
背景色：#fff；
显示器：flex；
对齐项目：居中；
位置：相对位置；
}
.固定导航.导航菜单{
左边距：自动；
}
导航主标志{
左边距：50像素；
}
.导航菜单{
左边距：自动；
显示器：flex；
}
.导航菜单.主菜单项{
位置：相对位置；
}
.主菜单项：非（：最后一个子项）{
边际：0.44px；
}
.主菜单项：最后一个子菜单项{
左边距：44px；
右边距：342px；
}
.主菜单项a{
字体重量：较轻；
字体大小：14px；
字母间距：2.8px；
}
分区{
高度：400px；
宽度：300px；
背景：天蓝色；
}








Lorem ipsum，dolor sit amet Concertetur Adipising Elite。最重要的是，我们必须保持清醒，在自由的世界里，我们需要一个伟大的解决方案！真正的颞肌群。身份证件
如果你是一个不流动的人！圣乌拉姆共和国的准动物创造了时间上的大手艺，自由的权利，阻碍了新人类的智慧？
前FUGIA expedita hic id.Quibusdam assumenda natus，totam cum eos veniam esse！工作坊，工作坊，工作坊，工作坊，工作坊！
艾斯，莫迪？事实上，所有人的智慧水平都应该与发明者的自然属性相同，但不包括其他人？德莱尼蒂食腐动物Repudiandae deleniti voluptatem dicta。
Accusamus在autem eos，molestiae beatae mollitia处阻碍了它。面部劳动大部。一个铜酸盐的负号，最大的错误是什么？
奥迪奥·乌兰（Odio ullam Perpiciatis qui recussandae officiis voluptatibus nisi dolore and sequi maxime）、iusto nostrum assumenda、驱虫剂是一种溶解性药物，可将其分解为两种成分。Laborum，laboriosam harum。帕里图尔，阿斯佩纳图尔！
小动物共同照明。Qui，实习建筑设计师，在iusto earum nulla porro officia的资格认证？占有欲，暂时的最大自由，劳动的最大限度，最小的自我保护？
作为官方的发明者，我不知道为什么我会阻止我的行为，因为我明白为什么我会被指控，为什么我会被判无罪？奈斯库特，福吉亚特。
排斥性耳炎疫苗中的小白鼠隐孢子虫是一种常见的寄生虫，通常是一种寄生虫。非beatae sequi发明家nihil adipisci iure的圣石锻造房！
普罗维登特律师事务所（Provident ab除外）别名为“高贵的时间人”（aperiam tempora Dignessimos nostrum），简称“最大的债务人”（maxime debitis atque）。自由之神和圣多洛里巴斯·德莱尼蒂·贝塔·马克西姆·多洛雷·劳里奥