My goal is to have two sidebars on the left that are fixed and collapsible, and having the main content on the right to "follow" the sidebars when they collapse/expand.
Illustration of the possible positions for sidebars and content:
But let's proceed step by step.
I want a fixed sidebar on the left that is collapsible, and the main content (on the right of the sidebar) to be expanded when the sidebar is collapsed.
The thing here is that the sidebar has a fixed position, so the content on its right has to be pushed right (with a left margin) to avoid overlap.
I know the width of the sidebar so it's not a problem to play with CSS/JavaScript, and I have a working example here: https://jsfiddle.net/Pawamoy/yamm7eLh/2/
Basically, when you click on the sidebar (bottom part), active class is toggled on the sidebar and expand class is toggled on the content. These classes will change the width of the sidebar and the left margin of the content.
$(document).ready(function() {
$('#sidebar').on('click', function(e) {
if ($(e.target).is("#sidebar")) {
$('#sidebar').toggleClass('active');
$('#content').toggleClass('expand');
}
});
});
I want to add a second fixed and collapsible sidebar, at the right of the first one.
But playing with toggled CSS classes will not be enough since I need to calculate which sidebar is active or not, to be able to set the left margin of the content. The left margin would be 160px when both sidebars are collapsed, 320px when only one is collapsed, and 500px when none are collapsed. Not only that but the second sidebar itself needs to be pushed back and forth on the right depending on the first sidebar width.
Solution as I imagine it: the content could just "follow" the element on its left (the second sidebar), without changing its left margin value. Is there a way to do that, knowing that both sidebars are fixed (they stay at the same position on the screen when the user scroll the main contents)? In other words, how can I position the second sidebar relative to the first one, and the content relative to the second sidebar, and at the same time have both sidebars "fixed"?
I solved this by thinking with boxes. Instead of trying to accomplish complex resizing between three side-to-side elements, I used one more layer of div. See the idea on the image below: on the left is what I was trying to do. On the right is how I solved it. I even managed to add a fixed navigation bar. I just took what I already had and used it a second time in a sub-div.
The key here is to NOT specify the left CSS positioning value for your fixed elements. Here is the updated fiddle: https://jsfiddle.net/Pawamoy/yamm7eLh/3/
Related
codepen
I am trying to position footer div at the bottom of the page which is maximum value of the bottom coordinates of menu and content divs (Math.max(menu, content)).
But unfolding all three menus (making menu bigger than content) this value becomes smaller than actual menu bottom value (and bigger than content bottom value).
Thank you in advance!
getBoundingClientRect() gives results relative to the viewport, so it's affected by the current scroll position. Notice that if you unfold the menus without scrolling down (e.g. unfold menu 3 first) then it works correctly.
You can add window.scrollY to the bottom values to get the true position relative to the top of the document.
I'm looking at https://www.w3schools.com/howto/howto_js_navbar_sticky.asp for implementing a sticky navigation bar for my website, but unlike the example on that page, my site has two "navbar" divs - one on top of the other. I want to have the bottom bar become sticky once it reaches the top of the page, but when I implement according to the tutorial, it doesn't become sticky until For the purpose of this question, label one "logobar" and the other "navbar".
How can I add the heights of both bars to calculate the offsetTop to use in the w3schools' var sticky = *calculatedvalue*.offsetTop; statement?
In addition to this, in the tutorial, there's a .sticky + .content padding-top set at 60px, which is static. In my case, both of my "logobar" and "navbar" are wrapped in a div wrapped by the , and the following "content" is the blog "main" at the same level as the . So how would I add a padding that is a calculate of the entire so that my sticky navbar doesn't go off-screen and then rubber-band to its sticky position? So that it's dynamic if the total header height changes on a device of different screen width.
I have 3 separate divs.
First one 100vw and 100vh.
Second one has 100vw and 100vh and it has a div(".move") inside of 400vw and 100vh - which will be moving later on to the left and to the right.
Third one is 100vw and 100vh.
When I scroll down, I want the second div to get position fixed. (at this point div third jumps into div second position).
Then I want to scroll to the right of div ".move".
At the end of scroll I want to add position absolute to div second and keep scrolling down through div third.
I dont know how much should I keep adding to scrollX (or translateX(-?px) or left = -? , doesnt matter I guess) so it is equal to normal scrollY at the end.
Also when I scroll quickly it jumps to div third and div ".move" barely get scrolled.
I would like to do it either useing scrollbar or mousewheel.
It should look like in this page:
bitsens.com/
And this is my current code:
codepen.io/Baromaro/pen/yLLMWMM
(the code is so sad..)
I've got a mobile website that has a navigation menu that is displayed on click of a fixed position button in the top right. This menu is also fixed so that the top of the menu starts 10px below the bottom of the button. The problem is that this navigation menu can be longer than the height of the device being used, and when you try and scroll it will scroll the content behind the navigation menu seeing as it is fixed. Can someone help me get around this?
As per my comment:
You need to use JS to find the height of the screen, top of the menu and set the max height of the menu to the difference of these
For the height of the window use $('window').height()
For the menu's distance from the top of the browser: $('.menu').offset()
The function should live in the show menu event listener:
var maxHeight = $(window).height() - $('.menu').offset();
$('.menu').css({ "max-height" :maxHeight})
Make sure that overflow:scroll; is set on your menu
What you need to do is put a div with a class (I chose scrollable) inside the navigation menu that has the scrollable content and then set the css for that div to be something along the lines of :
div.scrollable{
overflow : auto;
position : relative;
}
That way, the div (and the inside content of the navigation menu) will be scrollable while the position overall of the menu remains fixed.
I have a HTML-page with several DIVs and a function named 'fullscreenCSS' wich takes care of the DIVs being fullscreen.
When I scroll using the scrollbar, I want the current DIV to stay at its position (if scrolled to the end of that DIV) and the next one slides over it. I think the current DIV temporarily got to have a position 'absolute' or 'fixed' untill the next one has reached the top of the screen. Does anybody have an idea how to do this?
A first attempt can be seen on: http://www.84media.nl/project/couch/
How's this look?
http://jsfiddle.net/Tgm6Y/2227/