当到达英雄区域的底部时，将静态导航栏更改为滚动固定 [英] change static navbar to fixed on scroll when bottom of hero section is reached

问题描述

当到达特定部分的末尾时，如何使静态定位的导航栏固定?

How can I make the static positioned navigation bar become fixed when the end of specific section is reached?

小提琴

$(document).on("scroll", function() {
    var navbar = $(".static-navbar");
    navbar.addClass("fixed-navbar");
})

我正在尝试使导航栏在到达红色部分"后立即变得固定.
通过上面的jQuery代码，我成功在滚动事件触发后立即将其修复，但这不是我想要的.

Im trying to make the navigation bar become fixed as soon as "red section" is reached.
With this jQuery code above, I managed to get it fixed as soon as the scroll event is fired, but that's not what I'm looking for.

推荐答案

编辑

我按评论中的要求添加了slideDown功能...
而且看起来很棒！

EDIT

I added the slideDown feature, as asked in comments...
And it is looking great!

对此要说的两件事:

Two things to say about this add:

1. .slideDown()用于设置隐藏元素的动画.
   因此，在您的情况下，您必须先将其隐藏.
2. 然后，需要一个标志"，以免它被动画化太多次...
   scroll事件像AK47一样触发！
   ;)
3. 关于slideUp()，您必须等待动画的结尾以删除使其固定的类，然后确保它没有被隐藏.因此，您可以在slideUp()回调中执行此操作.

1. .slideDown() is intended to animate a hidden element.
   So in your case, you have to hide it first.
2. Then, a "flag" is needed to avoid it being animated too many times...
   The scroll event is firing like an AK47!
   ;)
3. About the slideUp(), you have to wait the end of the animation to remove the class making it fixed, then ensure it isn't hidden. So you do this in the slideUp() callback.

---

---

我想您希望在此代码段中找到类似的内容.

I guess you want something like in this snippet.

您只需比较使用.scrollTop()和.fullscreen height值滚动的像素数.

You just have to compare how many pixels were scrolled, using .scrollTop() to the .fullscreen height value.

这很容易将导航栏设置为固定或静态.

Then it is easy to set your navigation bar as fixed or static.

// Navigation state "flag"
var isFixed=false;

$(document).on("scroll", function() {
  var navbar = $(".static-navbar");
  var heroSectionHeight=$(".fullscreen").height();

  // Set fixed
  if( $(window).scrollTop()>=heroSectionHeight && !isFixed ){
    isFixed=true;
    navbar.hide().addClass("fixed-navbar").slideDown(600);
  }

  // Set static
  if( $(window).scrollTop()<heroSectionHeight && isFixed ){
    isFixed=false;
    navbar.slideUp(600,function(){
      navbar.removeClass("fixed-navbar").show();
    });
  }
});

body {
  margin: 0;
}
.fullscreen {
  width: 100%;
  height: 100vh;
  background-color: #000;
  color: #fff;
  text-align: center;
}
.bg-red {
  background-color: red;
}
.static-navbar {
  width: 100%;
  position: static;
  padding: 25px 0;
  background-color: rgba(0, 0, 0, 1);
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.fixed-navbar {
  position: fixed;
  background-color: rgba(255, 255, 255, 1);
  color: #000;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>


<div class="fullscreen">
  <nav class="static-navbar">
    Static Navbar
  </nav>
  <div style="padding-top: 280px;">HERO SECTION</div>
</div>

<div class="fullscreen bg-red" style="padding-top: 50px; padding-bottom: 50px;">
  <div style="padding-top: 280px;">RED SECTION</div>
</div>

此摘录在全页模式下效果更好
(否则，高度太小会闪烁)

This snippet is better seen in full page mode
(Otherwise, the height is too small and it flickers)

这篇关于当到达英雄区域的底部时，将静态导航栏更改为滚动固定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！