Question

我创建了一个固定的徽标标头，当在浏览器google chrome和IE上预览时，该标头可以处理伪文本，但是当将其应用于ReDoc文件时，它不再是固定的，而是停留在文档顶部，并且向下滚动时留下。这是我以前做过的，但是由于某种原因现在不起作用。对此的Codepen是：

https://codepen.io/samreal1983/pen/LKzNLR

charset "utf-8";

/* CSS Document */

div {
  padding: 0px;
  margin: 0px;
}

.header {
  position: fixed;
  display: flexed;
  top: 0px;
  width: 100%;
  overflow: hidden;
  background-color: #165390;
}

.header-right {
  float: right;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;  
  margin: 0px, auto;
  max-width: 800px;

}

h1 {
  color: #165390;
  text-align: left;
  font-family: Montserrat,sans-serif;
  font-size:2.00em;
  flex: wrap;
}

h2 {
  color:#165390;
  text-align: left;
  font-family: Montserrat,sans-serif;
  font-size:1.8em;
  font-weight: 200;
  flex: wrap;
}

h3 {
  color:#636363;
  text-align: left;
  font-family: Montserrat,sans-serif;
  font-size:1.4em;
  font-weight: 400;
  line-height: 1.6em;
  flex: wrap;
}

h4 {
  color:#636363;
  text-align: left;
  font-family: Montserrat,sans-serif;
  font-size:1.0em;
  font-weight: 600;
  line-height: 1.6em;
  flex: wrap;
}

p {
  font-family: arial;
  font-size: 13px;
  font-color: #636363;
  line-height: 1.5em;  flex: wrap;
} 

table {
  font-family: arial;
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: 8px;

}

td:before { 
    /* Now like a table header */
    position: absolute;

    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
  background-color: #5a8fc5;
  color: white;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;      
  margin: 0px, auto;
  max-width: 800px;
}

.content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 20px;
  padding: 5px;
  top: 50px;
}

.sticky {
  position: fixed;
  top: 0px;
  width: 100%;
}

.sticky + .content {
  padding-top: 50px;
}

@media screen and (max-width: 800px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  } 
}

我不知道要尝试什么方法，因为它似乎对我来说很好用，但是客户说它不会卡在ReDoc中。

<div class="header">
  <a href="#default" class="logo">
  <a href="https://www.openbanking.org.uk">.
    <img src="./oblogo-white.png" onMouseMove="this.src='oblogo.png'" onMouseOut="this.src='oblogo-white.png'" alt="OB Logo" style="width:230px;height:40px;border:0;">
  </a>
  <div class="header-right">
  </div>

如果您能在我的代码中发现一些无法正常工作的东西，那将很有见地！谢谢，

固定的徽标标头可在所有浏览器中使用，但不适用于ReDoc吗？

0 个答案: