Question

我必须阅读每篇关于基础粘性top-bar的帖子和文章，但仍然没有运气。

我有一个粘性的top-bar，我的div低于它{100}宽度＆amp;具有视差内容的高度。

我希望将一个班级添加到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;
}

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

基础粘性添加类

1 个答案: