У меня есть проект Ruby on Rails, над которым я работаю.Я сталкиваюсь с проблемами при попытке сделать фиксированную позицию заголовка и боковой панели при прокрутке страницы вниз.Я экспериментировал с позицией: исправлено;Атрибут css, и хотя это работает (до некоторой степени), он разрушает форматирование остальной части страницы.Сначала я покажу свой код, чтобы в этом было больше смысла.Это встроенный файл ruby html, который служит витриной для моего веб-приложения.
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>
Этот файл имеет строку заголовка, обернутую в (заголовочный класс ="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?Вроде потеряли здесь, Любая помощь приветствуется:)