ファンデーションスティッキー追加クラス

Question

これは基本スティッキーtop-barのすべての記事と記事を読む必要があります。

私は粘着性を持っていますtop-bar、私はdivの下に100％幅&高視差コンテンツに設定しました。

top-barにクラスを追加すると、フルハイトの底にdivが追加されます。

は現在、私はこのすべての希望divによってトリガーされたクラスのスクロール位置の変化ではなく以外に設定しています。

Here's a codepen

とコード

HTML：

<div data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small; btmAnchor: content:bottom;"> 
    <div class="top-bar"> 
     <div class="top-bar-left"> 
     <ul class="menu"> 
      <li class="menu-text"><a href="<?php echo home_url(); ?>">Site</a></li> 
     </ul> 
     </div> 
     <div class="top-bar-right"> 
     </div> 
    </div> 
    </div> 

</header> 
<!-- end .header --> 

<div id="onscreen"> 
    <div class="parallax-background"> 
    <div class="intro-text"> 
     Parralax 
     <p><i class="fi-arrow-down"></i></p> 
    </div> 
    </div> 

</div> 

<div id="content"> 
</div> 

JS：

$(document).foundation(); 

jQuery(document).on("scroll", function() { 
    if (jQuery(document).scrollTop() > 100) { 
    jQuery('.top-bar').addClass('shrink'); 
    } else { 
    jQuery('.top-bar').removeClass('shrink'); 
    } 
}); 

SCSS：

@mixin box-shadow($horiz : 0 , $vert : 4px , $blur : 8px , $spread : 0px , $color : rgba(0,0,0,0.2)){ 
    -webkit-box-shadow: $horiz $vert $blur $spread $color; 
    -moz-box-shadow: $horiz $vert $blur $spread $color; 
    box-shadow: $horiz $vert $blur $spread $color; 
} 

#navigation { 
    width:100%; 
    min-height:3em; 
    position:fixed; 
    _position:absolute; 
    top:0; 
    _top:expression(eval(document.body.scrollTop)); 
    z-index:50; 
    transition: all .6s; 
} 

#onscreen { 
    height: 100%; 
    background-position: 50% 50%; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-color:#555; /*** only needed if you're not using a background image ****/ 
    margin:0; 
    padding:5em 0 0 0; 
} 

.parallax-background { 
    height: 100%; 
    position: fixed; 
    width: 100%; 
    z-index:0; 
} 

.intro-text { 
    font-size: 50px; 
    color: #fff; 
    text-align: center; 
    margin-top: 15%; 
} 

.parallax-content { 
    max-width: 100%; 
    position: relative; 
    top: 500px; 
    padding: 50px; 
    font-size: 20px; 
    background-color: #fff; 
} 

#content { 
    height:2000px; 
    position: relative; 
    background: #ccc; 
    z-index: 1; 
} 
.top-bar { 
    margin-top: 0; 
    width: 100%; 
    background: none; 
    .title-area { 
     z-index: 1; 
    } 
    transition: background .25s ease; 
} 
.shrink { 
    background: rgba(black, .9); 
    @include box-shadow; 
} 

Answer 1

さて、ブラウザウィンドウのサイズを変更するまでは問題ないです。私はこれも簡単な修正があると確信しています、まだそこにはいません。

// This works but not with window resize 
    var nav = jQuery("#navigation"); 
    var content = jQuery("#content").offset(); 

    jQuery(window).scroll(function(){ 
     var screenPosition = jQuery(document).scrollTop() + 100; 
     if (screenPosition < content.top) { 
      nav.removeClass("shrink"); 
     } 
     if (screenPosition >= content.top) { 
      nav.addClass("shrink"); 
     } 
    });