Question

晚上好。我正在尝试使用固定的导航栏创建一个网站。我试图实现的结果与您在CodePen

中看到的结果略有不同

在我的示例中，我试图将 h1 元素放在导航栏之下，但我似乎无法使其正常工作。我尝试过像其他人在类似帖子中提到的那样使用 z-index ，但我没有看到任何变化。

nav
 .box
  #nav-icon1
   span
   span
   span
   span
 ul
  li
   a(href="#") Despre
  li
   a(href="#") FAQ
  li
   a(href="#") Numere
  li
   a(href="#") Colectiv
h1 test

SASS

body
 height: 2000px
 nav
  border: 1px solid black
  width: 100vw
  margin: 0 auto
  position: fixed
  ul
   text-align: center
   font-size: 0 // I'm using this to eliminate the space between the li elements
  li
   display: inline-block
   padding: 3vh 6vw
   &:hover
    cursor: pointer
    a
     font-size: calc(20px + (30 - 20) * ((100vw - 300px) / (1600 - 300)))
     text-decoration: none
     color: gray
 h1
  font-size: 50px

Answer 1

import { withNavigation } from 'react-navigation';

export default withNavigation(({onPress, navigation}) => {
  if(navigation.state.index === 0) {
    return null;
  }

  return (
    <TouchableOpacity 
    ...

已编辑的代码笔here

Answer 2

如果您可以将导航栏设置为设定高度，我建议您执行此类操作。使用与固定导航/标题相同高度的margin-top来抵消页面内容可能相当普遍。并且不要只是偏移h1，偏移内容包装类，以便继续添加所有内容。

PUG / HTML nav .box #nav-icon1 span span span span ul li a(href="#") Despre li a(href="#") FAQ li a(href="#") Numere li a(href="#") Colectiv div.content-wrapper h1 test

SASS body height: 2000px nav border: 1px solid black width: 100vw margin: 0 auto position: fixed top: 0 height: 80px ul text-align: center font-size: 0 li display: inline-block padding: 3vh 6vw &:hover cursor: pointer a font-size: calc(20px + (30 - 20) * ((100vw - 300px) / (1600 - 300))) text-decoration: none color: gray .content-wrapper margin-top: 80px h1 font-size: 50px

如果你不能设置高度，你可以写一些javascript来获得高度并以编程方式设置margin-top。

内容落后于固定的导航栏，不会被推倒

2 个答案: