0
マージンを.logo-box
とし、.logo-box
の先頭が.main-nav
(これは2つの間のスペースが0になる)までスクロールダウンするまで、マージンを.frame
に減らす必要があります。jQuery - スクロールマージンを減らす
代わりに、ページが成長していると黒に回すのではなく、不透明度は徐々に減少しているようです。
PEN:このコードを使用してhttp://codepen.io/abenjamin/pen/LNWwXG
HTML
<header class="page-header">
<div id="collapse" class="frame">
<nav class="main-nav container">
<ul>
<li><a href="#" class="active">Stuff</a></li>
<li><a href="#">Explore</a></li>
<li><a href="#">Activity</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Help</a></li>
</ul>
<div class="user"><span class="name">Aaron Benjamin</span><span class="avatar"></span></div>
</nav>
<div class="logo-box container">
<div class="logo">
<h1>Things!</h1>
<div class="drop-down">My Stuff</div>
</div><a href="#" title="New Thing" class="fab">+</a>
</div>
</div>
</header>
<div class="utils"></div>
CSS
body {
font-family: "Open Sans", arial, sans-serif;
position: relative;
}
.clear {
clear: both;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.sticky {
position: fixed !important;
top: 0;
right: 0;
left: 0;
}
.page-header {
background-image: url("https://static.pexels.com/photos/26372/pexels-photo.jpg");
background-position: bottom center;
background-size: cover;
position: fixed;
top: 0;
right: 0;
left: 0;
}
.page-header .frame {
background: rgba(0, 0, 0, 0.4);
}
.page-header .main-nav {
padding: 10px 0;
font-size: 12px;
color: white;
line-height: 28px;
overflow: hidden;
}
.page-header .main-nav ul {
float: left;
}
.page-header .main-nav ul li {
display: inline-block;
}
.page-header .main-nav ul li a {
display: block;
color: white;
text-decoration: none;
opacity: 0.5;
}
.page-header .main-nav ul li a:hover {
opacity: 1;
}
.page-header .main-nav ul li .active {
opacity: 1;
}
.page-header .main-nav ul li + li {
margin-left: 15px;
}
.page-header .main-nav .user {
float: right;
}
.page-header .main-nav .user span {
display: block;
float: left;
}
.page-header .main-nav .user .avatar {
height: 30px;
width: 30px;
background: pink;
border-radius: 50%;
margin-left: 10px;
}
.page-header .logo-box {
margin-top: 300px;
position: relative;
}
.page-header .logo {
padding: 20px 0;
clear: both;
position: relative;
overflow: hidden;
}
.page-header .logo h1 {
float: left;
background-image: url("/assets/img/studio_logo.png");
background-size: contain;
height: 50px;
width: 209px;
text-indent: 100%;
overflow: hidden;
white-space: nowrap;
}
.page-header .logo .drop-down {
float: left;
color: white;
margin-left: 15px;
border-left: solid 1px rgba(255, 255, 255, 0.3);
padding-left: 15px;
line-height: 50px;
}
.page-header .fab {
position: absolute;
bottom: -33px;
right: 0;
background: pink;
border-radius: 50%;
height: 70px;
width: 70px;
clear: both;
text-align: center;
line-height: 70px;
text-decoration: none;
color: white;
font-size: 40px;
}
.utils {
height: 2000px;
}
JS
$(window).scroll(function(){
var fromTop = $(window).scrollTop(),
space = $('.logo-box').offset().top - $('.main-nav').offset().top,
alpha = 1;
if (space > 0) {
$(".logo-box").css('margin', + (space - 1) + 'px auto 0 auto');
$(".frame").css('background-color', 'rgba(0,0,0,' + (alpha + 0.1) + ')');
}
console.log(space);
});
私はクラスをトグルし、CSSファイルに高さを設定すると良いだろうと思います。 JSの設定よりも理にかなっています。 –
しかし、それは徐々に変化する必要があります。あなたが2つのクラスを持っているなら、私は誤解している場合を除いて、すべて展開するか、まったく展開しません。私はそれを改善するために働くでしょう:) – Dehli
これは "収縮"のマージンを達成するようです - しかし、私はまだ '.frame'バックグラウンド値で徐々に暗くなるアルファに対処する必要があります。 –