Question

下面我贴了我的html，css和我的js。一旦用户滚动到500px，我试图让我的菜单栏保持固定在顶部。一旦滚动到500px，菜单栏就没有达到固定属性。

我在这里做错了什么？我从这个fiddle

中得到了这个想法

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="menubar.css">
    <script src="menubar.js"></script>
</head>

<body>

    <header>
    </header>

    <div class="container">

        <div id="Blackbar" class="clearfix">
            <nav id='nav_bar'>
                <ul class='nav_links'>
                    <li id="Home">
                        <a href="default.asp">Home</a>
                    </li>
                    <li id="Tracks">
                        <a href="default.asp">Tracks</a>
                    </li>
                    <li id="Events">
                        <a href="default.asp">Events</a>
                    </li>
                    <li id="Blog">
                        <a href="default.asp">Blog</a>
                    </li>
                    <li id="About">
                        <a href="default.asp">About</a>
                    </li>
                </ul>
            </nav>
        </div>

        <div id="Content" class="clearfix">
            <div id="ArtikelFrame" class="clearfix">
                <p id="Koptekst">
                    Nieuwe muziek
                </p>
                <p id="Ondetitel">
                    Vrijdag 27 maart &#x7c; Budakid
                </p>
                <img id="ArtikelPlaatje" src="img/general-midi-logo.jpg" class="image" />
                <p id="TekstDeel1">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.&nbsp;
                    <br />
                    <br />
                </p>
                <p id="TekstDeel2">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                    <br />
                    <br />
                    <br />Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
                    <br />
                </p>
            </div>
            <div id="ArtikelFrame" class="clearfix">
                <p id="Koptekst">
                    Nieuwe muziek
                </p>
                <p id="Ondetitel">
                    Vrijdag 27 maart &#x7c; Budakid
                </p>
                <img id="ArtikelPlaatje" src="img/general-midi-logo.jpg" class="image" />
                <p id="TekstDeel1">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.&nbsp;
                    <br />
                    <br />
                </p>
                <p id="TekstDeel2">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                    <br />
                    <br />
                    <br />Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
                    <br />
                </p>
            </div>
            <div id="ArtikelFrame2" class="clearfix">
                <p id="Koptekst">
                    Nieuwe muziek
                </p>
                <p id="Ondetitel">
                    Vrijdag 27 maart &#x7c; Budakid
                </p>
                <img id="ArtikelPlaatje" src="img/general-midi-logo.jpg" class="image" />
                <p id="TekstDeel1">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.&nbsp;
                    <br />
                    <br />
                </p>
                <p id="TekstDeel2">
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                    <br />
                    <br />
                    <br />Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
                    <br />
                </p>
            </div>
        </div>



        <div id="Footer" class="clearfix">
        </div>


</body>

</html>

CSS

body {
    background-color: rgb(255, 255, 255);
    padding: 0px;
    margin: 0px;
    font-family: 'AvenirNext';
    src: url('fonts/riesling.eot');
    src: local('AvenirNextLTProCn'), local('AvenirNextLTProCn'), url('fonts/AvenirNextLTProCn.otf') format('opentype');
    position: relative;
    top: 0;
}

.container {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    min-height: 100%;
    width: 1025px;
    position: relative;
    background-color: green;
}

nav {
    height: 60px;
    display: block;
    width: 1025px;
    background-color: #fff;
    box-shadow: 0px 5px 20px #6e6e6e;
    z-index: 3;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    float: left;
    font-size: 1.65em;
    text-align: center;
    width: 20%;
    margin-top: 14px;
}

a {
    text-decoration: none;
    color: black;
}

header {
    background-image: url(img/10634107_736318616436352_1616233075386796082_o-2.jpg);
    height: 500px;
    overflow: hidden;
    width: 100%;
}

#Blackbar {
    float: left;
    height: 40px;
    clear: both;
    width: 100%;
    background-color: black;
}

#Content {
    float: left;
    height: auto;
    clear: both;
    width: 66.66%;
    border-right-width: 1px;
    border-right-color: rgb(156, 156, 156);
    border-right-style: solid;
    border-left-color: rgb(156, 156, 156);
    border-left-width: 1px;
    border-left-style: solid;
}

#ArtikelFrame {
    float: left;
    height: auto;
    clear: none;
    width: 100%;
    display: block;
    border-bottom-width: 1px;
    border-bottom-color: rgb(156, 156, 156);
    border-bottom-style: solid;
}

#ArtikelFrame2 {
    float: left;
    height: auto;
    clear: none;
    width: 100%;
    display: block;
}

#Koptekst {
    font-size: 1.3em;
    width: 100%;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    margin-left: 4%;
    margin-top: 4%;
    clear: none;
    min-height: 0px;
    margin-right: 4%;
}

#Ondetitel {
    float: left;
    font-size: 0.75em;
    width: 100%;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    margin-left: 4%;
    margin-top: 2%;
    clear: both;
    min-height: 0px;
    margin-right: 0%;
    color: rgb(156, 156, 156);
}

#ArtikelPlaatje {
    float: left;
    width: auto;
    max-width: 50%;
    height: auto;
    margin-left: 4%;
    margin-top: 4%;
    clear: both;
    color: rgb(0, 0, 0);
}

#TekstDeel2 {
    float: left;
    font-size: 1em;
    width: auto;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    margin-left: 4%;
    margin-top: 2%;
    clear: both;
    min-height: 0px;
    margin-bottom: 4%;
    margin-right: 4%;
}

#TekstDeel1 {
    float: left;
    font-size: 1em;
    width: 42%;
    height: auto;
    text-align: left;
    font-weight: normal;
    line-height: 1em;
    margin-left: 4%;
    margin-top: 0%;
    clear: none;
    min-height: 0px;
    margin-bottom: 4%;
    margin-right: 4%;
}

#Footer {
    float: left;
    height: 400px;
    clear: both;
    width: 100%;
    background-color: rgb(0, 0, 0);
}

.navbar-fixed {
    top: 0;
    z-index: 100;
    position: fixed;
    width: 100%;
}

body {
    top: 0;
    position: relative;
}

#nav_bar {
    border: 0;
    background-color: red;
    border-radius: 0px;
    margin-bottom: 0;
    height: 30px;
}

.nav_links {
    margin: 0;
}

.nav_links li {
    display: inline-block;
    margin-top: 4px;
}

.nav_links li a {
    padding: 0 15.5px;
    color: #3498db;
    text-decoration: none;
}

JQuery的

$(document).ready(function () {
            $(window).scroll(function () {
                //if you hard code, then use console
                //.log to determine when you want the 
                //nav bar to stick.  
                console.log($(window).scrollTop())
                if ($(window).scrollTop() > 500) {
                    $('#nav_bar').addClass('navbar-fixed');
                }
                if ($(window).scrollTop() < 501) {
                    $('#nav_bar').removeClass('navbar-fixed');
                }
            });
        });

Answer 1

你是否包含了jQuery库？我在你的代码中没有看到任何地方。您可以在此处下载最新版本的jQuery：https://code.jquery.com/jquery-2.1.3.min.js。或者，如果您想浏览其他jQuery版本，请查看此处：https://code.jquery.com/

之后，将所需的jQuery库保存到HTML页面所在的文件夹中，并将其包含在脚本标记中。在HTML页面的正文中，在标记上方添加

<script src="jquery-2.1.3.min.js"></script>

滚动后保持固定的菜单栏不起作用

1 个答案: