粘性导航栏有故障行为

Question

所以我尝试定制一个导航栏，它设置在页面边框的正下方。我做了一个插图来帮助解释：

在页面上，我在整个页面周围有一个边框（蓝色），然后是导航栏（红色），它会随着页面滚动，直到它到达导航栏的顶部并一直保持到用户向上滚动为止。

我的问题是，一旦 js 启动（当用户滚动超过顶部边框时），似乎有什么东西将我的导航栏及其内容向右推，做出明显的猛拉动作。

这是我的 html：

    <html>
    <head>
      <title>Title</title>
      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
      <%= csrf_meta_tags %>
    </head>

    <body>
      <%= yield :scss %>

      <div class="container-main <%= layout %>">

        <nav class="main-nav">
          <a class="navbar-brand" href="#">
            <i class="fa fa-bars menu-icon"></i>
          </a>
        </nav>

        <div class="container">
          <%= yield %>
        </div>

      </div>

      <%= yield :js %>

    </body>
    </html>

有谁知道如何解决这个问题？我不确定它是否是需要覆盖的引导程序还是什么......我试图设置导航栏的左边距以等同于运动，但它最终弄乱了我设置的引导程序列.. .任何建议表示赞赏！

这是我的 CSS：

    .main-nav {
      text-align: center;
      margin-top: 50px;
      background: transparent;
      height: 50px;
      z-index: 150;
      margin-bottom: -50px;
    }

    .main-nav-scrolled {
      position: fixed;
      width: 100%;
      top: 0;
    //  margin-left: -35px; not working
    }

    .main-nav,
    .container {
      position: relative; 
    }
    .container {
      background: transparent;
      padding: 100px 
    }
    .layout-with-border {
      background: #eaeae8; //fixed for all product pages
      border: 35px solid #dad4c9; //theme color light
    }
    .layout-without-order {
    }

这是我的JS：

      var  mn = $(".main-nav");
          mns = "main-nav-scrolled";

      var BorderWidth = 35;

      $(window).scroll(function() {
        if( $(this).scrollTop() > BorderWidth ) {
          mn.addClass(mns);
        } else {
          mn.removeClass(mns);
        }
      });

抱歉，由于我是新手，因此如何发布这么多部分有点令人困惑。我为边框布局创建了一个助手：

    module ApplicationHelper
      def layout
        if params[:controller] == 'products' && params[:action] == 'show' 
          'layout-with-border' 
        elsif params[:controller] == 'volumes' && params[:action] == 'show' 
          'layout-with-border' 
        else 
          'layout-without-border'
        end
      end
    end

Answer 1

您的代码非常接近您的需要。

故障是由于从 更改position: relative为position: fixedin .main-nav。

固定元素宽度是相对于视口计算的，而不是父容器。

首先，将余量归零body（如果需要，取决于您的设计）。

为了说明，我添加了 35px 的蓝色边框.main-container。

然后，对于.main-nav-scrolled，将左右偏移量都设置为 35px 以设置nav 块的正确宽度，您不需要设置宽度值。

注意：.container当滚动到触发点时，内容会向上跳跃 50px。要阻止这种情况，您需要在修复元素时添加 50 像素的内边距.container-main或 50 像素的顶部边距。我选择添加填充，请参阅下面的 jQuery 中的更改。.containernav

var mn = $(".container-main");
mns = "main-nav-scrolled";

var BorderWidth = 35;

$(window).scroll(function() {
  if ($(this).scrollTop() > BorderWidth) {
    mn.addClass(mns);
  } else {
    mn.removeClass(mns);
  }
});

body {
  margin: 0;
}
.container-main {
  border: 35px solid lightblue;
}
.main-nav {
  text-align: center;
  margin-top: 0px;
  background: yellow;
  height: 50px;
}
.main-nav-scrolled .main-nav {
  position: fixed;
  top: 0;
  left: 35px;
  right: 35px;
  z-index: 1;
}
.main-nav-scrolled.container-main {
  padding-top: 50px;
}
.container {
  position: relative;
  background: beige;
  padding: 100px;
  height: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-main">
  <nav class="main-nav">
    <a class="navbar-brand" href="#">
      <i class="fa fa-bars menu-icon">Icon</i>
    </a>
  </nav>
  <div class="container">container content...</div>
</div>