固定菜单，滚动时标题div消失

Question

I wish to combine the scripts of this template (I'm revising) https://codepen.io/lydiawawa/pen/gEPpwX to carry the effect from this example: https://codepen.io/jamesbarnett/pen/JwFuy

The javascript I need to revise is as of the following:

/* JavaScript from: http://jqueryfordesigners.com/fixed- 
   floating-elements/ */

$(function () {
var sidebar = $('.sidebar');
var top = sidebar.offset().top - parseFloat(sidebar.css('margin-top'));

$(window).scroll(function (event) {
  var y = $(this).scrollTop();
  if (y >= top) {
    sidebar.addClass('fixed');
  } else {
    sidebar.removeClass('fixed');
  }
});
});

Could anyone help me to revise the script to achieve the effects?

Thank you!

Answer 1

You've already set the position of nav as fixed by default which won't give you the desired result. You should set its position as static by default, and change the value after the document has reached a certain point by scrolling.

As I mentioned earlier, that script in the actual OP is doing the right job. The only thing I've done is to copy/paste that script to your example ( and some tiny CSS changes ).

check out this revised version at codePen