Question

我有一个正在研究的Ruby on Rails项目。尝试在向下滚动页面时使标题和边栏具有固定位置时遇到问题。我已经尝试过以下位置：fixed; 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？ Kinda在这里迷路了，不胜感激：）

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

滚动时固定页眉和边栏的位置

1 个答案: