javascript - 替换固定位置的标题，固定另一个标题位置

Question

所以我有一个使用 express 的 node.js 应用程序并尝试执行以下操作:

div(class="title")
  h1(class="h1_title") example_title

我的 jQuery 如下:

jQuery(function($) {
    function fixDiv() {
      var $cache = $('.title');
      if ($(window).scrollTop() > 140)
        $cache.css({'position': 'fixed', 'top': '10px'});
      else
        $cache.css({'position': 'relative', 'top': 'auto'});
    }
    $(window).scroll(fixDiv);
    fixDiv();
});

因此，当我滚动时，标题将固定在页面顶部。但是，可以正常工作!我在这个下面有另一个标题，完全相同的代码。但我正在努力让我的头衔取代之前的头衔并固定下来。

因此，当您向下滚动浏览内容时，标题始终是固定的，但它只是更新为与您查看的内容相关的标题。

谁能帮忙，我将不胜感激。我找不到任何我正在寻找的东西，而且我的知识有限。谢谢!

Answer 1

我看到你问了很多关于这个的问题......我将向你展示一个可能会有所帮助的例子。

结构如下:

<div class="title">TITLE</div>
<div class="cont"><h1>TITLE</h1></div>
<div class="cont"><h1>Content1</h1></div>
<div class="cont"><h1>Content2</h1></div>
<div class="cont"><h1>Content3</h1></div> 

.title 将成为固定 header ，您可以使用 Jquery 更改基于其他容器的 h1 的值。

$(window).scroll(function(){
  $('.cont').each(function(){
    var t = $(this).offset().top - 50,
        tit = $(this).find('h1').text(),
        h = $(this).height(),
        ws = $(window).scrollTop();
    if (t < ws && ws < (h+t)) {
         $('.title').html(tit);
    } 
  })
})

检查这个 CodePen Demo