Im using Chris Coyier's Sticky Footer example to add a footer to my webpage.
It works great!
However, I am wondering how I can adjust the code so the footer sits at the bottom of the screen -- not the webpage.
So for example when it first loads rests at the footer of my screen - but when I begin to scroll down it adjusts itself and locks itself down at the bottom of the page.
How can I keep it at the bottom of my screen?
Ive tried tweaking the last 2 lines of the emample:
$(window)
.scroll(positionFooter)
.resize(positionFooter)
But not getting too far...
hope this works for you http://jsfiddle.net/8YWHn/
the css
.fixed {
position:fixed;
bottom:0px;
-webkit-backface-visibility:hidden;
}
the js
var footerHeight = 0,
footerTop = 0,
$footer = $("footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.addClass('fixed');
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
Another way to do this that works for me is simply replace the line in the javascript:
position: "static"
with:
position: "fixed"
Related
I'm creating an onepager and need my click-to-scroll script to keep a distance from the anchor section and the top of the page in exactly the size of my fixed navigation bar, to have a clean connect when a link is clicked.
I used already a second anchor with a code which looked like this:
.anchor-1 {
display: block;
position: absolute;
top: -77px;
visibility: hidden;
}
But if I use it, my script will not work as it should.
This is my click-to-scroll script with the 'nav-height' included on the sections. Links are active on the perfect position when I'm scolling by myself, but on clicking it's not moving to the perfect position.
var sections = $('section')
, nav = $('nav')
, nav_height = nav.outerHeight();
$(window).on('scroll', function () {
var cur_pos = $(this).scrollTop();
sections.each(function() {
var top = $(this).offset().top - nav_height,
bottom = top + $(this).outerHeight();
if (cur_pos >= top && cur_pos <= bottom) {
nav.find('a').removeClass('active');
sections.removeClass('active');
$(this).addClass('active');
nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
}
});
});
I need to add a nav_height to the scroll position instead of having sections scrolled all the way to the top, to have a perfect distance from the top.
This question already has an answer here:
jQuery window.scroll move div vertical in opposite direction
(1 answer)
Closed 7 years ago.
How can I reverse the scroll function of my website such that when the user scrolls up, the page will scroll down in the opposite direction?
Doing this for the entire page is going to give a very broken experience.
You'll wind up doing something like the following, where you find the height of your content, then start manually positioning it within a fixed viewport:
var $window = $(window), $container, height;
$(function() {
$container = $('#content');
// Add some content
for (var i = 0; i < 1000; ++i) {
$container.append('<h1>line ' + i + '</h1>');
}
height = $container.outerHeight();
$('body').css('height', height + 'px');
// Set up scroll handling, but also invoke once to initialize positions
$window.on('scroll', onScroll);
onScroll();
});
function onScroll() {
scrollTop = $window.scrollTop();
$container.css('top', (scrollTop - height + $window.height()) + "px");
}
#content {
position: absolute;
}
#viewport {
position: fixed;
width: 100%;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="viewport">
<div id="content">
</div>
</div>
Basically, #viewport remains fixed infront of the user, occupying the whole screen. The content scrolls backwards inside of #viewport while the HTML document scrolls normally.
Meanwhile, #content has a height of ~50,000px, which I read and apply directly to the document, so that there will be a scroll bar of the appropriate size even though #content is contained within #viewport which has a fixed height set to that of the window.
Then, on scroll, the actual content gets position so that it moves upwards by the same distance you've scrolled with scrollTop.
I'm looking to create a fixed sidebar, very similar to that (in terms of functionality) of Apple's. When you configure your mac in their store, as you scroll down the page the basket on the right is fixed positioned; perfectly.
position:fixed is relative to the viewport and not it's parent container so what kind of scripting is going on in the background to perfectly position the sidebar?
(emphasis on perfectly). http://store.apple.com/uk/buy-mac/mac-pro?product=ME253B/A&step=config#
It is done using position:sticky.
.slider-content #secondary.sticky {
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 10px;
z-index: 1;
margin-bottom: 0;
}
You can read more about it here
Found this in another post:
http ://jsfiddle.net/63cFy
( source: http://stackoverflow.com/a/19317397/3378288 )
As i see on your example page apple is doing the same thing. They're adding a class to the element when someone scrolls down and its not in the view anymore. The positioning in this case is relative to the "wrap" div container.
I've done by switching between 'fixed' and 'absolute' regarding the document's body scrollTop.
function scrollFunction() {
var scrollPos = document.body.scrollTop;
if (scrollPos > 40) {
document.getElementById("fixed-floater").style.position = "fixed";
document.getElementById("fixed-floater").style.top = "0px";
} else {
document.getElementById("fixed-floater").style.position = "absolute";
document.getElementById("fixed-floater").style.top = "40px";
}
}
window.onscroll = scrollFunction;
http://jsfiddle.net/ua4fhrzy/
I tried to avoid jquery if someone is interested.
Check out Bootstrap affix. It's also what's used in their right menu.
Right now I have it that if a user scrolls past the bottom of the side bar, then the sidebar turns to fixed and stays on the users page while they read the rest of the main content.
But now my fixed div is falling out into the footer. So, how can I stop it from falling out of the parent div and into the footer?
Here's a fiddle of what's going on: http://jsfiddle.net/95W8w/
All the code is in jsFiddle, but since SO requires I put code here if I have a jsFiddle include.
JavaScript:
$(document).ready(function() {
// Cache selectors for faster performance.
var $window = $(window),
$sidebar = $('#anchor'),
$sidebarAnchor = $('#right');
// Run this on scroll events.
$window.scroll(function() {
var window_top = $window.scrollTop();
var div_top = $sidebarAnchor.offset().top;
if (window_top > div_top) {
// Make the div sticky.
$sidebar.addClass('stick');
$sidebarAnchor.height($sidebar.height());
}
else {
// Unstick the div.
$sidebar.removeClass('stick');
$sidebarAnchor.height(0);
}
});
});
Change bottom to top in your .stick class definition to make the sidebar stick to the top instead of bottom.
.stick {position: fixed; top:0px;}
I have a page with long content on it. Together with that there is a sidebar which has less content and at the moment if you continue scrolling down, at some point there will be just whitespace in a sidebar.
So what I tried to do is once sidebar reaches end of its content, height give it fixed position, but while there are still things to scroll give it static position.
So I've got
$(window).scroll(function () {
var y = $(window).scrollTop();
var x = $(window).scrollTop() + $(window).height();
var s = $('#sidebar').height();
if (x > s) {
$('#sidebar').css({
'position': 'fixed',
'bottom': '0'
});
}
if (x < s) {
$('#sidebar').css({
'position': 'static'
});
}
});
This kinda works. It starts with static position, but when I scroll in any direction it changes to fixed. However I want it to remain static while there is something to scroll through (in upwards and downwards directions)
EDIT Basically it should work like this: http://jsfiddle.net/cJGVJ/12/ but without the shadow effect.
Give HTML and BODY height: 100%;
html, body{
height: 100%;
}
#sidebar{
position: absolute;
bottom: 0px;
}