且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

当外部链接打开Tab时,页面滚动到顶部也固定了导航栏

更新时间:2023-10-28 23:47:10

将类.anchor放在锚点(目标)上。

Put the class .anchor on the anchor (the target).

如果导航栏仅固定在某些尺寸上,那么??? px所在的位置,放置该断点的最小宽度(922px为md及以上,1200px适用于大型和上型,768px适用于小型和以上型号。

If the navbar is only fixed on certain sizes, then where the ???px is, put the min-width of that breakpoint (992px for md and up, 1200px for large and up, and 768px for small and up).

@media (min-width: ???px) {
  .anchor {
    padding-top: 60px;
    margin-top: -60px;
  }
}

如果在所有屏幕尺寸都固定:

If fixed at all screen sizes:

 .anchor {
    padding-top: 60px;
    margin-top: -60px;
  }

假设导航栏上的高度为50px。另外,根据getbootstrap.com示例,如果您的身体顶部填充具有导航栏高度的填充,则可能

Assumes height of 50px on the navbar. Also, this may not be necessary if your body top padding has the padding of the height of navbar as per the getbootstrap.com examples.