如何在固定（粘性导航）时恢复我的导航的正常高度？

Question

各位，所以，我发布了这个帖子，因为我需要有关我网站粘性导航的帮助。我编写了简单的 jQuery 代码来实现这一点，但我需要帮助。当我的页面滚动并且浏览器影响我的导航时：http://prntscr.com/9rnuqy 我在导航中添加了一个固定的 class，它固定在我的页面顶部。问题：我的导航固定时，高度不正常

当我的导航不固定时：http://prntscr.com/9rnvg1（我们仍然可以看到我的页面标题）

当我的导航固定后：http://prntscr.com/9rnw19

我知道当一个导航固定后，我们需要添加一个padding-top（到body），它的像素与您要设置的元素的高度相同。

HTML 我的导航代码：

<div class="wrapper">
    <div id="navigation">
        <span id="menu-trigger" title="Navigation"></span>
        <ul id="menu">
            <li>
                <a href="." class="home <?php if($body_id == "home"): ?>active<?php endif; ?>">Accueil</a>
            </li>
            <li>
                <a href="users.php" class="users <?php if($body_id == "users"): ?>active<?php endif; ?>">Utilisateurs</a>
            </li>
            <li>
                <a href="#" class="downloads <?php if($body_id == "downloads"): ?>active<?php endif; ?>">Téléchargements</a>
            </li>
            <li>
                <a href="#" class="about-us <?php if($body_id == "about-us"): ?>active<?php endif; ?>">À propos de nous</a>
            </li>
        </ul>
    </div>

CSS:

/* Header */

#header
{
    background-color: #3C5E79;
    height: 200px;
    line-height: 170px;
    margin-bottom: -30px;
}

#logo
{
    width: 300px;
    vertical-align: middle;
    display: inline-block;
    line-height: normal;
}

#logo a
{
    color: #FFF;
    font-size: 30px;
    font-weight: bold;
}

#logo p
{
    color: #FFF;
    font-size: 13px;
    margin-top: 10px;
}

/* Navigation */

#navigation
{
    background-color: #30475A;
    height: 55px;
}

/* sticky navigation */

#navigation.fixed
{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

#navigation.wrapper
{
    padding: 0;
}

#menu-trigger
{
    display: none;
}

#navigation li
{
    float: left;
}

#navigation a
{

    color: rgba(255, 255, 255, 0.5);
    height: 55px;
    line-height: 55px;
    display: block;
    padding: 0 20px;
}

#navigation a:hover,
#navigation .active
{
    color: #FFF;
}

#navigation .active
{
    background-color: #000;
    font-weight: bold;
}

jQuery:

$(function()
{
    /* STICKY NAVIGATION */
    $(window).scroll(function()
    {
        if($(this).scrollTop() >= 170)
        {
            $("#navigation").addClass("wrapper fixed");
        }
        else
        {
            $("#navigation").removeClass("wrapper fixed");
        }
    });
});

Answer 1

最好的解决方案是在检测到滚动时向正文添加一个 class，而不是在导航上。

然后添加 css 规则：

body.navigation-fixed  {
  padding-top: 50px; // i don't know the real value
}

body.navigation-fixed #navigation {
  position: fixed;
}

Answer 2

你可以这样做：

jQuery

$(function()
{
    /* STICKY NAVIGATION */
    $(window).scroll(function()
    {
        if($(this).scrollTop() >= 170)
        {
            $("#navigation").addClass("wrapper fixed");
            $("body").addClass("fixed-body");

        }
        else
        {
            $("#navigation").removeClass("wrapper fixed");
            $("body").removeClass("fixed-body");
        }
    });
});

CSS

body.fixed-body{
padding-top: 80px;
}

注意：如果在body上不行，应该放在正确的容器上。

如何在固定（粘性导航）时恢复我的导航的正常高度？

How to restore the normal height of my navigation when it is fixed (sticky navigation)?

html

css

navigation

jquery