Question

我希望我的菜单在滚动时保持原位，但是当我在CSS position:fixed;中添加以下内容时，整个事情就会从我想要的地方出来。

在这个jsfiddle中你可以看到它现在是怎样的以及我希望它如何。唯一有问题的是，如果我将位置改为固定位置，它就不会停留在我想要它的位置。

<!DOCTYPE html>
<html>

<head>
    <link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
    <title>random</title>
  <!--   <link rel="stylesheet" type="text/css" href="styles/style.css"> -->

</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>

<style>
    /*Global*/

    * {
        margin: 0px;
    }

    body {}

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {}

    h1 {}

    h2 {}

    h3 {}

    h4 {}

    a {}

    img {}

    #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 {

    }

    #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:1000px;
    min-height:500px;
    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;
    }

    </style>

编辑：我试图实现这样的目标：

http://themes.lucky-roo.com/resume-cv/berg-v1.7/HTML_Template/home-1-static-image.html

Answer 1

好的，我知道你想要什么，我想你会在Javascript中编写这种行为。

这种解决方案对你有好处吗？

Démo：http://jsfiddle.net/cc48t

$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
         $('#scroller').css('top', $(window).scrollTop());
    }
}
);

Answer 2

使用headercontainor中的菜单并给出position：fixed; fom #menu

＆＃13;

 <!DOCTYPE html>
    <html>
    
    <head>
        <link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
        <title>random</title>
      <!--   <link rel="stylesheet" type="text/css" href="styles/style.css"> -->
    
    </head>
    
    <body>
        <div id="container">
            <div id="headcontainer">
    		
    		<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>
                   
    
    <div id="content">
    <div class="text-box">
    
    
        </div>
        <div class="text-box">
    
    
        </div>
    </div>
    
        </div>
    </body>
    
    </html>
    
    <style>
        /*Global*/
    
        * {
            margin: 0px;
        }
    
        body {}
    
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {}
    
        h1 {}
    
        h2 {}
    
        h3 {}
    
        h4 {}
    
        a {}
    
        img {}
    
        #container {
            margin-left: auto;
            margin-right: auto;
            width: 100%;
    
        }
    
        #headcontainer {
            width: 100%;
            height: 100vh;
            background-color: pink;
    
        }
        /* navigation */
    
        #menu {
                position: fixed;
            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 {
    
        }
    
        #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:1000px;
        min-height:500px;
        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;
        }
    
        </style>

＆＃13;

Answer 3

由于您没有使用JQuery，您可以通过简单的javascript实现它

＆＃13;

var header             = document.querySelector('div'),
     title              = header.querySelector('ul'),
    fix_class          = 'fixnav';

function stickyScroll(e) {

  if( window.pageYOffset > 310 ) {
    title.classList.add(fix_class);
  }

  if( window.pageYOffset < 310 ) {
    title.classList.remove(fix_class);
  }
}

// Scroll handler to toggle classes.
window.addEventListener('scroll', stickyScroll, false);

＆＃13;

<style>
    /*Global*/
    
    * {
        margin: 0px;
    }
    
    body {}
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {}
    
    h1 {}

    h2 {}
    
    h3 {}
    
    h4 {}
    
    a {}
    
    img {}
    
    #container {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
      
    }
    
    #headcontainer {
        width: 100%;
        height: 100vh;
        background-color: pink;

    }
    /* navigation */
    .fixnav{
      position:fixed;
      z-index:9999;
      top:0;
    }
    #menu {
        height: 100px;
        width: 100%;
        background-color: rgba(0, 0, 255, 0.1);
        max-height: 100px;
        border: 1px solid black;
        border-top: none;
        transition: 1s all;
    }
    
    #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 {

    }
    
    #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:1000px;
	min-height:500px;
	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;
    }

    </style>

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
    <title>random</title>
  <!--   <link rel="stylesheet" type="text/css" href="styles/style.css"> -->
    
</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>

＆＃13;

小提琴：https://jsfiddle.net/sank8893/mvmbtcby/3/

Answer 4

添加以下脚本，它可以正常工作

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
    $(window).scroll(function () {
        if ($(window).scrollTop() > 650) {
            $('#menu').css('position', 'fixed').css('top', '0');
        } else {
            $('#menu').css('position', 'static');
        }
    });
</script>

Answer 5

我创建了一个jsfiddle。

我只是在#menu中添加这些行，它对我有用：

    position : fixed;
    top: 0;

菜单无法移动。

Answer 6

将这些样式添加到css中的菜单中。

position: fixed
top:0

这两个菜单的组合将确保菜单保持在必须停留的位置：始终位于顶部。

正如@ Error404所说：

固定元素超出了文档的正常流程这就是为什么你可以把它放在屏幕的顶部。

Answer 7

JS：

$(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() > 100) {
  $('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 100) {
  $('#nav_bar').removeClass('navbar-fixed');
}
 });
});

Css：

.navbar-fixed{
  position:fixed;
    z-index:auto;
    Top:0px;
}

由于只有在网页中滚动了某个高度时才需要附加此css，因此使用此js代码可以在滚动一定高度后将navbar-fixed类附加到菜单div。

固定菜单不起作用

7 个答案: