Question

当我滚动它时，我一直试图让我的菜单栏粘在页面顶部。它不是最初的顶部，但当我滚动它，它坚持顶部。我无法让它发挥作用。

<html>
<head>

<! Links /!>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css.css">

<script type="text/javascript">
$(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() > 280) {
  $('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
  $('#nav_bar').removeClass('navbar-fixed');
}
});
});
</script>

<! Top Image /!>
<div class="cd-fixed-bg cd-bg-1">
</div>

<! MenuBar /!>
<div class="cd-scrolling-bg cd-color-2">
<div id="nav_bar" class="nav_bar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Examples</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

</head>

<! Body /!>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  <br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>   <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  <br><br><br><br><br><br><br><br>
</body>
</div>

的CSS：

/*Menubar*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #2c3e50;
color: #2c3e50;
}
li {

color: #ecf0f1;
display:inline-block;
}
li a:hover {
background-color: #2980b9;
color: #ecf0f1;
}
li a {
display: block;
color:#ecf0f1;
padding: 14px 16px;
text-decoration: none;

}
#nav_bar {
border: 0;
background-color: #202020;
border-radius: 0px;
margin-bottom: 0;
height: 30px;
margin-top: 0;
top: 0;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
position: relative;
width:100%;
font-family: 'Roboto', sans-serif;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.31);
}

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

有很多css我没有发布，因为它与滚动无关（它是视差滚动）

Answer 1

检查此示例，它作为普通元素启动，并且在滚动事件时，如果需要，它会修复它：

<html>
    <head>
        <script>
            function Menu(){
                if(document.body.scrollTop>200){
                    menu=document.getElementById('menu');
                    menu.style.position='fixed';
                    menu.style.top='0px';
                }else{
                    menu.style.position='absolute';
                    menu.style.top='200px';
                }
            }
        </script>
        <style>
            body{
                height:300%;
                margin:0;
            }
            #menu{
                background-color:gray;
                height:10%;
                position:absolute;
                top:200px;
                width:100%;
            }
        </style>
    </head>
    <body onscroll="Menu()">
        <div id="menu">
        </div>
    </body>
</html>

Answer 2

尝试使用固定在标题div上的位置 [CSS]

body {
    height: 1000px;
    margin: 0;
    padding: 0
}

.header {
  width: 100%;
  border: solid 1px #fff;
  position: fixed;
  top: 0;
}

ul {
  border: solid 1px #f00;
  list-style-type: none;
  overflow: hidden;
}

li {
  width: 25%;
  float: left;
}

[HTML]

<div class="header">
  <ul>
  <li><a href="">Menu1</a></li>
  <li><a href="">Menu1</a></li>
  <li><a href="">Menu1</a></li>
  <li><a href="">Menu1</a></li>
  </ul>
</div>

https://jsfiddle.net/p9gs54cL/4/

使用JS，HTML和CSS滚动网站代码

2 个答案: