Develop Reference

Can't get fixed div to stop above the footer, what am I missing?

I have a side bar div that is fixed until a certain scroll/page height and then it becomes position:absolute.
My problem is that, when it loads in, it's at the right position and height, until I scroll and then it moves (partly due to the jQuery function). When it moves however, it makes it so it doesn't stop at the footer, but instead continues past it.
I am building this on a COS so I can't exactly recreate the problem in JSFiddle, but I can link you to the page.
CSS
/*fixed/absolute div*/
.widget-type-post_listing{
right:0;
width:50px;
position:absolute;
display;block;
background:yellow;
height:50px;
}
jQuery
$(function(){
var container = $('.widget-type-post_listing');
var minTop = $('.header-container-wrapper').outerHeight();
var maxTop = $('.footer-container-wrapper').offset().top - container.outerHeight();
$(document).scroll(function() {
container.css('top', Math.min( Math.max(minTop, $(document).scrollTop()), maxTop ));
});
});
Here is the JS Fiddle showing a working example: JSFiddle. You can see that the yellow box (fixed/abso.div) will stick on page until scrolling to footer.
As I said above, to see the exact problem, visit the working page: Working Page
Thanks for the help everyone!

You can add a div in between footer and header surrounding the yellow div 100% width position relative and then fix the max-height of that div and set it's display to inline-flex or inline-block. I think that should so the job.
Cover-div{
width: 100%;
display: inline-flex;
position: relative;
}

Jquery slideToggle to slide a div from the top of the screen - but top of screen changes during scroll and div is not visible

I am using Jquery slideToggle to slide a div from the top of the page. The effect is working, and can be seen here (PLEASE HOVER OVER THE MEMBER LOGIN NAV BUTTON TO SEE EFFECT, the blue div will slide down):
My issue is, that when the page is scrolled downwards, the div is still sliding down from the very top of the document, not the top of the viewport window, so it is not visible. If you scroll down the page, and hover over member log in button on the right, you will see the problem (main nav moves down, but the hidden blue div is no longer visible).
I am wondering how I can recalculate where the top is, and tell slidetoggle to slide the blue down from there.
This may be helpful, the code I am using to affix the regular nav to the top of the page is the following:
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});

Looks like you'll have to change your script around a bit, but the way I'd go about this is to wrap all your nav elements (the login form and the nav bar) in a div and give that div
position: fixed;
That way your nav will be fixed at the top of the window and the login form will remain at the top of the screen regardless of scrolling.
Like this:
HTML:
<div id="nav-section-wrapper">
<div id="login">...</div>
<div id="nav-wrapper>...</div>
</div>
CSS:
#nav-section-wrapper {
position: fixed;
top: 0;
z-index: 1;
}

Hide default browser scroll bar without overflow:hidden when using Perfect Scrollbar

I'm using "perfect scroll bar" on my web page. To hide the default browser scroll bars it adds "overflow:hidden". (http://noraesae.github.io/perfect-scrollbar/)
I'm also using Jquery Sortable in the scrollable section. (http://jqueryui.com/sortable/)
The overflow hidden needed for perfect scroll is a barrier for sortable. When I drag a div it won't scroll down as needed because overflow is hidden. ( But when you scroll with the mouse wheel it will scroll ).
When I removed overflow:hidden the default scrollbar AND the perfect scroll bar shows. (Both of them work as expected)
So, how do I visually hide the scrollbar so that the overflow is not hidden but only the scrollbar is just not visible.

You can enclose your entire page inside a div whose height and width are equal to that of the window and then apply the perfect scroll bar on that div.
HTML:
<div class="body">
<!-- page content -->
</div>
JS
$(".body").css({
"width": $(window).width() + "px",
"height": $(window).height() + "px"
});

The short answer here, is that without using overflow: hidden you're not going to be able to hide the scrollbars.
While webkit browsers do support ::-webkit-scrollbar, ::-webkit-scrollbar-button, ::-webkit-scrollbar-track, ::-webkit-scrollbar-track-piece, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-corner and ::-webkit-resizer in your CSS, targeting other browsers will be difficult.
A possible "hack" could be wrapping your content in a div with the same size as the window, applying PerfectScrollbars to said div, and placing your jQuery Sortable content inside a child div.

You can try this
HTML
<body>
<div id="scroll">
//Your all content
</div>
</body>
CSS
body{
overflow: hidden;
}
#scroll{
position: relative;
margin: 0px auto;
padding: 0px;
width: auto;
height: auto;
}
JS
$(window).resize(function(){
$("#scroll").css({
"width": $(window).width() + "px",
"height": $(window).height() + "px"
});
});
const ps = new PerfectScrollbar('#scroll', {
wheelSpeed: 2,
wheelPropagation: true,
minScrollbarLength: 20
});
ps.update();

Bootstrap v2.3.3 Navbar gets overlapped by Collapse content

I am having an issue on my site where I have a bootstrap (version 2.3.2) navbar fixed to the top of the page and then later in the body I have a bootstrap collapse object with a large amount of content in <pre><code> tags. The collapse opens and closes as expected; however, when I scroll down the page, the content in the <pre><code> tags overlaps the navbar at the top of the page. I have attempted to add z-index's to both the navbar and the collapse content; however, it doesn't seem to be working.
Below are the jsfiddle links. The offending overlapping content is at the end of the page. Thanks!
My code: http://jsfiddle.net/K3JAe/3/
Full Screen Result: http://jsfiddle.net/K3JAe/3/embedded/result/

The .collapse class has position: relative, making it a positioned element, and your navbar has position: fixed from the Affix plugin, making it also positioned. The accordion comes later in the DOM, which makes it stack on the navbar.
#Adrift's fix is the way to go: the affixed element at the top of the page needs a z-index to stack on any later positioned elements. I would go higher than 2 though for your future z-indexing uses:
/* Stack .affix on top of positioned elements later in the DOM */
.affix {
position: fixed;
z-index: 100;
}

Adding a z-index value to the .affix class above 1 seems to do the trick:
.affix {
position: fixed;
z-index: 2;
}
http://jsfiddle.net/K3JAe/5/

Make footer height extend to bottom of the page

I have a very simple webpage with a problem. It ahs 3 divs that sit ontop of each other, the header, content then footer.
I want my footers height to expand to the bottom of the page. How can I do this?
The header has a constant height, the content will vary in height depending on the content received from an AJAX call. So I cant explicitly set it.
Heres my JSFiddle: http://jsfiddle.net/5U6ZB/2/embedded/result/
<div id="header"></div>
<div id="content">
<!-- height is dynamic sometimes it will be full of divs that makes it
longer than the screen height other times it only has 1 div -->
</div>
<div id="footer">
<!-- How do I make the footer height fill up the rest of the page height? -->
</div>
body { background-color: white; }
div { width: 100%; }
#header {
height: 400px;
background-color: RGB(200,200,200);
}
#content {
}
#footer {
background-color: RGB(112,112,112);
/*How do I make the footer height fill up the rest of the page height?*/
}

html {
background-color:#093; /*the footer color*/
}
body {
background-color: #f6f; /*the body color*/
}

Sounds like the easiest solution in your case would be to make the body background the same colour as the footer and make your content white. This would give the illusion of the footer going all the way to the bottom.
body { background-color:RGB(112,112,112); }
div { width: 100%; } /* Divs are block elements which automatically take 100% width so this is redundant. */
#header {
height: 400px;
background-color: RGB(200,200,200);
}
#content {
background-color:white;
}
#footer {
background-color: RGB(112,112,112);
}

:root {
background-color: siteBackgroundColor;
}
body {
background-color: footerColor;
}
This doesn't really expand the footer, but visually expands its background color.

A similar approach to fayerth's, this will adjust height dynamically when the browser is resized (and is based on jQuery).
Instead of resizing the footer directly, I added the additional empty element <div class="flex-footer"> and resized that instead. My thought is that it should give a less jittery effect if the footer contains a bunch of elements as well as not fussing with any children of the footer that are sized relative to the parent.
Your CSS should then apply whatever background color necessary.
Note my comment about negative margins. This was necessary in my case since the design required the use of negative margins. I've included that bit in case yours does as well.
$(function(){
$(window).load(resizeFooter);
$(window).resize(resizeFooter);
});
// Dynamically resize footer to fill page, IE8 doesn't like this.
function resizeFooter() {
var windowHeight = window.innerHeight;
var headerHeight = $("header").height();
var contentHeight = $("div.main").height();
var footerHeight = $("footer").height();
// 107 references a negative margin in header - you'll need to account for this if necessary
var flexFooter = windowHeight - (headerHeight + contentHeight + footerHeight - 107);
$(".flex-footer").css("min-height", flexFooter);
}

In pure CSS, it's not possible, but if you want to use some fancy Javascript, you can dynamically change the height of the footer to stretch the remaining height, assuming the content doesn't already do it for you.
var header = document.getElementById("header"),
content = document.getElementById("content"),
footer = document.getElementById("footer"),
height = window.screen.height - header.clientHeight - content.clientHeight;
footer.clientHeight = (height < 150) ? 150 : height; // Sets a minimum height of 150px
It's usually better to follow SynXsiS's suggestion though, as it tends to give a nicer appearance. In the end, it really depends on the way you design the look and feel of your page.

very simple, and works for me :)
footer{ position:absolute; width:100%; top: (read below); }
you can try with diferent percents values in top property, when the footer take the desired place in your screen, that percent will apply to all resolutions :)

I am tweaking a wordpress theme - and have the same problem. But - if I implement a sticky footer, it actually partially scrolls away with the content. Wordpress is a mess so I'm not sure why it's doing this - but what I need is to let the footer sit below the main content, but THEN fill the rest of the screen so it doesn't look silly on shorter pages.
Any ideas of an easy CSS fix other than the color trick? (which I may do ;)
Claudia