Javascript 如何创建在向下滚动页面时更改的标题？

我想创建一个导航栏，当页面向下滚动时，导航栏会发生变化，类似于页面上的导航栏

我不仅想制作一个保持在顶部的粘性标题，我知道如何在CSS中做到这一点。但我还想在滚动到某个点后更改其高度和嵌套在其中的对象的样式

我已经做了一些研究，大多数人说应该在jQuery中使用.scroll函数或类似的函数来完成，但我没有找到关于如何完成的完整解释。老实说，我不太熟悉jQuery或Javascript

我为类似问题找到的所有答案都不允许我编辑或更改标题中的嵌套内容，只允许更改标题本身的样式。 如果有人能为我详细解释一下这个过程，我将不胜感激。

---

我真的很想学习如何做到这一点，而不仅仅是复制一些代码并粘贴到我的网站上。

这里有一个通用的解决方案

这涉及到拥有多个标题（其中可能包含完全不同的内容），您可以根据滚动位置从中选择显示一个标题。每个标题元素都有一个

数据可见范围

属性，用于定义应显示的最小和最大滚动位置

演示：

HTML

<div class="header header-1" data-visible-range="0-100">Header 1</div>
<div class="header header-2" data-visible-range="101-500">Header 2</div>
<div class="header header-3" data-visible-range="501-">Header 3</div>
<div class="body">BODY</div>

JS

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
}
.header-1 {
    background-color: yellow;
    display: block; /* header 1 is visible by default */
}
.header-2 {
    background-color: red;
}
.header-3 {
    background-color: green;
}
.body {
    padding-top: 50px;
    height: 2000px;   
}

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    var headerToDisplay = false;
    $('.header[data-visible-range]').each(function() {
        var range = $(this).data('visible-range').split('-');
        range[0] = range[0] ? parseInt(range[0], 10) : 0;
        range[1] = range[1] ? parseInt(range[1], 10) : $(document).height();
        if(scrollTop >= range[0] && scrollTop <= range[1]) {
            headerToDisplay = $(this);
            return false;
        }
    });
    if(headerToDisplay && !headerToDisplay.is(':visible')) {
        $('.header[data-visible-range]').hide();
        headerToDisplay.show();
    }
});

$（窗口）。滚动（函数（）{
var scrollTop=$（this.scrollTop（）；
var headerToDisplay=假；
$（'.header[数据可见范围]）。每个（函数（）{
变量范围=$（this）.data（'visible-range'）.split（'-'）；
范围[0]=范围[0]？parseInt（范围[0]，10）：0；
range[1]=range[1]？parseInt（range[1]，10）：$（document.height（）；
在本例中，如果（scrollTop>=范围[0]&&scrollTop，我将在scroll上添加类

请参见此示例：

听到我们可以听到滚动事件，如点击，所以当你滚动它
将进入
$（窗口）。滚动（function（）{----Call-->）；现在在这个窗口中
函数（）{}将检查滚动1、2或3的次数…等等
所以根据我的代码中应用的条件，我检查了
用户滚动>1，然后应用css

它的工作原理很神奇！当我更改其中的内容时，有两个单独的标题实际上会让事情变得更容易。非常感谢！！这是一个非常简单的技术，实际上效果非常好。非常感谢！@Ramy你知道如何接受答案吗？如果没有，那么请查看此链接：D哦，好的！我是新来的：D第一个答案更接近很遗憾，我似乎只能接受一个答案，但我非常感谢您的帮助。再次感谢！：）这比本页顶部的解决方案最简单，但使用CSS和3行javascript更有效。谢谢。
$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});