0
我想構建一個有點花哨的網站，但我不能解決一個問題，我一直在嘗試幾個小時，所以我想我會問你們：標題元素對齊不好
我想使2份的水平菜單在中間收縮圖像：A1 A2 A3灰色方塊B1 B2。
問題：菜單甲漂浮到右側並忽略灰色正方形。
小提琴： 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>我將非常感謝您的幫助！
你能解釋一下應該如何行動？我的意思是你要找的最終結果是什麼？ – k185
Ovokuro已經解決了這個問題，但所有的一切，我需要的灰色方塊（其中上收縮滾動）是在兩個菜單之間的中間。 –
反正謝謝！ –