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

Question

I have a Ruby on Rails project I am working on. 我有一个正在研究的Ruby on Rails项目。 I am encountering issues when trying to make a header and sidebar have a fixed position while scrolling down the page. 尝试在向下滚动页面时使标题和边栏具有固定位置时遇到问题。 I have experimented with the position:fixed; 我已经尝试过以下位置：fixed; css attribute, and although this works (to some degree), it ruins the formatting of the rest of the page. css属性，尽管这种方法（在某种程度上有效）会破坏页面其余部分的格式。 First I will show my code so this makes more sense. 首先，我将展示我的代码，这样更有意义。 This is the embedded ruby html file that acts as a storefront for my web application. 这是嵌入式ruby html文件，充当我的Web应用程序的店面。

application.html.erb 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>

This file has a header bar wrapped in a (header class="main") as well as a side bar wrapped within (nav class="side_nav") then the actual page content within the erb code (main class=' (%= controller.controller_name %) ') to show the structure of the page a little better, see the following guide... 该文件的标题栏包装在（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>

As far as the css file goes, there is not much there aside from margin, padding, and font styling there, its rather large so I wont include it here. 就css文件而言，除了边距，填充和字体样式之外，这里没有太多，它很大，所以我在这里不包括它。 I dont think anything in there would impede a solution to this issue. 我认为其中没有任何东西会阻碍该问题的解决。

My goal is to have the top and side bar stay fixed while the user scrolls through the content of the page. 我的目标是在用户滚动浏览页面内容时，使顶部和侧边栏保持固定。 When i tried using position:fixed, the issue was the content would go behind the side bar. 当我尝试使用position：fixed时，问题是内容会在侧边栏后面。 I was able to resolve this issue by adding padding to the content, but another issue arose since the side bar is not always a fixed size, when a user clicks certain buttons the side bar may expand in width or contract, so adding a fixed padding was not a good solution. 我能够通过在内容中添加填充来解决此问题，但是又出现了另一个问题，因为侧栏并非总是固定大小，当用户单击某些按钮时，侧栏可能会在宽度或收缩上扩大，因此添加了固定的填充这不是一个好的解决方案。 Is there any way I can achieve this, maybe through JS? 有什么办法可以做到这一点，也许可以通过JS？ Kinda lost here, Any help is appreciated :) 金达在这里丢了，任何帮助表示赞赏:)

Answer 1

The easiest way is probably to use flexbox . 最简单的方法可能是使用flexbox 。

I made an example for you here: 我在这里为您提供了一个示例：

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

Please note that you need to reset the margin of the <body> . 请注意，您需要重置<body>的margin 。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-05-21 00:28:39

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-05-21 00:28:39

解决方案1
0 已采纳 2019-05-21 00:28:39