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将成为固定标头，您可以使用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

Answer 2

这是一个非常基本的例子：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可能会更精确，但这为您提供了基本要点。

用固定位置替换标题，修复另一个标题位置

2 个答案: