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

advertisements

So I have a node.js app using express and trying to do the following:

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

My jQuery for this is as follows:

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();
});

So when I scroll the title will become fixed at the top of the page. Got this working, however! I have another title below this, the exact same code. But I'm trying to get my title to replace the previous one and become fixed.

So As your scrolling down through content, the title is always fixed but its just being updated with the title relevant to the content your viewing.

Can anyone help, I'd really appreciate it. I can't find anything which is what i'm exactly looking for and my knowledge is limited. Thank you!


I see you were asking a lot of questions about that ... I'm gonna show you an example that maybe can helps.

With an structure like this:

<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>

Where .title gonna be the fixed header you can use Jquery to change the value base on the h1 of the other containers.

$(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);
    }
  })
})

Check this CodePen Demo