Question

我尝试向下滚动时保持导航固定，但设置position:fixed;没有帮助。这是我的导航：

HTML：

<div id="nav">

      <ul>
        <li><a href="second.html">Register</a></li>
        <li>
            <a href="second.html">Login</a>
        </li>
    </ul>

    </div>

CSS：

#nav {  
    position:relative;  
    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%;
    }

#nav ul {   
    list-style: none;   
    padding: 0;
    height:800px;
    width:300px;    
    margin: 0% 0% 0% 0%;
}    

#nav ul li { 
    float: left;
    font-weight: bold; 
    left:900px;
} 

#nav ul li a {
    display: block;
    color: white;
    left:900px;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

我搜索过其他网站。 position:fixed正在为他们工作但不适合我。这就是他们正在使用的：

.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>

我无法理解如何将其应用于我的代码。我在导航相对位置上存在一些问题吗？

Answer 1

我不确定你试图告诉我们的问题是什么，但这是一个工作小提琴：https://jsfiddle.net/LLccjLr9/1/

# config/initializers/devise.rb
# The default HTTP method used to sign out a resource. Default is :delete.
config.sign_out_via = :get

注意我还在#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%; } margin-top添加了一些#banner，以便它显示在导航栏的正下方。我还将<div>设为1000px高，以证明它有效......

Answer 2

你的拼写错误css班级名navbar-fixed＆amp; jquery类名navbar-fixed-top

$(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');
    }
  });
});

https://jsfiddle.net/1x6qLLp1/

位置：固定不适用于导航

2 个答案: