当使用javascript固定位置时，页边距顶部不能正常工作。

Question

当导航条在位置固定时，标志的边距顶部不工作。正如你可以看到，在所附的图片中，当它向下滚动时，它消失了。

<div class="container">
    <div class="row number">
        <div class="col-sm-5 col-xs-3">

        </div>
        <div class="col-sm-2 col-xs-2">
        </div>
        <div class="col-sm-5 col-xs-7">
            <h2>Call Us Today<br>
            <a href="tel:[phone]">604-729-3864</a></h2>
        </div>
    </div>
</div>
<nav class="navbar navbar-inverse" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>
            <nav>
            <%= link_to root_path do %><%= image_tag "plumbertodaylogo.png",alt: "plumber-today-logo",class: "logo"%><% end %>
            </nav>
        </div>

        <div class="collapse navbar-collapse navbar-right">
            <ul class="nav navbar-nav">
                <li class="active"><%= link_to "Home", root_path %></li>
                <li><%= link_to "About Us",about_path %></li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Plumbing <i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu">
                        <li><a href="blog-item.html">Repipe/ Burst pipes</a></li>
                        <li><a href="pricing.html">Leak Detection</a></li>
                        <li><a href="404.html">Fixture repair & Installation</a></li>
                        <li><a href="shortcodes.html">Garbage Disposal Services</a></li>
                        <li><a href="shortcodes.html">Hot Later Tanks</a></li>
                        <li><a href="shortcodes.html">Watermains</a></li>
                        <li><a href="shortcodes.html">Sump & Pump services</a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drainage <i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu">
                        <li><a href="blog-item.html">Drain cleaning pipes</a></li>
                        <li><a href="pricing.html">Sewer Main</a></li>
                        <li><a href="404.html">Clogged toilet Services</a></li>
                        <li><a href="shortcodes.html">Draintile Services</a></li>
                        <li><a href="shortcodes.html">Camera Inspection</a></li>
                        <li><a href="shortcodes.html">Hydrojetting</a></li>
                    </ul>
                </li>

                <li><a href="portfolio.html">Service Areas</a></li>
                <li><a href="blog.html">Reviews</a></li> 
                <li><a href="blog.html">Blog</a></li> 
                <li><a href="coupons.html">coupons</a></li> 
                <li><%= link_to "Contact" ,new_contact_path %></li>                        
            </ul>
        </div>
    </div><!--/.container-->
</nav><!--/nav-->

javascript文件

$(window).scroll(function(e){ 
  var $el = $('.navbar'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
        $('.logo').css({'margin-top': '-10!important','width': '10px'});

  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'});
        $('.logo').css({'margin-top': '-110!important','width': '150px'});

  } 
});

css

.navbar {
  border-radius: 0;
  margin-bottom: 0;
  background: white;
  padding: 0px 0;
  padding-bottom: 0;
  position: fixed;
  z-index: 100;
  width:100%;
}

 .logo{
  margin-top: -110px !important;
  width: 150px;
 }

Answer 1

当你给 position: fixed 属性，您需要使用 top: 50px 而不是 margin-top: 50px因为，当你使用fixed时，它是相对于屏幕而不是相对于父div的。

由于导航条是 fixed 图像的顶部没有任何元素，所以它要往上走，你需要使用 heightOfFixedNavbar + marginTop 到图像。