Javascript 不使用外部库在徽标下创建粘性导航栏

正如标题所暗示的，我完全想创建一个在导航栏上方有一个大徽标的网页。当页面向下滚动时，此导航栏将向上移动，直到它在屏幕顶部锁定到位。然后，我想在导航栏下方显示一个较小的徽标，并将其锁定到位。我已经在这个网页和其他地方搜索了四天，没有找到解决方案。给出的解决方案通常涉及下载jquery库或引导库。如果可能的话，我不希望使用这两种方法。这样做的原因是因为我创建这个网页是作为一种学习体验，在其他地方保存代码会遗漏一些此时会让我感到困惑的部分。所以基本上我想知道它是如何工作的，而不是简单的复制粘贴方法，它有一个库来完成所有的工作

以下是我所看到的thusfar，它完全基于这个例子：

HTML:

JS:

---

上面这个例子的问题是，它似乎只在codepen页面上起作用。当我将它从网站上取下并保存到记事本++文档中并打开它的那一刻，导航栏突然滚动超过其预定点并完全脱离屏幕。这和我在其他教程中遇到的问题是一样的。要么导航栏无法停留在屏幕上，要么徽标将成为文本滚动经过的背景，使导航栏在徽标上方停留约3/4。

通过CSS技巧查看这篇文章；这是我自己做过几次之后的一个好例子

这个代码示例也非常有用：

HTML:

JavaScript:

var wrap = $("#wrap");

wrap.on("scroll", function(e) {

  if (this.scrollTop > 147) {
    wrap.addClass("fix-search");
  } else {
    wrap.removeClass("fix-search");
  }

});

引导示例
.粘贴{
排名：0；
宽度：100%；
}
.粘贴+.容器液体{
填充顶部：70px；
}
引导粘贴示例
使用jQuery修复了滚动条上的导航条（粘性）
滚动此页面以查看导航栏的行为

滚动通过页眉元素后，导航栏将附加到页面顶部







一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
一些文本以启用滚动
$（文档）.ready（函数（）{
/*在标题下方滚动后粘贴导航栏*/
$（“.navbar”）.affix（{offset:{top:$（$header”）.outerHeight（true）}）；
});

这不需要链接到其他地方。

$（函数（）{
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）>=290）{
$（'nav.main nav'）.addClass（'stickytop'）；
}
否则{
$（'nav.main nav'）.removeClass（'stickytop'）；
}
});
});
正文{
字体：16px/1.5“Raleway”，Arial，无衬线；
颜色：#fff；
保证金：0；
填充：0
}
h1{
字体大小：50px；
字体大小：300；
文本对齐：居中；
字号：700
}
跨度{
颜色：#27ae60；
字号：700
}
氢{
字体大小：35px；
文本对齐：左对齐；
左边距：-20px
}
导航{
宽度：350px；
保证金：0自动；
显示：块
}
导航演示-导航a{
字号：19px；
显示：内联块；
文本对齐：居中；
字体系列：'Lato'，无衬线；
颜色：#27ae60；
字体大小：400；
填充：5px15px；
文本转换：大写；
边界半径：2px；
字母间距：1px；
文字装饰：无；
右边距：10px；
边框：2px实心#ecf0f1；
边界半径：无
}
导航a.激活，导航a:悬停{
背景#ecf0f1；
颜色：#27ae60
}
标题{
高度：250px；
背景：#2ecc71；
填充：23px 0
}
主导航{
背景：#fff；
高度：60px；
边框底部：1px实心#达达；
文本对齐：居中；
}
主导航-主导航a{
字体系列：'Lato'，无衬线；
字体大小：20px；
文字装饰：无；
显示：内联块；
填充：15px 19px；
颜色：#27ae60；
}
.集装箱{
显示：内联；
保证金：0自动；
}
nav.main-nav.stickytop{
位置：固定；
排名：0
}
.内容{
颜色：#222；
填充：50px；
-webkit列数：3；
/*铬、狩猎、歌剧*/
-moz列数：3；
/*火狐*/
列数：3；
-webkit列间距：40；
柱间距：40px；
}
.含量h2{
保证金：0；
}
@介质和全部（最小宽度：360px）和（最大宽度：480px）{
标题{
填充：5px055px；
}
主导航-主导航a{
字号：17px；
}
主导航{
高度：55px；
}
.集装箱{
保证金：0自动；
宽度：50%；
}
.内容{
-webkit列计数：1；
/*铬、狩猎、歌剧*/
-moz列数：1；
/*火狐*/
列数：1；
}
}
@媒体屏幕和屏幕（最大宽度：480px）{
标题{
填充：5px055px；
}
主导航-主导航a{
字号：17px；
}
主导航{
高度：55px；
}
.集装箱{
宽度：92%；
}
.内容{
-webkit列计数：1；
/*铬、狩猎、歌剧*/
-moz列数：1；
/*火狐*/
列计数：1
}
}

创建粘性导航
主要内容在这里！
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。超出
* {
  box-sizing: border-box;
}
li {
    float: left;
}
body {
  margin: 0;
  padding-top: 250px;
}
header {
  height: 300px;
  padding-top: 50px;
  background: #f07057;
}
.main-nav,
.main {
  position: relative;
}
.main-nav {
  background: #fff;
  height: 80px;
  z-index: 150;
  margin-bottom: -80px;
  box-shadow: 0 2px 3px rgba(0,0,0,.4);
}
header,
.main-nav-scrolled {
  position: fixed;
  width: 100%;
  top: 0;
}
.main {
  background: #f2f2e8;
  padding: 110px 50px 50px;
  column-count: 2;
  column-gap: 40px;
  width: 100%;
}

var  mn = $(".main-nav");
    mns = "main-nav-scrolled";
    hdr = $('header').height();

$(window).scroll(function() {
  if( $(this).scrollTop() > hdr ) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

<div class="wrap" id="wrap">

<header class="top-header">
    <span class="menu-icon">☰</span>
  </header>

  <div class="search">
    <input type="search" placeholder="Search or type URL" />
  </div>

  <div class="top">
    <div class="hero"></div>
  </div>

  <main>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </main>

</div>

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}

.wrap {
  width: 320px;
  border: 1px solid #ccc;
  height: 480px;
  overflow: auto;
  position: relative;
}
.top-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 60px;
  .menu-icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 18px 20px;
  }
  .fix-search & {
    background: #eee;
  }
}

.search {
  position: absolute;
  top: 155px;
  left: 20px;
  right: 20px;
  input {
    width: 265px;
    border: 1px solid #ccc;
    padding: 8px;
    font-size: 15px;
    transition: width 0.2s;
    -webkit-appearance: none;
  }
  .fix-search & {
    position: fixed;
    top: 10px;
    input {
      width: 250px;
    }
  }
}

.top {
  height: 250px;
  padding-top: 40px;
}
.hero {
  width: 200px;
  height: 100px;
  background: #ccc;
  margin: 0 auto;
}

main {
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  div {
    width: 125px;
    height: 80px;
    background: #ccc;
    margin: 0 0 20px 0;
  }
}

var wrap = $("#wrap");

wrap.on("scroll", function(e) {

  if (this.scrollTop > 147) {
    wrap.addClass("fix-search");
  } else {
    wrap.removeClass("fix-search");
  }

});