Question

我使用减去边距将导航栏放在div中，该div具有类main ...在小屏幕上，当我点击导航栏切换器图标时它看起来不太好。因为我需要再次更改边距.. 。如果不使用负边距，我可以解决这个问题吗？

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
<div class="top"></div>
<div class="wrapper">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
        <button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navDrop">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navDrop">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">HOME</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">SKILL</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">PORTFOLIO</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">TEAM</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">BLOG</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">CONTACT</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="main"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-    bootstrap/4.1.1/js/bootstrap.min.js"></script>

这是我的代码的输出： https://codepen.io/Sakhawat5/pen/NzwQJz

Answer 1

<强> - 更新 -

我认为你的问题是如果用户滚动超过50px，如何将导航栏类附加到主div。这可以帮到你。

$(document).scroll(function() {
  if ($(document).scrollTop() >= 50) {
    // user scrolled 50 pixels or more;
    // do stuff for example:
     $('.navbar').appendTo('.main');
    // this will append the navbar to the main div, if you want other styling on the navbar aswell we can do the following:
     $('.navbar').addClass('.UserHasScrolled')  
    // now in you CSS set styling to .UserHasScrolled
  } else {
    // do things when user has NOT scrolled more then 50px
  }
});

还要确保包含jQuery，这是可能的，将其粘贴到所有其他脚本之下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

对于.UserHasScrolled类，您可以设置如下内容：

.UserHasScrolled {
     position: absolute;
     width: 100%;
     top: 0;
}

- 第一个答案 -

你要求的是：@media screen和（max-width 767px），而屏幕宽度小于767px你可以定义一个覆盖css样式：

@media screen and (min-width 767px) {
   .navbar {
        margin-bottom: -336px;
   }
}

但是这会导致另一个问题，当导航栏关闭时，主类仍然会有-336像素的余量，这不是你想要的。

要将导航栏保持在最顶部，只需将位置设置为固定：

.navbar {
     position: fixed;
     width: 90%;
     margin-left: 5%;
     margin-right: 5%;
}

Answer 2

这是你的解决方案：

＆＃13;

.top{
  height:50px;
  background:red;
}
.navbar{
  margin-left:20px;
  margin-right:20px;
}
.main{
  height:1500px;
  background:orange;
}

＆＃13;

<div class="top"></div>
<div class="wrapper">
  <div class="main">
    <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
		    <button class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#navDrop">
				    <span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navDrop">
				    <ul class="navbar-nav">
						    <li class="nav-item">
							      <a href="#" class="nav-link">HOME</a>
						    </li>
						    <li class="nav-item">
							      <a href="#" class="nav-link">ABOUT</a>
						    </li>
						    <li class="nav-item">
							      <a href="#" class="nav-link">SKILL</a>
						   </li>
						   <li class="nav-item">
							     <a href="#" class="nav-link">PORTFOLIO</a>
						   </li>
						   <li class="nav-item">
							     <a href="#" class="nav-link">TEAM</a>
						   </li>
						   <li class="nav-item">
							     <a href="#" class="nav-link">BLOG</a>
						   </li>
						   <li class="nav-item">
							     <a href="#" class="nav-link">CONTACT</a>
						   </li>
					 </ul>
			</div>
  </nav>
  </div>
</div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/popper.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-    bootstrap/4.1.1/js/bootstrap.min.js"></script>

＆＃13;

Answer 3

如下对CSS的更改应解决问题：

.navbar{
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
    position: fixed;
}

如果您不想要固定导航：

.navbar{
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
    position: absolute;
}

如果您有任何问题，请与我们联系。

CSS减去边际的问题

3 个答案: