6

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

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

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

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

4

3 回答 3

13

我刚刚回答了类似的问题。检查这个问题

$(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');
                }
        });
  });

演示

于 2013-01-24T10:27:27.957 回答
6

你可以这样写：

$(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/

于 2013-01-24T10:40:02.223 回答
2

您也可以通过创建两次菜单来使用纯 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/

于 2016-07-28T11:52:43.343 回答