Question

我需要在我的导航菜单顶部放置横幅，该页面在页面加载后向下滑动500ms并在点击时消失，就像在uber.com上一样。我为此编写了jquery函数，但我的主要问题是如何定位它，因为我的导航栏固定在顶部，我不能将我的横幅放在它上面，至少不会没有弄乱剩下的内容。

我没有横幅的代码如下所示：

<div id="page">
    <div id="header">
        <div id="main-navigation" class="navbar navbar-fixed-top">
            <div class="navbar-header">
                <div id="logo" class="logo">
                    <a href="index.php"><img src="img/logo.png" alt="Logo"/></a>
                </div>
            </div>
                <div id="menu-click">
                    <a href="#" class="menu-main navbar-right nav-toggler toggle-slide-right">MENU <img class="three-lines" src="img/oie_transparent.png" alt="Menu"/></a>
                </div>
        </div>
            <nav class="menu slide-menu-right marginup">
                <ul>
                    <li><button class="close-menu">Close &rarr;</button></li>
                    <li><a href="#">Register your boat</a></li>
                    <li><a href="#">Book A Boat</a></li>
                    <li><a href="#">Destination of the day</a></li>
                    <li><a href="faq.php">FAQ</a></li>
                    <li><a href="support.php">Support</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </nav>
    </div>

Answer 1

将div放在标题div上方或固定顶部导航栏内。你能做的就是把横幅的html放在你的页面里，然后把display：none;在你的CSS横幅的div上的风格。现在你可以使用jquery.show（）使它可见。

<div id="page">
    <div id="header">
        <div id="main-navigation" class="navbar navbar-fixed-top">
            <div class="your-banner" style="display: none;">
            <div class="navbar-header">
                <div id="logo" class="logo">

或

<div id="page">
    <div class="your-banner" style="display: none;">
    <div id="header">
        <div id="main-navigation" class="navbar navbar-fixed-top">
            <div class="navbar-header">
                <div id="logo" class="logo">

如果您使用position: fixed，可以尝试在css中使用css：top:50px更改其位置，并在横幅上移除onclick。

您可以在内容div或正文标记上使用padding-top: 65px;来向下推送内容。一个完美的例子来自bootstrap：http://getbootstrap.com/examples/navbar-fixed-top/。这在此处记录：http://getbootstrap.com/components/#navbar-fixed-top

如何将内容放在navbar-fixed-top之上？

1 个答案: