javascript - 标题滚动过去后，修复页面顶部的菜单栏

Question

首先，如果这个问题过于开放，我深表歉意。

我知道将网页的标题设为静态，这样它始终在视口(viewport)顶部可见，并且当您向下滚动时，内容会从下方经过。这完全可以通过 css 来实现。

我想知道如何让页眉滚出页面，但在顶部保留水平菜单栏静态。 http://www.forexfactory.com就是一个很好的例子。

我看到它调用了一个 JavaScript 函数 onHeaderComplete.execute()，我假设它在标题滚动关闭时将额外的 css 样式应用到导航栏，但我不确定它是如何工作的。由于我的 JavaScript 技能相对有限，所以感谢任何基本解释。

Answer 1

我刚刚回答了类似的问题。 CHECK THIS QUESTION

$(function(){
        // Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');
                }
        });
  });

DEMO