Question

我知道这里已经存在这个问题，但是我发现的解决方案不适用于我。我将标头固定在某个位置，但由于另一个问题，最终需要重新设计导航。我试图使标题再次固定在滚动上，但现在它的行为异常。我试着给标题一个高度，并使用“位置：固定”。我还尝试在#nav div中使用此功能，并且两次整个导航和徽标都向下移动到屏幕左侧，并且标题下方的大图像向上移动并接近页面顶部，在导航列表下方。这应该很简单，我浪费了另一个小时来尝试纠正此问题。我可以帮忙吗？

<header>
        <div id="nav">
            <div id="nav_left">
                <a href="index.html">HOME</a>
                <a href="services.html">SERVICES</a>
                <a href="about.html">ABOUT</a>
            </div>
            <a href="index.html" id="logo" class="noHover"><img src="images/logo_6_small.png" alt="Claire Crawford"
                    id="logo_Claire" /></a>
            <div id="nav_right">
                <a href="portfolio.html">PORTFOLIO</a>
                <a href="blog.html">BLOG</a>
                <a href="contact.html">GET IN TOUCH</a>
            </div>
        </div>
    </header>

    <section id="home_img">
        <img src="images/moodboard_frida_1250x330_roundText_center_goldTopBorder.jpg" id="moodboard"
            alt="Collage of many small, beautiful images" />
    </section>

body {
  margin: 0;
  line-height: 1.2em;
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100%;
}

/* header {
  height: 200px;
  position: fixed;
} */

#nav {
  display: flex;
  justify-content: center;
  flex-direction: row;
  height: 180px;

}

#logo {
  flex: 0 0 auto;
  padding: 0 30px;
  margin-top: 20px;
}

#nav_left {
  flex: 1 0 0;
  display: flex;
  justify-content: flex-end;
  margin-top: 100px;
}

#nav_right {
  flex: 1 0 0;
  display: flex;
  justify-content: flex-start;
  margin-top: 100px;
}

a {
  flex: 0 0 auto;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
  font-family: Tenar Sans;
  font-size: .85em;
  margin: 0 1.4em; 
  height: 20px; /* need this to correct hover effect */
}

  a {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
   } 

  a:before {
      content: "";
      position: absolute; 
      width: 100%;
      height: 1px;
      bottom: 0;
      left: 0;
      background-color: rgb(192,192,192); 
      visibility: hidden;
      -webkit-transform: scaleX(0);
      transform: scaleX(0);
      -webkit-transition: all 0.3s ease-in-out 0s;
      transition: all 0.3s ease-in-out 0s; }


    a:hover:before {
      visibility: visible;
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }

    .noHover:hover::before {
      background: none;
      visibility: hidden;
    } 


/*
.toggle-menu {
  display: none;
} */


  #moodboard {
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 70px; 
}  

 #moodboard {
    min-height: 100%;
    min-width: 1250px; 

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
}

Answer 1

当您应用localhost:8008时，布局会因为“收缩包装”而改变。您需要添加更多这样的定位：

position: fixed

更多信息： https://webplatform.github.io/docs/tutorials/absolute_and_fixed_positioning/

Answer 2

这是我的“典型解决方案”，但对我有用：

  File "c:\python27\Lib\threading.py", line 384, in notify
    raise RuntimeError("cannot notify on un-acquired lock")

这应该确保您的内容不会丢失在标题后面：

header {
  height: 200px;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #ffffff;
}

标题背景颜色在那里，因此您的内容不会在其后明显滚动。

Answer 3

尝试一下：

header{
   position:fixed;
   top:0;
   width:100%;
   margin:0 auto;
}

很难在滚动上创建固定的标题。典型的解决方案不再对我有用

3 个答案: