Вершина маржи не работает должным образом, когда позиция зафиксирована с javascript

Question

Когда навигатор в позиции зафиксирован, верхнее поле lo go не работает. Как вы можете видеть на прикрепленном изображении, когда оно прокручивается вниз, оно исчезает

<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:+1-778-233-0368">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, в верхней части изображения нет элемента, поэтому оно идет вверх, поэтому необходимо использовать heightOfFixedNavbar + marginTop для изображения.