Jquery 当滚动到达某一点时，使元素粘滞的问题

我对一件本该简单的事感到很不舒服。我有一个特定的div，当它向上滚动到某个点时，我想让它变粘（固定）。但它不起作用。我让它变粘的条件似乎从未得到满足。事实上，无论我滚动多少次，我跟踪的偏移量似乎都不会改变。有人能给我建议吗

html:

---

我已经使它简单，并上传到代码笔。这会解决你的问题。我在CSS中也做了一些小的更改，但是您可以忽略它们，集中精力在它的jquery部分

代码笔：

jQuery：

$(window).scroll(function() {
  var elTop = $("wrapper").position(),
    window = $("body").scrollTop(),
    wrapTop = elTop.top - 80;

  if (window >= wrapTop) {
    $("#chapters").addClass("sticky");
    console.log("sticky");
  } else {
    $("#chapters").removeClass("sticky");
  }
});

---

最后我不得不把代码放在我的索引页上——这不是理想的情况。但代码如下所示：

$(function () {
    $(window).scroll(function () {

                    if ($(window).width() > 768) {
                        if ($(this).scrollTop() > 1150) {
                            $('#chapters').addClass('sticky');

                        } else {
                            $('#chapters').removeClass('sticky');
                        }
                    }


         });
    });

navbar {
    width: 100vw;
    height: 50px;
    background: linear-gradient(rgb(0, 0, 0),rgba(0, 0, 0, 0.75));
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding: 0 10px;
    position: fixed;
    z-index: 3000;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
wrapper {
    transition: background 2.0s ease;
    display: block;
    position: relative;
}

wrapper p {
    transition: all 2.0s ease;
}
section.module.parallax {
  height: 1200px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
section.module.parallax-1 {
  background-image: url("../img/main/myimage.jpg");
  position: relative;
}
#chapters {
    margin-bottom: 30px;
    position: absolute;
    width: 100%;
    top: -30px;
}
 #chapters.sticky {
     position: fixed;
     top: 50px;
  }
.linkChapter {
    cursor: pointer;
    background-color: black;
    color:white;
    padding: 3px 7px;
    display:inline-block;
}
.linkChapter:hover {
    opacity: .7;
}

$(window).scroll(function() {
  var elTop = $("wrapper").position(),
    window = $("body").scrollTop(),
    wrapTop = elTop.top - 80;

  if (window >= wrapTop) {
    $("#chapters").addClass("sticky");
    console.log("sticky");
  } else {
    $("#chapters").removeClass("sticky");
  }
});

$(function () {
    $(window).scroll(function () {

                    if ($(window).width() > 768) {
                        if ($(this).scrollTop() > 1150) {
                            $('#chapters').addClass('sticky');

                        } else {
                            $('#chapters').removeClass('sticky');
                        }
                    }


         });
    });