jquery - 基础粘性添加类

Question

为此，我一定已经阅读了关于 foundation sticky 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");
        }
    });