javascript - header 元素未对齐

Question

我正在尝试构建一个有点花哨的网站，但我无法解决一个问题，我已经尝试了几个小时，所以我想我会问问你们:

我想制作一个由两部分组成的水平菜单，中间有一个缩小的图像:A1 A2 A3 GRAY SQUARE B1 B2。

问题:菜单 A 向右浮动并忽略了灰色方 block 。

fiddle : https://jsfiddle.net/8d890hmx/

$(document).on('scroll', function() {
  if ($(document).scrollTop() >= 200) {
    $('.nav img').removeClass('logos');
    $('.nav img').addClass('sticky');
  } else {
    $('.nav img').removeClass('sticky');
    $('.nav img').addClass('logos');
  }
});

$(document).on('scroll', function() {
  if ($(document).scrollTop() >= 300) {
    $('ul').removeClass('ul-big');
  } else {
    $('ul').addClass('ul-big');
  }
});

$(document).on('scroll', function() {
  if ($(document).scrollTop() >= 300) {
    $('.nav').addClass('ul-bcg');
  } else {
    $('.nav').removeClass('ul-bcg');
  }
});

body,
html {
  height: 100%;
}

body {
  background-color: white;
  margin: 0 auto;
}

.placeholder {
  width: 100%;
  height: 450px;
}

p {
  color: white;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
}

.nav {
  position: fixed;
  top: 0;
  margin-top: 0;
  padding-top: 0;
  max-height: 200px;
  width: 100%;
  text-align: center;
  z-index: 2;
  background-color: black;
  opacity: .5;
}

.logos {
  width: 250px;
  transition: all 0.3s ease-in-out;
  z-index: 1;
  padding-top: 20px;
  margin: 0 auto;
}

.sticky {
  width: 100px;
  transition: all 0.3s ease-in-out;
  display: inline-block;
}

.ul {
  position: absolute;
  transition: all 0.3s ease-in-out;
  width: 30%;
  display: inline-block;
  height: 150px;
  margin: 45px;
}

.ul-big {
  display: none;
  transition: all 0.3s ease-in-out;
}

li {
  display: inline;
  color: white;
  padding: 10px;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
  transition: all 0.3s ease-in-out;
}

a {
  color: inherit;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: inherit;
  -webkit-font-smoothing: antialiased;
  font-size: inherit;
  text-decoration: none;
}

a:hover {
  color: grey;
  transition: 0.5s;
}

h1 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 30px;
  -webkit-font-smoothing: antialiased;
  font-weight: lighter;
  color: white;
}

.content {
  clear: both;
  background-color: black;
  background: rgba(0, 0, 0, 0.7);
  padding: 3%;
  z-index: -1;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="container">
  <div class="nav">
    <div class="ul">
      <ul class="ul-big">
        <li><a href=horses.html>A1</a></li>
        <li><a href=shows.html>A2</a></li>
        <li><a href=#>A3</a></li>
      </ul>
    </div>

    <img class='logos' src="http://www.arenakettering.co.uk/wp-content/uploads/grey-square-288x300.png">

    <div class="ul">
      <ul class="ul-big">
        <li><a href=#>B1</a></li>
        <li><a href=#>B2</a></li>
      </ul>
    </div>

  </div>

</div>




<div class="placeholder"></div>
<div class="content">
  <h1> Main text</h1>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>


</div>

非常感谢您的帮助!

Answer 1

使用 position: absolute在 .ul正在将其从正常流程中取出并首先显示图像。

解决这个问题的一种方法是为每个 ul 添加一个唯一的类并使用边距来分隔事物。

另请注意 .ul已在 nav 内居中通过使用 left和 right属性和 margin: auto .

fiddle

$(document).on('scroll', function() {
  if ($(document).scrollTop() >= 200) {
    $('.nav img').removeClass('logos');
    $('.nav img').addClass('sticky');
  } else {
    $('.nav img').removeClass('sticky');
    $('.nav img').addClass('logos');
  }
});

$(document).on('scroll', function() {
  if ($(document).scrollTop() >= 300) {
    $('ul').removeClass('ul-big');
  } else {
    $('ul').addClass('ul-big');
  }
});

$(document).on('scroll', function() {
  if ($(document).scrollTop() >= 300) {
    $('.nav').addClass('ul-bcg');
  } else {
    $('.nav').removeClass('ul-bcg');
  }
});

body,
html {
  height: 100%;
}

body {
  background-color: white;
  margin: 0 auto;
}

.placeholder {
  width: 100%;
  height: 450px;
}

p {
  color: white;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
}

.nav {
  position: fixed;
  top: 0;
  margin-top: 0;
  padding-top: 0;
  max-height: 200px;
  width: 100%;
  text-align: center;
  z-index: 2;
  background-color: black;
  opacity: .5;
}

.logos {
  width: 250px;
  transition: all 0.3s ease-in-out;
  z-index: 1;
  padding-top: 20px;
  margin: 0 auto;
}

.sticky {
  width: 100px;
  transition: all 0.3s ease-in-out;
  display: inline-block;
}

.ul {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  transition: all 0.3s ease-in-out;
  width: 100%;
  display: inline-block;
  height: 150px;
  margin-top: 45px;
}

.ul-one ul {
  margin-right: 300px; /* adjust as you need */
}

.ul-two ul {
  margin-left: 250px; /* adjust as you need */
}

.ul-big {
  display: none;
  transition: all 0.3s ease-in-out;
}

ul {
  padding: 0;
  margin: 0;
}

li {
  display: inline;
  color: white;
  padding: 10px;
  font-weight: 200;
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
  transition: all 0.3s ease-in-out;
}

a {
  color: inherit;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: inherit;
  -webkit-font-smoothing: antialiased;
  font-size: inherit;
  text-decoration: none;
}

a:hover {
  color: grey;
  transition: 0.5s;
}

h1 {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 30px;
  -webkit-font-smoothing: antialiased;
  font-weight: lighter;
  color: white;
}

.content {
  clear: both;
  background-color: black;
  background: rgba(0, 0, 0, 0.7);
  padding: 3%;
  z-index: -1;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="nav">
    <div class="ul ul-one">
      <ul class="ul-big">
        <li><a href=horses.html>A1</a></li>
        <li><a href=shows.html>A2</a></li>
        <li><a href=#>A3</a></li>
      </ul>
    </div>

    <img class='logos' src="http://www.arenakettering.co.uk/wp-content/uploads/grey-square-288x300.png">

    <div class="ul ul-two">
      <ul class="ul-big">
        <li><a href=#>B1</a></li>
        <li><a href=#>B2</a></li>
      </ul>
    </div>

  </div>

</div>




<div class="placeholder"></div>
<div class="content">
  <h1> Main text</h1>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>

</div>