jQuery - 減少滾動邊距

Question

我需要減少.logo-box上的邊距和.frame上的不透明度，直到.logo-box的頂部滿足.main-nav（兩者之間的間距爲0），而用戶正在向下滾動。

取而代之的是，頁面似乎增長，轉向黑色，而不是不透明度逐漸降低。

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); 
}); 

Answer 1

使用此代碼似乎完成你的願望。

$(window).scroll(function() { 
    var requiredOffset = 300; 

    // Between 0 and 1 (inclusive) 
    var percentage = Math.min(1, $(window).scrollTop()/requiredOffset); 

    // Starts at requiredOffset and goes down to 0   
    var marginTop = requiredOffset * (1 - percentage); 

    // Opacity of frame 
    var alpha = percentage; 

    $(".logo-box").css('margin-top', marginTop); 
    $(".frame").css('background-color', 'rgba(0,0,0,' + alpha + ')'); 
}); 

這裏是我的叉筆：http://codepen.io/dehli/pen/GZmKJO