Question

我正在尝试在我的页面上设置网站名称/徽标和导航，以便当它到达页面顶部时，它会停留在屏幕顶部而不会消失。我试过了position: fixed;，但除非我错过了我不需要做的事情。

我的布局如下，header-top和header-nave我希望不会从页面顶部消失 -

<header>
    <div id="header-top"></div>
    <div id="header-middle"></div>
    <div id="header-nav"></div>
</header>

有没有人对此有任何提示，或者知道CSS是否可行？无论哪种方式，一些指向教程的指针甚至用于执行此操作的方法都会有所帮助。

如果需要，可以向JS开放。感谢。

Answer 1

有很多关于如何实现这一目标的演示。基本上你需要弄清楚窗口下方有多远，以固定定位使导航“粘”。

这是一个关于它的好演示的链接：http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/

Answer 2

感谢有用的提示和指示（@Wesley Terry和@eZakto），这里的JS正是我正在寻找的目标。

$(function(){

    var top = $('#header-top-full-width');
    var nav = $('#header-nav-full-width');

    $(window).scroll(function(){

        if($(window).scrollTop() >= 90){
            border_bottom('0');
        } else if($(window).scrollTop() === 89){
            border_bottom('1');
        } else if($(window).scrollTop() === 88){
            border_bottom('2');
        } else if($(window).scrollTop() <= 87){
            border_bottom('3');
        }

        if($(window).scrollTop() >= 90){ // To far, the navigation needs to be set in place
            nav.css('position', 'fixed');
            nav.css('margin-top', '-90px');
            if($('#nav-spacer').length) { // Add a spacer so the height is correct if needs be
            } else {
                $('<div id="nav-spacer"></div>').insertAfter('#header-nav-full-width');
                $('#nav-spacer').css('height', '32px');
            }
        } else { // The navigation needs to just be static, so remove the spacer and make it static
            nav.css('position', 'static');
            nav.css('margin-top', '0');
            $('#nav-spacer').remove();
        }       
    });
});

如何使用CSS来停止滚动屏幕顶部的HTML元素

2 个答案: