Question

所以我试图自定义一个设置在页面边框下方的导航栏。我做了一个例子来帮助解释： enter image description here

在页面上，我在整个页面周围有一个边框（蓝色），然后是导航栏（红色），它与页面一起滚动，直到它击中导航栏的顶部并粘住，直到用户向上滚动。

我的问题是，一旦js踢（当用户滚过顶部边框时）看起来有些东西将我的导航栏及其内容推向右侧，从而产生明显的混蛋运动。

enter image description here

这是我的HTML：

String

有人知道如何解决这个问题吗？我不确定它是否需要被覆盖的引导物或者什么......我试图将导航栏的左边缘设置为等同于移动但它最终弄乱了我设置的引导列...任何建议表示赞赏！

这是我的CSS：

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

这是我的JS：

    .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 {
    }

对不起，如果发布这么多零件有点令人困惑，因为我很新。我为边框布局创建了一个帮助器：

      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);
        }
      });

Answer 1

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

故障是由position: relative中的position: fixed更改为.main-nav。

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

首先，将body上的边距清零（如果需要，取决于您的设计）。

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

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

注意：当滚动到达触发点时，.container中的内容会向上跳50px。要停止此操作，您需要在修复.container-main元素时向.container添加50px填充或向nav添加50px的上边距。我选择添加填充，请参阅下面jQuery中的更改。

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>

Answer 2

为您的nav元素本身或父包装器定义max-width:。

你应该在整个宽度包装器之外的页面中间有一个div包装器 - 我看到了。 例如下面的内容。

#middle_page_wrap { 
    width: 960px;
    max-width: 960px;
    margin: 0 auto;
    position: relative;
}

并且喜欢：

<div class="container-main">
 <div id="middle_page_wrap"><!-- nest -->
 <nav class="main-nav">
          <a class="navbar-brand" href="#">
            <i class="fa fa-bars menu-icon"></i>
          </a>
  </nav>
<!-- etc -->

另外，是的，我同意这些意见;不确定JS或动态工具或其他语言在这里发挥作用。但 听起来像一个纯粹的CSS事物

如果这不起作用，那么因为你没有显示代码，你必须创建一个demo / jsfiddle。

粘性导航栏有轻微的行为

2 个答案: