Question

大家好，我有问题，希望你们能在这里帮助我。所以基本上我有一个div，它意味着覆盖你的整个屏幕，无论你的浏览器是什么设备或大小，这个div将永远是全屏的。在那个div下我有一个菜单，使用一些jquery在一定高度后固定。（不是我想要的高度）

我想要的是我的菜单在通过全屏后变得固定。我知道这是很多信息，但是在你查看我的jsfiddle之后你会明白我的意思。

无论如何，我的代码是：

$(window).scroll(function () {
    if ($(window).scrollTop() > 100)
        $('#menu').css('position', 'fixed').css('top', '0');
    else
        $('#menu').css('position', 'static');
});

<!DOCTYPE html>
<html>
<head>
    <link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
    <title>random</title>
</head>
<body>
    <div id="container">
        <div id="headcontainer"></div>
        <div id="menu">
            <div id="logo">
                <p>Hier komt een logo</p>
            </div>
            <ul>
                <li>Home</li>
                <li>Over</li>
                <li>Contact</li>
                <li>Producte</li>
            </ul>
        </div>
        <div id="content">
            <div class="text-box">
        </div>
        <div class="text-box"></div>
    </div>
</div>
</body>
</html>

/*Global*/
* { margin: 0px; }

#container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;  
}

#headcontainer {
    width: 100%;
    height: 100vh;
    background-color: pink;
}

/* navigation */      
#menu {
    height: 100px;
    width: 100%;
    background-color: rgba(0, 0, 255, 0.1);
    max-height: 100px;
    border: 1px solid black;
    border-top: none;
}

 #menu li {
    display: inline-block;
    text-decoration: none;
    padding-left: 20px;
    position: relative;
    padding-right: 20px;
}

#menu ul {
    float:right;
    height:100%;
    width: auto;
     line-height: 100px;
     margin-right:25px;
}

#menu ul li:hover {
    cursor:pointer;
    color: white;
}

#logo {
    height: 50px;
    width: auto;
    background-color: red;
    float: left;
    margin-top: 0px;
    margin-top: 30px;
    margin-left: 60px;
}

/*content*/
#content {
    width:100%;
    height:auto;
    min-height:10000px;
    margin-left: auto;
    margin-right: auto;
}

.text-box {
    width:40%;
    height:auto;
    background-color:blue;
    min-height:100px;
    float:left;
    margin-left:5%;
    margin-right:5%;
    margin-top:50px;
}

Answer 1

在您的代码中，而不是放

if ($(window).scrollTop() > 100) {

你应该把

if ($(window).scrollTop() > window.innerHeight) {

Updated JSFiddle

Answer 2

$(window).scroll(function () {
    if ($(window).scrollTop() > $( "#headcontainer" ).height()) {
        $('#menu').css('position', 'fixed').css('top', '0');
    } else {
        $('#menu').css('position', 'static');
    }
});

当滚动条跨过headcontainer的高度时，

position:fixed;应该适用。您可以使用.height（）来确定headcontainer的高度。

菜单在特定高度后固定

2 个答案: