Html 位置：固定不工作的导航_Html_Css

Html 位置：固定不工作的导航

html css

Html 位置：固定不工作的导航,html,css,Html,Css,当我尝试向下滚动时，我试图保持导航固定，但设置位置：固定没有帮助。这是我的导航： HTML: 我搜索了其他网站职位：固定为他们工作，但不为我工作。这就是他们正在使用的： .navbar-fixed { top: 0; z-index: 100; position: fixed; width: 100%; } #body_div { top: 0; position: relative; height: 200px; background-color: green

当我尝试向下滚动时，我试图保持导航固定，但设置

位置：固定没有帮助。这是我的导航：
HTML:
我搜索了其他网站<代码>职位：固定

为他们工作，但不为我工作。这就是他们正在使用的：

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

#body_div {
  top: 0;
  position: relative;
  height: 200px;
  background-color: green;
}

#banner {
  width: 100%;
  height: 273px;
  background-color: gray;
  overflow: hidden;
}

#nav_bar {
  border: 0;
  background-color: #202020;
  border-radius: 0px;
  margin-bottom: 0;
  height: 30px;
}

//the below css are for the links, not needed for sticky nav
.nav_links {
  margin: 0;
}

.nav_links li {
  display: inline-block;
  margin-top: 4px;
}

.nav_links li a {
  padding: 0 15.5px;
  color: #3498db;
  text-decoration: none;
}
 </style>
 <script type="text/javascript">
 $(document).ready(function() {
  //change the integers below to match the height of your upper dive, which I called
  //banner.  Just add a 1 to the last number.  console.log($(window).scrollTop())
  //to figure out what the scroll position is when exactly you want to fix the nav
  //bar or div or whatever.  I stuck in the console.log for you.  Just remove when
  //you know the position.
  $(window).scroll(function () { 

    console.log($(window).scrollTop());

    if ($(window).scrollTop() > 550) {
      $('#nav_bar').addClass('navbar-fixed-top');
    }

    if ($(window).scrollTop() < 551) {
      $('#nav_bar').removeClass('navbar-fixed-top');
    }
  });
});
 </script>
 <body>
 <div id="banner">
  <h2>put what you want here</h2>
  <p>just adjust javascript size to match this window</p>
</div>

  <nav id='nav_bar'>
    <ul class='nav_links'>
      <li><a href="isha.html">Sign In</a></li>
      <li><a href="isha.html">Blog</a></li>
      <li><a href="isha.html">About</a></li>
    </ul>
  </nav>

.navbar已修复{
排名：0；
z指数：100；
位置：固定；
宽度：100%；
}
#身体科{
排名：0；
位置：相对位置；
高度：200px；
背景颜色：绿色；
}
#横幅{
宽度：100%；
身高：273px；
背景颜色：灰色；
溢出：隐藏；
}
#导航栏{
边界：0；
背景色：#202020；
边界半径：0px；
页边距底部：0；
高度：30px；
}
//下面的css用于链接，粘性导航不需要
.导航链接{
保证金：0；
}
.nav_links li{
显示：内联块；
利润上限：4倍；
}
.nav_链接李a{
填充：0 15.5px；
颜色：#3498db；
文字装饰：无；
}
$（文档）.ready（函数（）{
//更改下面的整数以匹配我调用的上俯冲高度
//banner.只需将1添加到最后一个number.console.log（$（window.scrollTop（））
//要准确确定导航时的滚动位置
//bar或div之类的。我为你在console.log中卡住了。只要在
//你知道这个职位。
$（窗口）。滚动（函数（）{
log（$（window.scrollTop（））；
如果（$（窗口）.scrollTop（）>550）{
$（'nav#u bar'）.addClass（'navbar-fixed-top'）；
}
if（$（窗口）.scrollTop（）<551）{
$（'nav#u bar'）。removeClass（'navbar-fixed-top'）；
}
});
});
把你想要的放在这里
只需调整javascript大小以匹配此窗口

我无法理解如何将此应用于我的代码。我在导航中保持相对位置有什么问题吗？

我不确定你想告诉我们的是什么问题，但这里有一个可行的办法：

注：我还在

#横幅

中添加了一些

边距顶部

，以便它显示在导航的正下方。我还将

设置为1000px的高度，以证明它是有效的…

您的拼写错误css类名

导航栏已修复&jquery类名导航栏固定顶部
$(document).ready(function() {
  $(window).scroll(function () { 

    console.log($(window).scrollTop());

    if ($(window).scrollTop() > 365) {
      $('#nav_bar').addClass('navbar-fixed');
    }

    if ($(window).scrollTop() < 366) {
      $('#nav_bar').removeClass('navbar-fixed');
    }
  });
});

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
log（$（window.scrollTop（））；
如果（$（窗口）.scrollTop（）>365）{
$（'nav#u bar'）.addClass（'navbar-fixed'）；
}
if（$（窗口）.scrollTop（）<366）{
$（'nav#u bar'）。removeClass（'navbar-fixed'）；
}
});
});

“我正试图保持我的导航固定…”但随后您正在分配位置：相对
到您的#nav
？？？您是否检查了规则的优先级？如果您提供JSFIDLE或任何其他在线编辑器，这将非常有帮助在你的导航元素将-上次我检查-定位它相对。。。不固定。@Abhitalks我需要将其与背景保持相对，以便将其放置在wrt背景的正确位置。请添加一个工作代码段，以便我们可以看到发生了什么，否则我们只能猜测。
.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}

#body_div {
  top: 0;
  position: relative;
  height: 200px;
  background-color: green;
}

#banner {
  width: 100%;
  height: 273px;
  background-color: gray;
  overflow: hidden;
}

#nav_bar {
  border: 0;
  background-color: #202020;
  border-radius: 0px;
  margin-bottom: 0;
  height: 30px;
}

//the below css are for the links, not needed for sticky nav
.nav_links {
  margin: 0;
}

.nav_links li {
  display: inline-block;
  margin-top: 4px;
}

.nav_links li a {
  padding: 0 15.5px;
  color: #3498db;
  text-decoration: none;
}
 </style>
 <script type="text/javascript">
 $(document).ready(function() {
  //change the integers below to match the height of your upper dive, which I called
  //banner.  Just add a 1 to the last number.  console.log($(window).scrollTop())
  //to figure out what the scroll position is when exactly you want to fix the nav
  //bar or div or whatever.  I stuck in the console.log for you.  Just remove when
  //you know the position.
  $(window).scroll(function () { 

    console.log($(window).scrollTop());

    if ($(window).scrollTop() > 550) {
      $('#nav_bar').addClass('navbar-fixed-top');
    }

    if ($(window).scrollTop() < 551) {
      $('#nav_bar').removeClass('navbar-fixed-top');
    }
  });
});
 </script>
 <body>
 <div id="banner">
  <h2>put what you want here</h2>
  <p>just adjust javascript size to match this window</p>
</div>

  <nav id='nav_bar'>
    <ul class='nav_links'>
      <li><a href="isha.html">Sign In</a></li>
      <li><a href="isha.html">Blog</a></li>
      <li><a href="isha.html">About</a></li>
    </ul>
  </nav>

#nav {  
    position:fixed;  
    top: 0;
    left: 0;
    text-align: inline;     
    background-color: #FF9933;
    height:90px;
    width: 1400px;  
    background-image: url(G:/wallpapers/nav3.jpg);    
    font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
    font-size: 130%;
}

$(document).ready(function() {
  $(window).scroll(function () { 

    console.log($(window).scrollTop());

    if ($(window).scrollTop() > 365) {
      $('#nav_bar').addClass('navbar-fixed');
    }

    if ($(window).scrollTop() < 366) {
      $('#nav_bar').removeClass('navbar-fixed');
    }
  });
});