如何将导航栏固定在顶部

Question

我刚刚创建了一个网页网站，并希望修复导航栏。 如图所示，此刻：

为此，我将徽标浮动在左侧，导航栏浮动在右侧，并将位置设置为绝对，以便可以将右侧和底部设置为零。

这是我的html和一些CSS：

<div class="navigation">
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="menu-menu-1-container">
            <ul id="primary-menu" class="menu">
                <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-55"><a href="http://localhost/scentology/">Home</a></li>
                <li id="menu-item-107" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-107"><a href="#about">About</a></li>
                <li id="menu-item-144" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-144"><a href="#products-and-services">Products &#038; Services</a></li>
                <li id="menu-item-142" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-142"><a href="#scent-marketing">Scent Marketing</a></li>
                <li id="menu-item-145" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-145"><a href="#clients-and-industries">Clients &#038; Industries</a></li>
                <li id="menu-item-143" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-143"><a href="#contact">Contact Us</a></li>
            </ul>
        </div>      
    </nav>  
</div>

.navigation{
    height:40px; line-height:40px;
}
nav#site-navigation {
    position: absolute;
    right: 0;
    bottom: 0;
}

我现在对脚本的了解还不多，但是正在尝试调整此代码段：

<script>
// Create a clone of the menu, right next to original.
$('.navigation').addClass('original').clone().insertAfter('.navigation').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
    var orgElementPos = $('.original').offset();
    orgElementTop = orgElementPos.top;               
    if ($(window).scrollTop() >= (orgElementTop)) {
        // scrolled past the original position; now only show the cloned, sticky element.
        // Cloned element should always have same left position and width as original element.     
        orgElement = $('.original');
        coordsOrgElement = orgElement.offset();
        leftOrgElement = coordsOrgElement.left;  
        widthOrgElement = orgElement.css('width');
        $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
        $('.original').css('visibility','hidden');
    } else {
        // not scrolled past the menu; only show the original menu.
        $('.cloned').hide();
        $('.original').css('visibility','visible');
    }
}
</script>

菜单是固定的，但是问题是由于假定的位置属性，我无法正确看到它。我必须更改最低值才能看到它。 因此，这仅在我滚动到底部时才有效。 当我尝试返回顶部时，该菜单将不可见。

向下滚动时如何将导航栏固定在顶部，向上滚动时如何将其导航回默认位置？

Answer 1

尝试使事情尽可能简短。

将您的脚本替换为下面的jquery代码，您只需在其中检查滚动位置是否未设置：

(function( $ ){     
   var navOffset = jQuery("nav").offset().top; 
   jQuery(window).scroll(function() {
       var scrollPos = jQuery(window).scrollTop();
        if (scrollPos >= navOffset) {
            jQuery("nav").addClass("fixed");
        } else {
            jQuery("nav").removeClass("fixed");
        }
    });
})(jQuery);

无论您决定采用哪种样式，都必须根据.fixed类。 请记住，每次您滚动到顶部时，固定类都会被删除。

这是您的CSS：

.fixed{
    position:fixed !important;
    z-index: 9999;
    top: 4%;
    width: 100%;
    text-align: center;
}

根据您的内容，我想您只需要尝试最高的百分比

Answer 2

将以下内容添加到您的CSS中：

.navigation{
height:40px; 
line-height:40px;
position:fixed;

并将元素放在导航类之后的div中，称为content
例：

<div id='content'>
<!--Put your main stuff here!-->
</div>

content的CSS：

#content {
padding-top: someValueInPixel;
}

检查导航的高度，并用该值替换someValueInPixel 。

使用我的解决方案，您不需要javascript即可将导航栏保持在顶部，也不需要nav#site-navigation CSS

为什么定位：固定；
w3schools.com说：

    The element is positioned relative to the browser window

这意味着即使滚动，您的元素也位于顶部