Question

首先，如果这个问题过于开放，我会道歉。

我知道将网页的标题设置为静态，因此它始终显示在视口顶部，当您向下滚动时，内容会在其下方传递。这可以用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

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

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

一旦标题滚动过去，修复页面顶部的菜单栏

3 个答案: