滚动时固定页眉和侧边栏位置答案

【问题标题】：Fixing the Header & Sidebar position while Scrolling滚动时固定页眉和侧边栏位置
【发布时间】：2019-05-20 23:33:35
【问题描述】：

我正在处理一个 Ruby on Rails 项目。在向下滚动页面时尝试使标题和侧边栏具有固定位置时遇到问题。我已经尝试过这个位置：固定； css 属性，虽然这有效（在某种程度上），但它破坏了页面其余部分的格式。首先，我将展示我的代码，这样更有意义。这是嵌入的 ruby html 文件，用作我的 Web 应用程序的店面。

application.html.erb

<header class="main">
      <aside>
        <%= form_tag store_index_path, class: 'locale' do %>
          <%= select_tag 'set_locale',
            options_for_select(LANGUAGES, I18n.locale.to_s),
            onchange: 'this.form.submit()' %>
          <%= submit_tag 'submit', id: "submit_locale_change" %>
        <% end %>
      </aside>
        <div class="header_obj"><%= image_tag 'logo.svg', alt: 'The Pragmatic Bookshelf' %></div>
        <%= javascript_pack_tag("clock") %>
        <div class="header_obj" id="clock-component"></div>
      </div>
      <h1><%= @page_title %></h1>
    </header>
    <section class="content">
      <nav class="side_nav">
        <% if @cart %>
          <div id="cart" class="carts" >
            <%= render_if @cart && @cart.line_items.any?, @cart %>
          </div>
        <% end %>
        <ul>
          <li><a href="/"><%= t('.home') %></a></li>
          <li><a href="/questions"><%= t('.questions') %></a></li>
          <li><a href="/news"><%= t('.news') %></a></li>
          <li><a href="/contact"><%= t('.contact') %></a></li>
          <% if session[:counter] > 5 %>
            <li>count:<%= session[:counter] %></li>
          <% end %>
        </ul>

        <% if session[:user_id] %>
          <nav class="logged_in_nav">
            <ul>
              <li><%= link_to 'Orders', orders_path %></li>
              <li><%= link_to 'Products', products_path %></li>
              <li><%= link_to 'Users', users_path %></li>
              <li><%= link_to 'Logout', logout_path, method: :delete %></li>
              <li>Users: <%= $unique_users %></li>
            </ul>
          </nav>
          <% else %>
          <nav class="logged_out_nav">
            <ul>
              <li><%= link_to 'Login', login_path %></li>
              <li>Users: <%= $unique_users %></li>
            </ul>
          </nav>
        <% end %>
      </nav>
    <main class=' <%= controller.controller_name %> '>
      <%= yield %>
    </main>
    </section>

这个文件有一个包含在 (header class="main") 中的标题栏和一个包含在 (nav class="side_nav") 中的侧栏，然后是 erb 代码中的实际页面内容 (main class=' (%= controller.controller_name %) ') 以更好地显示页面的结构，请参阅以下指南...

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>

    <!--top bar-->
    <header class="main">
    </header>

    <section class="content">

      <!--side bar-->
      <nav class="side_nav">
      </nav>

      <!--actual content-->
      <main class=' <%= controller.controller_name %> '>
      </main>

    </section>

  </body>
</html>

就 css 文件而言，除了边距、填充和字体样式外，没有太多内容，它相当大，所以我不会在这里包含它。我认为其中的任何内容都不会妨碍这个问题的解决。

我的目标是在用户滚动浏览页面内容时让顶部和侧边栏保持固定。当我尝试使用 position:fixed 时，问题是内容会出现在侧栏后面。我能够通过向内容添加填充来解决此问题，但出现了另一个问题，因为侧边栏并不总是固定大小，当用户单击某些按钮时，侧边栏可能会扩大宽度或收缩，因此添加固定填充不是一个好的解决方案。有什么办法可以实现这一点，也许是通过 JS？有点迷失在这里，任何帮助表示赞赏:)

【问题讨论】：

标签： html css ruby-on-rails ruby

【解决方案1】：

最简单的方法可能是使用flexbox。

我在这里为你做了一个例子：

<!DOCTYPE html>
    <html>
      <head>
      </head>
    <body style="margin: 0">
      <div style="height: 100vh; display: flex; flex-direction: column; overflow: hidden">
        <!--top bar-->
        <header class="main" style="background-color: #aaa; padding: 5px;">
          <button onclick="document.getElementById('sideBar').innerHTML = 'Bigger text that grows'">Change side bar text</button>
        </header>

        <section class="content" style="display: flex;">

          <!--side bar-->
          <nav class="side_nav" style="padding: 5px;">
            <p style="background-color: #ccc; height: 300px;" id="sideBar">Side bar</p>
          </nav>

          <!--actual content-->
          <main class=' <%= controller.controller_name %> ' style="flex: 1; height: 100%; overflow: auto; padding: 5px;">
            <p style="background-color: #eee; height: 300px;">Main content</p>
            <p style="background-color: #eee; height: 300px;">Main content</p>
            <p style="background-color: #eee; height: 300px;">Main content</p>
            <p style="background-color: #eee; height: 300px;">Main content</p>
            <p style="background-color: #eee; height: 300px;">Main content</p>

          </main>

        </section>
      </div>
    </body>
  </html>

请注意，您需要重置margin 的<body>。

【讨论】：

您好，感谢您的回复！这完美无缺。我将阅读 flexbox，因为我以前从未使用过它，但非常感谢您的回答和有用的示例！