Question

我需要导航栏保持在页面顶部，但是每当发生这种情况时，页面顶部和导航栏之间就会存在资源缺口。预先谢谢您HTML杀死了我。我已经尝试过运行一个js文件，它保持相同的方式，你们可以想到它可以起作用的任何方式吗？我知道你可以肯定。再次感谢。

IN ( SELECT ... )

/*Fonte Customuzida dos Simpsons*/
@font-face{
	font-family: 'TheSimpsons';
	src:url('font/SimpsonsFont.otf');
}

/*Estilo da pagina "HOME"*/
body{
	margin: 0;
	background-color: grey;
}

/*Estilo do 'titulo'*/
.titulo{
	top: 0;
	position: absolute;
	background-color: yellow;
	display: inline-block;
	position: relative;
	margin: 0;
	width: 100%;
	background-image: url(img/clouds.jpg);
	text-align: center;
	background-size: 40%;
}
.titulo h1{	
	font-family: TheSimpsons;
	color:yellow;
	text-shadow: 2px 2px black;
}

/*Estilo da navBar*/
.navbar{
	position: fixed;
	width: 100%;
	background-color: yellow;
	border-bottom: solid 2px black;
}
.navbar ul{
  list-style-type: none;
  margin: 0;
  padding: 0.5%;
  position: center;
  font-family: TheSimpsons;
  font-size: 18px;
  text-align: center;
}

.navbar li{
	display: inline;
	padding:2px 20px 2px 20px;
}

.navbar a{
	color: black;
	text-decoration: none;
}

Answer 1

很简单

只需用此替换CSS中的navbar类。

.navbar{
    position: sticky;
    top:0;
    width: 100%;
    background-color: yellow;
    border-bottom: solid 2px black;
}

问题是您给了position:fixed，它可以将导航栏准确地固定在其位置，这就是为什么滚动时顶部有一个缝隙。

希望这会有所帮助。

导航栏位于顶部

1 个答案: