固定菜單，滾動時標題div消失

Question

我希望結合此模板的腳本（我正在修訂） https://codepen.io/lydiawawa/pen/gEPpwX來體現此示例的效果： https : //codepen.io/jamesbarnett/pen/JwFuy

我需要修改的JavaScript如下：

/* 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');
  }
});
});

誰能幫我修改腳本以達到效果？

謝謝！

Answer 1

默認情況下，您已經將nav的位置設置為fixed ，這不會給您想要的結果。 默認情況下，您應該將其位置設置為static ，並在文檔到達特定點后通過滾動更改該值。

正如我之前提到的，實際OP中的腳本執行正確的工作。 我唯一要做的就是將腳本復制/粘貼到您的示例中（以及一些小的CSS更改）。

在codePen上查看此修訂版