如何使导航栏固定在顶部

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;
}

我现在还不太了解脚本，但正在尝试调整这个 sn-p：

<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;

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

<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

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