I have a footer that contain the user name. I want to show it always on the bottom of the viewport. Like a fixed bottom bar but only on my sidebar.
I use the function
function setFooterStyle() {
var docHeight = $(window).height();
var footerHeight = $('#footer').outerHeight();
var footerTop = $('#footer').position().top + footerHeight;
$('#footer').css('margin-top', (docHeight - footerTop) + 'px');
$('#footer').removeClass('invisible');
}
this inside:
$( function () {
setFooterStyle();
window.onresize = setFooterStyle;
}
But because I use a sidebar I thing the margin-top will place the footer the amount of pixel under the sidebar and not under the page top. So it is somewhere at the bottom of the document and I have to scroll to see.
Any idea what I do wrong to keep the text always on the bottom of the viewport, while resize ans while scroll?
The general term for what you are trying to do is "Sticky Footer". The trick is to make a wrapper div for your content above the footer that takes up 100% of the height of the viewport, then to use negative margins on the footer to move it up the same amount as the height of the footer. Then the footer is always at the bottom of the viewport. Then you need to add padding to the bottom of the content so that it never gets covered by the footer, now that the footer is not taking up space in the regular flow of the layout.
html, body {
height: 100%;
margin: 0;
}
.content {
min-height: 100%;
}
.content-inside {
padding: 20px;
padding-bottom: 50px;
}
.footer {
height: 50px;
margin-top: -50px;
}
https://css-tricks.com/couple-takes-sticky-footer/
Related
I have a slideToggle(); menu which is positioned absolutely on the bottom of the page. The slideToggle(); is going to show big content and sometimes this ends up being taller than the viewport.
My question is, how do I prevent the menu to:
1 - Not going on the top of the logo as they are both on the sidebar of my website
2 - When it reaches a height taller than the viewport, this will be scrollable
To explain myself better, I'd like the content of my menu, once is shown by slideToggle(); and whenever is taller than the viewport's height minus logo's height, to stop right below my logo and to continue expanding downwards if that's the case, and that I am able to scroll it down despite its position:absolute.
Does anyone have an idea on how I can achieve that? Please have a look at the snippet.
$( "#click" ).click(function() {
$( ".content" ).slideToggle();
});
.logo {
background: #11a1d6;
margin: 10px;
height: 100px;
width: 300px;
}
.list {
width: 200px;
position: absolute;
bottom: 20px;
}
.content {
background: #082965;
height: 10000px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="logo"></div>
<ul class="list">
<li id="click">
Click me
<div class="content"></div>
</li>
</ul>
You would need an additional wrapper for your .content that has overflow-y: hidden and height set to the max height available. To determine this height you need a function that runs after your DOM is loaded and adds this to your .content-wrapper:
function setContentMaxHeight() {
let containerHeight = $('.container').height()
let logoMargin = $('.logo').offset().top;
let logoHeight = $('.logo').height();
let listHeight = $('.list').height();
let listMargin = 20;
let maxHeight = containerHeight - ( 2 * logoMargin ) - logoHeight - ( 2 * listMargin) - listHeight;
$('.content-wrapper').css({
'height': maxHeight + 'px'
});
}
$(document).ready(function(){
setContentMaxHeight();
window.onresize = setContentMaxHeight; // detect the window resize and rerun the function
});
working fiddle
I have a div of dynamic content so it height depends on dynamic data. when i scroll the browser window to bottom, if the that div reaches its end (bottom) on the view, i want to trigger a function (for now just console it ('reached bottom of div')). Also if browser reached the end of the page, the same function wants to trigger. how to achieve this im new to JS and innerHeight, clientHeight so on.. are confusing.
body {
min-height: 500px;
background-color: yellow;
}
.dynamicDiv {
min-height: 200px;
background-color: red;
color: #fff;
}
<div class="dynamicDiv">
some Dynamic data
</div>
window.innerHeight property returns the height of a window's content area.
window.scrollY returns the number of pixels that the document is currently scrolled vertically.
document.body.offsetHeight returns body's height including padding and border
https://jsfiddle.net/smilingpigs/n1vcx3po/4/
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
alert("you are at the bottom of the page");
}
};
Content in the viewport is fluid so when viewed on a smaller device the content height exceeds the 100vh. I was thinking of just using JS to calc the min-height of content blocks. Any ideas on a straight on if there is CSS approach? Cannot think of much... but maybe other smart folks can :-)
.content.intro {
height: 100vh;
min-height: 800px; // content can be higher than this
display: flex;
align-items: center;
justify-content: center;
margin-top: -80px;
padding-top: 80px; // adjust for the 80px header at top
}
Thanks for the comments. In this case it's a block of copy that can exceed the height of 100vh, because it's centered in flex layout it was clipping the text at smaller heights. My solution was just some simple JS triggered on load and resize:
setMinHeight : function() {
$('.content.intro').each(function() {
var bodyCopy = $(this).find('.bodyCopy'),
padTop = $(this).css('padding-top').substring(0,2),
padBottom = $(this).css('padding-bottom').substring(0,2);
minHeight = bodyCopy.outerHeight(true) + parseInt(padTop) + parseInt(padBottom) + $('header').outerHeight();
$(this).css( { 'min-height' : minHeight + 'px' });
});
}
Basically just set min-height of bodyCopy so the viewport is never smaller that the content inside it.
In my case -> content height + top/bottom padding of parent + height of header to stop overlapping
I have a header, in which i put my h1 and h2 headings at top. The problem is that header scrolls along the scroll bar which is of course normal but i want to fixed it at some point when all the headings on header scroll away. At this point I want header to stop and stays fixed.
I already tried fixed position but of course it fixed heading as well which exactly I don't want.
I also tried this JavaScript but no luck.
JavaScript
$(window).scroll(function() {
var _height = 120 - (120 * $(this).scrollTop() / $('body').height());
if (_height >= 80) {
$('.header_container').height(_height);
}
});
and here qre my HTML and CSS codes respectively.
HTML
<div class="header_container" id="header_container">
<div id="header_titles">
<h1 class="homepage-heading">Browse</h1>
<h2 class="homepage-heading-subtle">GENRES & MOODS</h2>
</div>
</div>
CSS
#header_container {
background-color: black;
width: 100%;
height: 120px;
top: 0;
left: 0;
right: 0;
}
#header_titles {
position: absolute;
width: 100%;
font-size: 35px;
text-align: center;
padding-top: 10px;
}
So, let me see if I get this...you want your header to be scrolled normally with the page until a certain point where it becomes fixed?
EDIT
Ok, well, you could determine the element on the page that you want the position to be triggered at. Like, the top of a certain paragraph, and use that position in your condition.
var condition = $(element).offset().top;
if($(window).scrollTop > condition) { //add a fixedClassName } else { remove the fixedClassName }
and have header.fixedClassName have those proprieties ( with position fix, top 0 and width: 100% to your header etc). Be sure to add and remove a class on the body that gives it padding-top with the height of your displaced header.
Used some similar effect here http://goodmen.se/ after a point the logo shows up in the header, then there's a background change. You do something similar with your position.
EDIT 2
Here's an example fiddle http://jsfiddle.net/Corsico/vpskd8hd/
So you want a sticky header?
In your javascript create a code:
var $header_container = $('#header_container');
var header_height = $header_container.outerHeight(true);
if($(window).scrollTop() < header_height){
$header_container.removeClass('sticky');
} else{
$header_container.addClass('sticky');
}
$(window).on('scroll', function(){
if($(window).scrollTop()< header_height){
$header_container.removeClass('sticky');
} else{
$header_container.addClass('sticky');
}
});
This will add a sticky class to your header, and then you can set the header to be fixed:
.sticky{
position:fixed;
top:0;
left:0;
width:100%;
display:block;
}
This should do it. When you scroll pass the height of the header, you'll get the 'sticky' class, if not, you'll remove the sticky class...
please see this site in firefox:
http://www.imageworkz.asia/microtel
the footer does not stick at the bottom of the page like how it is with stackoverflow's footer. I tried several techniques as shown in some reference sites but still, no luck.
I need some css experts out there to help me out with this. Thank you!
There are mare ways to make sticky footers. A basic trick for a footer with fixed height
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px; /* the bottom margin is the negative value of the footer's height */
}
.footer {
height: 150px; /* .push must be the same height as .footer */
}
or
you can check this post (and many others) with the title "sticky footer"
add position:fixed; bottom:0; left:0 to footer and it will fix it in place. If you then add #container {padding-bottom:120px} (or something around that amount) your content won't be hidden by the footer when viewing the bottom of the page
Make it fixed position with bottom 0 value:
footer {
position: fixed;
bottom: 0;
}
<script type="text/javascript">
$(document).ready(function() {
var docHeight = $(window).height();
var footerHeight = $('#footer').height();
var footerTop = $('#footer').position().top + footerHeight;
if (footerTop < docHeight) {
$('#footer').css('margin-top', 10 + (docHeight - footerTop) + 'px');
}
});
</script>