时间戳

首页 > 解决方案 > 使用 javascript 固定位置时，边距顶部无法正常工作

javascript - 使用 javascript 固定位置时，边距顶部无法正常工作

问题描述

当导航栏位置固定时，徽标的边距顶部不起作用。正如您在向下滚动时所附图像中看到的那样，它消失了在此处输入图像描述在此处输入图像描述

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

文件

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

标签： javascriptcssruby-on-railscss-positionfixed

解决方案

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

由于导航栏是fixed图片顶部没有元素，所以它是向上的，你需要使用heightOfFixedNavbar + marginTop到图片。

推荐阅读