Question

我正在建立一个响应式网站，其标题在导航栏上方，然后我的目标当然是在向下滚动时使导航栏位于顶部。

我是 HTML 和 CSS 的新手，所以我不确定是否在 CSS < / em>导航栏的类代码应为。但是以防万一我将debug1: Reading configuration data /home/zulu0499/.ssh/config debug1: /home/zulu0499/.ssh/config line 1: Applying options for *.fnal.gov debug1: Reading configuration data /etc/ssh/ssh_config debug1: /etc/ssh/ssh_config line 19: include /etc/ssh/ssh_config.d/*.conf matched no files debug1: /etc/ssh/ssh_config line 21: Applying options for * debug2: resolving "emphaticgpvm01.fnal.gov" port 22 debug2: ssh_connect_direct debug1: Connecting to emphaticgpvm01.fnal.gov [131.225.240.241] port 22. debug1: Connection established. ... debug2: pubkey_prepare: done debug3: send packet: type 5 debug3: receive packet: type 7 debug1: SSH2_MSG_EXT_INFO received debug1: kex_input_ext_info: server-sig-algs=<rsa-sha2-256,rsa-sha2-512> debug3: receive packet: type 6 debug2: service_accept: ssh-userauth debug1: SSH2_MSG_SERVICE_ACCEPT received debug3: send packet: type 50 debug3: receive packet: type 51 debug1: Authentications that can continue: gssapi-keyex,gssapi-with-mic debug3: start over, passed a different list gssapi-keyex,gssapi-with-mic debug3: preferred gssapi-with-mic,publickey,keyboard-interactive,password debug3: authmethod_lookup gssapi-with-mic debug3: remaining preferred: publickey,keyboard-interactive,password debug3: authmethod_is_enabled gssapi-with-mic debug1: Next authentication method: gssapi-with-mic debug3: send packet: type 50 debug2: we sent a gssapi-with-mic packet, wait for reply debug3: receive packet: type 51 debug1: Authentications that can continue: gssapi-keyex,gssapi-with-mic debug3: send packet: type 50 debug2: we sent a gssapi-with-mic packet, wait for reply debug3: receive packet: type 51 debug1: Authentications that can continue: gssapi-keyex,gssapi-with-mic debug2: we did not send a packet, disable method debug1: No more authentication methods to try. ydeniz@emphaticgpvm01.fnal.gov: Permission denied (gssapi-keyex,gssapi-with-mic)```放在顶部，然后将position:sticky;值放在第二位。我也尝试过将其直接放在头部。但无济于事。我将提供代码供您查看。

top:0;

.navbar { position: sticky; top: 0; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; background-color: black; height: 74px; overflow: hidden; margin: 0px 1px 0px 1px; border: 1px; border-radius: 4px; border-style: solid; border-color: #A6A6A6; }

Answer 1

修复navbar类。它将粘在那里。无论哪种方式，它都不会粘住。例子；

.navbar{
  position: fixed;
  top: 0;
}

Answer 2

添加位置：向父项添加粘性。（还要确保您始终检查browser compatibilty）

nav {
 position: sticky;
 top: 0;
}
.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;    
  background-color: black;
  height: 74px;
  overflow: hidden;
  margin: 0px 1px 0px 1px;
  border: 1px;
  border-radius: 4px;   
  border-style: solid;
  border-color:#A6A6A6;   
 }

工作小提琴： https://jsfiddle.net/9fvwp7x1/5/

如何通过导航栏问题解决我的位置问题

2 个答案: