基金會粘性添加類

我一定已經閱讀每篇文章和基礎粘滯top-bar爲此，仍然沒有運氣。基金會粘性添加類

我有一個粘性top-bar，我有一個div下面它設置爲100％寬度&高度與視差內容。

我期待在top-bar上添加一個班級，因爲div的高度通過它。

目前我有這個設置除了滾動位置上的類更改而不是由所需的div觸發。

和代碼

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

來源

2016-04-28 Mr Jonny Wood

好的，所以我有一些工作，但只有調整瀏覽器窗口的大小。我相信對此也有一個簡單的解決方法，只是還沒有達到目標。

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

來源

2016-05-02 20:56:14

基金會粘性添加類

回答

相關問題