I have a Ruby on Rails project I am working on. 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; css attribute, and although this works (to some degree), it ruins the formatting of the rest of the page. 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.
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...
<!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. 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. 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? Kinda lost here, Any help is appreciated :)
The easiest way is probably to use 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>
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.