滚动页眉后修复页面顶部的菜单栏答案

【问题标题】：Fix menu bar at top of page once header has been scrolled past滚动页眉后修复页面顶部的菜单栏
【发布时间】：2013-01-24 10:25:22
【问题描述】：

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

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

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

我看到它调用了一个 JavaScript 函数 onHeaderComplete.execute()，我假设当标题滚动时它会向导航栏应用额外的 css 样式，但我不确定它是如何工作的。由于我的 JavaScript 技能相对有限，任何基本解释都会受到赞赏。

【问题讨论】：

标签： javascript html css

【解决方案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

【讨论】：

谢谢，请问#stickyalias div 的用途是什么？没有它会工作吗？

【解决方案2】：

你可以这样写：

$(window).scroll(function() {
    if ($(this).scrollTop() > 50) {
         $('div').addClass('fix');
    } else {
         $('div').removeClass('fix');
    }
});

CSS

.fix{
    position:fixed;
    top:0;
    left:0;
    right:0;
    margin:0;
}

查看http://jsfiddle.net/a42qB/

【讨论】：

【解决方案3】：

您也可以通过两次创建菜单来使用纯 CSS 来实现。这并不理想，但它让您有机会对菜单进行不同的设计，一旦它位于顶部，您将拥有 CSS，没有 jquery：

<div id="hiddenmenu">
 THIS IS MY HIDDEN MENU
</div>
<div id="header">
 Here is my header with a lot of text and my main menu
</div>
<div id="body">
 MY BODY
</div>

然后有以下CSS：

#hiddenmenu {
position: fixed;
top: 0;
z-index:1;
 }
#header {
top: 0;
position:absolute;
z-index:2;
 }
#body {
padding-top: 80px;
position:absolute;
z-index: auto;
 }

这里有一个小提琴供你看：https://jsfiddle.net/brghtk4z/1/

【讨论】：