将一个标题替换为固定位置，将另一个标题位置替换为固定

Replacing a title with position fixed, with another title position fixed

本文关键字：位置 标题 替换 另一个 定位 一个      更新时间：2023-09-26

所以我有一个使用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();
});

因此，当我滚动时，标题将固定在页面顶部。但是，这工作了！我下面还有另一个标题，完全相同的代码。但我试图让我的标题替换前一个标题并修复。

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

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

我看到你问了很多关于这个问题的问题......我将向您展示一个也许可以提供帮助的例子。

结构如下：

<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是固定标头，则可以使用 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 演示

这是一个非常基本的例子： http://jsfiddle.net/jgxevwa6/1/- 我没有试图让间距完美或任何东西。

您有固定的类： 

.fixed {
    position: fixed;
    top: 0;
}

然后是魔法。基本上，每次滚动时，它都会循环浏览每个块，并使用基本滚动模型确定视口中的哪个块：

(function($) { 
    var utils = {
        fixTitle: function(e) {
            var top = e.currentTarget.scrollY;
            $('div').each(function() {
                var thistop = $(this).position().top;
                if(top > thistop) {
                    $('.title').removeClass('fixed');
                    $(this).find('.title').addClass('fixed');
                }
            });
        }
    };
    $(function() {
        $(window).scroll(utils.fixTitle);    
    });
})(jQuery);

javascript和CSS可以更准确一些，但这给了你它的基本要点。

相关文章：