Html CSS减边距问题

我使用负边距将导航栏放置在一个具有类main的div中。在小屏幕中，当我单击导航栏切换图标时，它看起来不太好。因为我需要再次更改边距…如何在不使用负边距的情况下解决此问题

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

下面是我的代码输出：

---

这是您的解决方案：

.top{
高度：50px；
背景：红色；
}
navbar先生{
左边距：20px；
右边距：20px；
}
梅因先生{
高度：1500px；
背景：橙色；
}

对CSS进行如下更改应该可以解决此问题：

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

如果你不想要固定导航：

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

如果您有任何问题，请告诉我。

--更新--

我认为您的问题是，如果用户滚动超过50px，如何将navbar类附加到主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>

--第一个答案--

您需要的是：@media screen和（最大宽度767px）当屏幕宽度小于767px时，您可以定义如下的覆盖css样式：

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

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

但是这会导致另一个问题，当导航栏关闭时，主类仍然有-336px的余量，我猜这不是您想要的

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

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

---

我很难理解你的问题。请在这里制作一个工作代码片段，重现您的问题。对你的问题进行一点重构，使其更具可读性和可理解性。谢谢你的回答。但它不能正常工作。谢谢……但这对我来说不是一个合适的解决方案。我希望导航栏位于.main分区内。当有人滚动页面时，导航栏将固定在顶部。你会在我的html中发现一个粘性的top bootstrap类。问题是在滚动页面之前，我如何将navbar放在不同屏幕的.main div中？