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代码替换脚本，只需检查滚动位置是否设置为：

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

您决定应用的样式必须符合var definitions = definitions.Where( x => propertyTypeIds.Contains(x.PropertyTypeId) && x.CountryId == countryId) .GroupBy(x => x.PropertyTypeId); var exist = definitions.Any() && definitions.All(...some condition...);类。请记住，每次滚动到顶部时都会删除固定类。

所以这是你的css：

  # Deployments
  gem 'capistrano', '~> 3.6'
  gem 'capistrano-rails', '~> 1.1'
  gem 'capistrano-bundler', '~> 1.1.2'
  gem 'capistrano-rbenv', '~> 2.0'
  gem 'capistrano-safe-deploy-to', '~> 1.1.1'
  gem 'capistrano-secrets-yml', '~> 1.0.0'
  gem 'capistrano-faster-assets', '~> 1.0'
  gem 'capistrano-ssh-doctor', '~> 1.0'
  gem 'capistrano-postgresql', '~> 4.1.0'
  gem 'capistrano-delayed-job', '~> 1.0'
  gem 'capistrano-unicorn-nginx', '~> 3.1.0'
  # gem 'capistrano-memcached', '~> 1.0'
  # gem 'capistrano-maintenance', github: "capistrano/maintenance", require: false

根据您的内容，我猜您只需要使用最高百分比

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

这意味着，即使滚动

，您的元素也会位于顶部

如何将导航栏固定到顶部

2 个答案: