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.
Related
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/
I have created fiddle regarding the problem issue in link here
Header and footer are absolutely positioned and 100% width. The middle content consists of the dashboard table. Header consists of two images, which on clicked, will toggle the content.
When I click on slide-toggle-1, the content of headerbottombar is revealed.
But the middle content is hidden and overlapped.
How can I properly show content of middle content when the slide-button-1 and slide-button-2 is clicked.
I would like to thank for all suggestions and solutions. Solutions are acceptable either in css, jquery and javascript as long as feasible solutions are presented.
Why dont you try adding a class with margin-top to bring the div down as much as needed. Like this:
.top{
margin-top:100px;
}
Add this to you div with ".content" Like so:
<div class="content top">
Then just toggle it on the 2 clicks like:
$( ".content" ).toggleClass( "top" );
You can give additional styles, but this is the basic run down.
Update :
If you want a variable height header that's sticky to the top, you might have to use some javascript that dynamically adjusts the top margin of the content
var offset = document.getElementById("sticky-top-id").offsetHeight;
document.getElementById("content-id").style.marginTop = offset + 'px';
Source
Old Answer :
There are many ways to achieve what you want. One is to change the position of header to relative (and remove the line breaks between header and content). If you use fixed or absolute position, the header will overlap with the body content. Whereas relative will push the content down as the header expands.
See this : https://jsfiddle.net/d0pyxdoj/3/
P.S. Header/Footer have position fixed in your code, not absolute
Please check the below example. Height identification using script we can inject the spacing.
Script:
function heightCalc(){
topHeight = $('.sticky-top').height();
$('.content').css({"margin-top": topHeight+"px"});
}
Example Fiddler : https://jsfiddle.net/scj4u0t5/1/
I'm having a problem trying to make my sidebar stick in the correct height and making the desired effect, this is my code:
https://jsfiddle.net/oavgLrf9/
I want my sidebar to add a fixed class when the second module reaches top, the problem is that both of the modules use height auto so their height change depending of the monitor.
<div class="sidebar">
<div class="mod-1"></div>
<div class="mod-2"></div>
</div>
Also I want that when the user scrolls top the side bar goes top too, and when it reaches bottom changes to absolute, like this example:
http://jsfiddle.net/gmolop/y3tdL9wd/
I tried using the sticky-kit plug in it does almost exactly what I want, would be the example 4, but it doesn't stick in the height I need because of these changing values.
you can use HcSticky to solve your problem.
http://someweblog.com/hcsticky-jquery-floating-sticky-plugin/
see examples:
http://someweblog.com/demo/hcsticky/
If you check out this link, you will see that as you scroll down, the navigation has both affix and scrollspy functionality (From bootstrap 3)
http://codepen.io/datanity/pen/thnua
However, if you add white space at the top, the affix/scrollspy occurs in the wrong location. For example, this is with 800px of white space ontop.
http://codepen.io/datanity/pen/haKzg
Now of course here, you can adjust the affix/scrollspy code so that way it works with the 800px height ontop but, my problem is that I have no idea what space I will have on top. Sometimes it will be 2000px other times only 300px. Also, there is no way for me to know the id/class of the divs that appear ontop. Sometimes it will be 10 divs, sometimes 0, and they will always have different id/classes.
Is there a way that the affix and scrollspy can be triggered relative to the container it is in, and not a fixed px location from the top of the body?
Thanks for any help!
Tim
adding this to the top of the js fixed the issue. With this method, it does not matter how much white space or how many divs you have ontop. Your bootstrap scrollspy and affix will always be in the correct place!
$('#mynav').affix({
offset: {
top: $('#mynav').offset().top
, bottom: function () {
return (this.bottom = $('.bs-footer').outerHeight(true))
}
}
});
Add an ID to the section element (located at the top of the HTML page). I'm assuming this is the element that you're concerned about changing heights.
<section id="top-section" style="height:800px;">
</section>
Then add these lines to your JS file:
var $h = $("#top-section").height() + 280;
$("#mynav").attr("data-offset-top", $h);
This queries the rendered height of the section element, and then fixes your sidebar response height accordingly.
If you will also have an unknown amount of sections, then you should wrap the code that creates the sections in a div element. For instance, if you're using PHP to build the section area of your webpage, you should do something like this:
<div id="section-wrapper">
<?php echo "Whatever code you have here" ?>
</div>
I have page http://inspire.mobi/how, where it is aligned horizontally well ut it is not properly aligned vertically.
For this page http://inspire.mobi/how, there are 2 divs ( having css classes mainHow & botHow) in the body part. Both these divs are in one main div "mainHow" whose height is calculated using javascript (wondow.height- footerheight-headerheight). Internal 2 divs (having css classes mainHow & botHow) are 75% & 25% of the main div "mainHow". But it is not covering full height. When i zommin & zoom out the page (not 100% page size), it is creating too much part leftout below "bothow" div.
Please help me on this.
I had a look at this site and i can see a few errors that might be causing it.
Your divs mainHow & botHow, height are adding up to 105%.
In your javascript that you have set up to work out .container height, your footer height that you have hardcoded is set to 110px, im seeing the footer hieght as 91px, so you will have a gap there. If you fixed this, it should be the full size. If im understanding the question right