Question

我正在尝试构建一个导航栏，其他站点可以简单地在其站点上添加/嵌入导航栏。

更具体地说，我正在使用多个不同的网站平台，并且我想使用共享的导航栏将网站之间的体验联系起来。

我希望能够通过JavaScript通过HTML / CSS注入来做到这一点。

我尝试过这样的事情：

function addNavBar() {
  // inject css
  let css = document.createElement("link");
  css.rel = "stylesheet";
  css.href = "./navbar.css";
  document.head.append(css);

  // inject html
  var nav_container = document.createElement("div");
  nav_container.id = "my-nav-bar";
  nav_container.innerHTML = navbar_html;
  document.body.prepend(nav_container);
}

但是，这样的计划在全页应用程序上失败，该应用程序会执行许多技巧以确保全屏显示内容。理想情况下，我可以欺骗视口高度比其低100px的原始HTML，只需将固定的导航栏放在此处即可。这可能吗？

什么样的黑客可以启用这种情况？

Answer 1

您可以使用CSS样式来近似：

body{
    position: absolute;
    top: 100px;
}

.navbar{
    position: absolute;
    top: 0;
    width: 100%;
}

唯一的问题是，如果页面中有绝对元素（或常规流程之外的其他元素），则它们不会受到覆盖的影响。

创建可添加/嵌入到任何站点的导航栏

1 个答案: