jquery - 平滑变换菜单下划线

Question

我正在尝试创建一个在菜单下的页面“滚动”的边框底部。所以基本上，我使用的是单页 wordpress 主题，当用户按下菜单项时，我不想将边框底部移动到菜单下方，因此它会跟随页面。一个很好的例子可以在 http://vatorsecurities.se/ 上找到如果您按下菜单或在该页面上向下滚动，您会发现滚动后有一个小边框。您可以在 http://euronsin.farrabah.se/ 上找到我目前正在处理的网站

你可以看到当我滚动时我已经在每个菜单项下添加了一个 border-bottom 但我想要一个平滑的转换，因为它在 http://vatorsecurities.se 上。所以它不只是在菜单项之间跳转。

而且我不太确定在添加边框底部时我是否完全走错了方向，我正在考虑创建一个 margin-left 和一个 margin-right 在滚动时改变但我没有非常确定这是否是实现良好代码和美观的正确举措。

非常感谢任何帮助。

附言。我已经搜索了很多示例，但没有找到类似的东西。理解网站 #1 上的代码非常困难。

Answer 1

您举例的网站http://vatorsecurities.se/使用一个名为“active_indicator”的 id 具有以下 css 属性:

#active_indicator {
width: 136px;
height: 3px;
background: #FFF;
position: absolute;
left: 0px;
transition: 0.5s;
opacity: 0;

它还有一些额外的位置属性。

为了平滑转换，您可以使用与本网站相同的:transition: 0.5s;。