How do I put a div position: fixed; bottom: 0; until the scroll reaches the footer, then it's position: absolute; bottom: 0; of the content div.
I want the div to always stick to the bottom of the viewport, then stick to the bottom of the content div and not cover up my footer.
Bonus points for compass/sass solution!
In this fiddle (I used yours as a base, forked it though) you can see a working example of what you want, with a supposed footer height of 100px.
Here's the JS needed:
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
$('div#scrolled').css({'bottom' : '100px'});
} else {
$('div#scrolled').css({'bottom' : '0px'});
}
});
It checks, on scroll, if the scroll reached the bottom plus 100 pixels, and if so, it sets the bottom of the fixed element to 100px. The bad point is that it's not progressive, and the fixed element jumps when the footer appears. You cant just remove the 100 in the if statement if you want the footer to pop when the user reaches the absolute bottom: if ($(window).scrollTop() + $(window).height() >= $(document).height()) { ...
UPDATE:
Here is the "progressive" version of the above code.
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
var bottom = 100 - ($(document).height() - ($(window).scrollTop() + $(window).height())) + "px";
$('div#scrolled').css({'bottom' : bottom});
} else {
$('div#scrolled').css({'bottom' : '0px'});
}
});
Now, instead of changing the bottom to 100px whenever the user scroll is under 101px from the bottom, it calculates the position the fixed element should have depending on the scroll
Hope it helps!
Stick to position:fixed, and add margin-bottom:100px (when your div has a height of 100px) to your footer, so that that div doesn't cover up your footer.
An alternative (not recommended), would involve JavaScript, detecting whether scrollHeight == scrollTop + offsetHeight.
Related
I'm trying to fix the position of my dialog in Angular. I can set or update the position using the DialogRef object or the MatDialogConfig object. When I set the left position to 25px the dialog will appear 25 pixels from left. When I do not specify a position the dialog will always appear in the center. Unfortunately, I'm using a sidenav which is 250px wide. So I would like my dialog to be positioned at the center + 250px. How do I approach this problem?
const dialogConfig = new MatDialogConfig();
dialogConfig.autoFocus = true;
dialogConfig.disableClose = true;
const dialogRef = this.dialog.open(TCtor, dialogConfig);
dialogRef.updatePosition({ left: "25px" });
You can use calc, a native css function to compute the left position of your dialog box. See more details about it.
The "less gracious" point is that you need to set the width of dialog box and use it also inside the calc computation.
So I would like my dialog to be positioned at the center + 250px
2 possible interpretations :
1) The left side of dialog box should be at center + 250px
Middle of screen: 50vw (50% of viewport width)
this.dialog.open(DemoDialogComponent, {
height: '200px',
width: '400px',
position: {
left: 'calc(50vw + 250px)'
}
});
2) Dialog is centered, but with a shift of 250px at right
Dialog box width: 400px
Middle of screen: 50vw (50% of viewport width)
this.dialog.open(DemoDialogComponent, {
height: '200px',
width: '400px',
position: {
left: 'calc(50vw - 200px + 250px)'
}
});
Fiddle: http://jsfiddle.net/EzuTT/
CSS
#bottomfadebar {
position:fixed;
z-index: 2;
bottom: 0px;
width:267px;
height:84px;
background-color:#666;
}
#content{
width:2000px;
background-color:#ccc;
}
HTML
<div id="content">
This is all of the data. Theres lots of it. so the user will have to scroll horizontally. the bottom bar should go out of view as you scroll further to the right because there's so much data. the bottom bar should only stay "fixed" to the bottom, not to the left hand corner.
</div>
<div id="bottomfadebar">
THIS SHOULD SCROLL HORIZONALLY AS THE PAGE DOES
</div>
Ultimately, the #bottomfadebar div continues to stick in the bottom-left hand corner as you scroll to the right to see more of the content div. I'm trying to figure out how to allow the bottomfadebar DIV to scroll off to the left of the screen, but still fix at the bottom of the window as it's currently doing.
------EDIT!!!
Ok, so I kinda blew it on this because I thought it would be easily explained but then I realized the absolute factor would come in. It actually should reside inside of a NAV div thats centered.
http://jsfiddle.net/u5GuG/4/
It DOES need to stick to the absolute left:0 inside the "container" area....I should have specified, I apologize. Not sure how to do that.
I would use a little jQuery for that, if you don't mind ;)
$(window).scroll(function() {
$("#bottomfadebar").css("left", (-1 * $(window).scrollLeft()) + "px");
});
Fiddle: http://jsfiddle.net/inti/Gqpmf/
Update: now I think I got it, you want the #bottomfadebar to scroll along the bottom of the screen while you scroll the page.
$(window).scroll(function() {
var window_width = $(window).width(),
window_scrollleft = $(window).scrollLeft(),
content_width = $("#content").width(),
bottomfadebar_width = $("#bottomfadebar").width(),
content_path = content_width - window_width,
bottomfadebar_path = window_width - bottomfadebar_width,
bottomfadebar_left = 0;
// Equations:
// content_pos = window_scrollleft / content_path;
// bottomfadebar_pos = bottomfadebar_left / bottomfadebar_path;
// content_pos = bottomfadebar_pos;
bottomfadebar_left = window_scrollleft / content_path * bottomfadebar_path;
$("#bottomfadebar").css("left", bottomfadebar_left + "px");
});
Fiddle: http://jsfiddle.net/inti/Gqpmf/2/
Update 2: I think I still donn't get it, but if you want it to stick to the [bottom,center] screen position, then this css is a go:
#object {
position: fixed;
bottom: 0;
left: 50%;
width: 200px;
margin-left: -100px; /* half of the width in negative */
}
Fiddle: http://jsfiddle.net/inti/Gqpmf/3/
Update 3: really my last guess. If you want an item to be absolute positioned inside another element and relative to it, you have to set the container element's position to relative (or absolute).
#container {
position: realtive;
}
#object { /* inside #container */
position: absolute;
left: 0; /* will stick to the left side of #container */
bottom: 0; /* will stick to the bottom side of #container */
}
I modified the code in your Fiddle.
I moved bottomfadebar inside of content, change the height of content to 100% and changed the bottomfadebar to absolute
http://jsfiddle.net/EzuTT/1/ - Is that what you are looking for?
Just switch bottomfadebar position to 'absolute'. As you already have 'bottom:0' set it will stick to the bottom of the page. It will not remain visible when you scroll horizontally as an absolutely positioned element will default to 'left:0' unless you specify otherwise (except in older versions of IE (7 and under I think) where you may need to declare 'left:0;' to avoid odd rendering.
Instead of using fixed positioning, use absolute and set your left and bottom attributes to 0.
This will position the div at the bottom left of the page, instead of the bottom left of the browser viewport.
#bottomfadebar {
position:absolute;
z-index: 2;
left: 0;
bottom: 0;
width:267px;
height:84px;
background-color:#666;
}
Fiddle is here: http://jsfiddle.net/u5GuG/3/
I have a website like this one: >> website <<. It is built from 2 frames - main and a footer. I was trying to get it working without frames (don't work on mobile phones). Is there any simple CSS or jQuery method to stick the footer on the bottom to be visible always? so the effect is like on the website above? I was trying to use css, but the footer appears only when I scroll down to it. I want the footer to cover the actual content, so it's always for example 50pixels high and is always visible on the bottom of the screen. even if the page is 10000px high. I believe it's something simple, but I got lost somewhere there. Thank you for your help in advance
Yes. It's the position: fixed property.
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
}
Demo: http://jsfiddle.net/ZsnuZ/
(function() {
$('.footer').css('position', $(document).height() > $(window).height() ? "inherit" : "fixed");
})();
Continuing on from Sam Jones:
Basically this checks to see if the height of the document will fill the window, if it is less than the window, it will attach to the bottom of the window, if the document is larger than the window size it will attach to the bottom of the document (so it is only visible when you scroll to the bottom).
If you resize the window it will recalculate and everything should work properly!
CSS
#footer {
bottom: 0px;
}
HTML
<div id="footer">
Footer content
</div>
<script>
var footerResize = function() {
$('#footer').css('position', $("body").height() + $("#footer").innerHeight() > $(window).height() ? "inherit" : "fixed");
};
$(window).resize(footerResize).ready(footerResize);
</script>
We can even compare the heights and set the footer at the bottom using below code.
$(document).ready(function(){
if($("body").height() < $(window).innerHeight()) {
$('#footer').css('position','fixed');
$('#footer').css('bottom',0);
}
});
For me this works better, because body height includes the footer when position is static or inherit:
var footerResize = function() {
if ($('#footer').css('position') == "fixed")
$('#footer').css('position', $("body").height() + $("#footer").height() > $(window).innerHeight() ? "inherit" : "fixed");
else
$('#footer').css('position', $("body").height() > $(window).innerHeight() ? "inherit" : "fixed");
};
It stays on the bottom when growing the window now.
I want a footer in Jquery Mobile, that is not fixed, but is always at the bottom of the page.
Like this: http://ryanfait.com/sticky-footer/ (but in JQuery Mobile), not like like the standard JQuery Mobile Fixed footers.
So the footer should appear at the end of the content, or the bottom of the screen, whichever is lower.
Any ideas on how to approach this?
Edit:
The basic problem, is that I seem unable to get the div with data-role=content to actually take up the full height of the screen.
I solved this using mostly CSS. The advantages of this over the accepted answer is it will handle cases where the page size changes after the page is shown (such as browser resize, orientation change, or even more simple cases like collapsible/accordian sections). It also has much less Javascript code, and no layout math.
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
[data-role=page] {
min-height: 100%;
position: relative;
}
[data-role=content] {
padding-bottom: 40px; /* based on how tall your footer is and how much gap you want */
}
[data-role=footer] {
position: absolute;
bottom: 0;
width: 100%;
height: 40px /* this can be configurable, or omitted, as long as the above padding-bottom is at least as much as the height of the footer is */
}
The absolute footer caused jQuery Mobile page transitions to show a flickering footer (particularly the "slide" transitions), so I added this small amount of Javascript:
$(document).live( 'pagebeforechange', function() {
// hide footer
$('[data-role=footer]').hide();
});
$(document).live( 'pagechange', function() {
// show footer
$('[data-role=footer]').show();
});
Basically you just need to check the height of each data-role="content" elements to make sure that with the header/footer/content-area that the vertical space in the view-port is used.
For example:
$(document).on("pageshow", ".ui-page", function () {
var $page = $(this),
vSpace = $page.children('.ui-header').outerHeight() + $page.children('.ui-footer').outerHeight() + $page.children('.ui-content').height();
if (vSpace < $(window).height()) {
var vDiff = $(window).height() - $page.children('.ui-header').outerHeight() - $page.children('.ui-footer').outerHeight() - 30;//minus thirty for margin
$page.children('.ui-content').height(vDiff);
}
});
This code will run each time a page is navigated-to.
Here is a demo: http://jsfiddle.net/aBVtJ/1/
Check out this SO:
jQuery Mobile has a native footer that supports a fixed, or 'sticky', position. An example and documentation can be found at http://view.jquerymobile.com/1.3.1/dist/demos/widgets/fixed-toolbars/
I would like to set a position fixed and relative. I have a large div for all my content. When i set the position of div inside to relative it aligns to the left of my content div. when i change that position to fixed it aligns to my browser side. I have been told that there is no css solution, but is there any other way.
basically im trying to get the same effect as the right hand bar on this website:
http://www.nytimes.com/interactive/us/sept-11-reckoning/viewer.html
Code:
#content{
width: 1000px;
margin-right: auto;
margin-left: auto;
}
#text{
position: fixed;
}
<div id='content'>
<div id='text'>Welcome to the site</div>
</div>
The function isScrolledIntoView() used below is from another question Check if element is visible after scrolling
Explanation of Example
First off we have the function isScrolledIntoView() which simply returns true or false if an element is visible inside your browsers viewing area.
You need to use two divs or some kind of anchor point and a follow div. Your anchor div is used to determine when we should switch the follow div to a fixed style to follow on scrolling or switch back to an absolute position if the anchor is back in view to return the follow div to its original position on the page.
With your anchor point, following div, the function to check if an element is visible in the viewing area, we can make use of the jQuery .scroll() event binding method on the window to fire an event when the user scrolls on the page.
Example Script
$(window).scroll(function () {
if (! isScrolledIntoView($('#anchor')))
{
// anchor div isn't visible in view so apply new style to follow div to follow on scroll
$('#follow').css({ position: 'fixed', top: '10px' });
}
else
{
// anchor div is visible in view so apply default style back to follow div to place in default position
$('#follow').css({ position: 'absolute', top: '100px' });
}
});
function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
Fiddle demo