We Keep Coding

Position Fixed div leaving normal document flow

I am trying to create a sticky sidebar as follows, the sidebar's height is greater than that of the viewport.
This is the page structure:
<div class="wrapper">
<div class="content__left"> </div>
<div class="sticky"> </div>
<div>
There is a fixed mainmenu at the top of height 54px that scrolls along with the page. I have written this code which works perfectly but the problem is that when the class "fixed-top" and "fixed-bottom" are applied it changes the width of the sidebar and moves it out of the normal document flow. Even when I change the width back to normal it still moves out of the normal flow due to which the result is not smooth. I have tried making changes to margin, translating it but none of it seems to work, I would really appreciate some help here.
Here is the code :
.stop-top{
position:static;
top:0px;
bottom:auto;
}
.fixed-top{
position:fixed;
top:54px;
bottom:auto;
}
.fixed-bottom{
position:fixed;
top:auto;
bottom:0px;
}
.stop-bottom{
position:relative;
bottom:auto;
}
.hang{
position:relative;
bottom:auto;
}
.
// Sidebar div
var stickySidebar = $('.sticky');
var stickyHeight = stickySidebar.height();
var stickyOffsetLeft = $('.sticky').offset().left;
var originalOffset = stickySidebar.offset().top + $('.main-menu').height();
// content__left div
var contentLeft = $('.content__left');
var contentLeftTop = contentLeft.offset().top;
// Floating menu
var mainmenu = $('.main-menu');
var mainmenuHeight = mainmenu.height();
var lastScrollTop = 0;
var onScroll = function () {
var sidebarTop = stickySidebar.offset().top;
var scrollTop = $(window).scrollTop();
var stopPosition;
//triggered on scrolling down
if (scrollTop > lastScrollTop){
// Bottom Position of the viewport
var ViewportBottom = $(window).scrollTop() + $(window).height();
// if class "fixed-top" is found while scrolling down, remove it and add "hang"
if(stickySidebar.hasClass("fixed-top")){
stickySidebar.removeAttr( 'style' );
var newTop = stickySidebar.offset().top;
stickySidebar.removeClass("fixed-top");
stickySidebar.addClass("hang");
// Calculate 'top' for hang class
stickySidebar.css('top', newTop - contentLeftTop);
}
// if bottom of the viewport crosses the bottom of the sidebar,
if(ViewportBottom > $('.sticky').offset().top + $('.sticky').height()){
// Remove any added classes and instead add class "fixed-bottom"
stickySidebar.css("top","");
stickySidebar.removeClass("hang");
stickySidebar.removeClass("stop-top");
stickySidebar.removeClass("stop-bottom");
stickySidebar.addClass("fixed-bottom");
stickySidebar.css({"width":0.3 * stickySidebar.parent().width()});
// stickySidebar.css({"width":0.3 * stickySidebar.parent().width(), "left":stickyOffsetLeft });
}
var contentLeftBottom = $('.content__left').offset().top + $('.content__left').height();
// When bottom of the viewport crosses the bottom of the 'content__left', remove class "fixed-bottom" and add "stop-bottom"
if(ViewportBottom > contentLeftBottom){
stickySidebar.css('width',"");
// stickySidebar.css('left',"");
stickySidebar.removeClass("fixed-bottom");
stickySidebar.addClass("stop-bottom");
stickySidebar.css('top', contentLeft.height() - stickyHeight);
}
}
else {// triggered on scrolling up
// if class "fixed-bottom" is found while scrolling up, remove it and add "hang"
if(stickySidebar.hasClass("fixed-bottom")){
stickySidebar.removeAttr( 'style' );
var newTop = stickySidebar.offset().top;
stickySidebar.removeClass("fixed-bottom");
stickySidebar.addClass("hang");
// Calculate 'top' for hang class
stickySidebar.css('top', newTop - contentLeftTop);
}
// When top of the viewport is less than the top of sidebar, add class "fixed-top"
if(scrollTop + mainmenuHeight < $(".sticky").offset().top){
stickySidebar.css("top","");
stickySidebar.removeClass("hang");
stickySidebar.removeClass("stop-bottom");
stickySidebar.addClass("fixed-top");
stickySidebar.css({"width":0.3 * stickySidebar.parent().width()});
// stickySidebar.css({"width":0.3 * stickySidebar.parent().width(), "left":stickyOffsetLeft});
}
// When top of the viewport is less than top of the 'content__left', add class "stop-top"
if(scrollTop + mainmenuHeight < contentLeftTop){
stickySidebar.removeClass("fixed-top");
stickySidebar.addClass("stop-top");
stickySidebar.removeAttr( 'style' );
}
}
lastScrollTop = scrollTop;
} // onScroll
$(window).on('scroll', onScroll);

Custom scroll bar flows out of screen

I'm trying to make my own scroll bar, and so far it's working fine, for this small exception.
When I reach the bottom of the page, the bar handle goes under the viewport.
Gif of what's happening:
I know it has to do with the CSS, but I'm unsure on how to set it correctly. Foundation's .off-canvas-content has a class added named .full-height, and the height property is added so that the scroll bar won't be tied to that element.
The scroll bar markup is added to div.content, which is where all the remaining content will be.
I'm trying to get the handle bar to stop at the bottom of the container, when the user has scrolled all the way of the bottom of the document, but haven't found a way to do this correctly.
CSS:
.scroll-container {
position: fixed;
right: 50px;
top: 0;
height: 100%;
width: 7.5px;
background-color: rgba(55,55,55,.3);
}
.scroll-bar {
position: relative;
top: 0;
height: 20%;
width: 100%;
background-color: #6A1B9A;
}
.full-height {
height: 100vh;
min-height: 100vh;
}
.content {
float: left;
width: 100%;
height: 100%;
display: block;
padding: 10px 20px;
overflow-y: scroll;
}
JS:
(function($) {
$.fn.scroller = function() {
var self = this,
scrollBarDrag = false,
docHeight = $(document).height();
var scrollContainer = document.createElement('div'),
scrollBar = document.createElement('div');
scrollContainer.className = 'scroll-container';
scrollBar.className = 'scroll-bar';
scrollContainer.appendChild(scrollBar);
self[0].appendChild(scrollContainer);
self.on('scroll', function() {
var top = $(this).scrollTop();
setScrollBarTop(top);
});
function setScrollBarTop (top) {
scrollBar.style.top = top + 'px';
}
};
})(jQuery);
I tried using plugins for this, but they don't simulate the scroll bar as intended (missing mouse wheel click and drag to scroll), so I decided to make my own, lightweight version of it. Any suggestions about using plugins, albeit appreciated, will be disregarded and not accepted as an answer.
With absolute positioning:

I think you forgot to account for the scrollbar's height. Lets say the scrollbar is 100px tall and your page is 500px tall, you are only able to move the scrollbar by 400px, not all 500.
Find out the difference between your scrollbar height and the document height, find the ratio of how they compare, and apply that to your new scrollbar position.
havent tested it, but something like;
var heightToWorkWith = docHeight - scrollBarHeight;
var ratio = heightToWorkWith / docHeight;
function setScrollBarTop (top) {
scrollBar.style.top = (top * ratio) + 'px';
}

Have found a solution regarding this, was quite a bit of trial and error, but managed to find it in the end. Hope it can be of use to some of you.
Edited it to a more revised version.
self.on('scroll', function() {
elHeight = self.height();
docHeight = $(document).height();
var sTop = self[0].scrollTop;
var sHeight = self[0].scrollHeight;
var sBHeight = $(scrollBar).height();
var ratio = (elHeight - $(scrollBar).height()) / elHeight;
var currentPosY = (sTop / (sHeight - docHeight)) * 100;
scrollBar.style.top = (currentPosY * ratio) + '%';
});

You can get scroll ratio by doing this:
(thumbHeight / containerHeight) + 1
containerHeight is not the scroll area height, but the actual overflow: hidden container.
When you get the scrollTop value just multiply it with your ratio. Like this:
thumbPosition.top = el.scrollTop * ratio + 'px';

Setting <div> size to be the same as window?

I'm trying to use jQuery to set the height of a div so that it takes up the entire window + the height of a header (so that you can scroll the header off the page) but no more than that. I would think the height of the div would be the height of the window + the height of the header I'm trying to hide.
When I set the div to window height, however, it creates overflow. Here's the rough code:
var $body = $("#body"),
$container = $("#container"),
$window = $(window),
$content = $("#mainContent"),
$header = $("#header"),
bodyHeight = window.innerHeight + $header.height();
$body.css("height", window.innerHeight);
$container.css("height", bodyHeight);
div {
display: block;
width: 100%;
margin: 0;
}
#body {
overflow-y: scroll;
}
#container {
overflow-y: hidden;
}
#header {
overflow: hidden;
}
#navbar {
height: 10px;
background-color: brown;
}
#mainContent {
height: 200px;
overflow-y: scroll;
}
#contentP {
height: 400px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="body">
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="navbar">
</div>
<div id="mainContent">
<p id="contentP">This is content</p>
</div>
</div>
</div>
Why is there overflow if the div is sized to fit in the window?
EDIT: So far, answers haven't helped. This is the site I'm working on. It's joomla. I want the nav bar to lock at the top of the screen.
$(document).ready(function() {
//Declare some variables
var $window = $(window),
$body = $(".body"),
$mainContent = $("#maincontent"),
headerGap = parseFloat($("#headerimg").css("margin-top")),
headerHeight = headerGap + $("#header").height() + parseFloat($("#navbar").css("margin-top")),
navbarHeight = $("#navbar").height(),
footerHeight = $("#footer").height();
//set the height of the body and the maincontent
resizePage();
//Set the listeners for resizing and scrolling
$window.resize(resizePage);
$window.scroll(scrollHandler);
//When you scroll, see if the navbar is at the top. Set maincontent overflow
//to scroll when the navbar is at the top of the window. Set it to hidden otherwise
function scrollHandler() {
if ($window.scrollTop() < headerHeight - 1) {
$mainContent.css("overflow", "hidden");
} else {
$mainContent.css("overflow", "auto");
}
}
//Set the body and the mainContent to be the correct sizes when the window size is changed. In theory, the body should be:
// windowHeight + headerHeight
// maincontent should be:
// windowHeight - (headerHeight + navbarHeight + footerHeight)
// But that doesn't quite work out.
function resizePage() {
//Deal with the changing CSS due to media queries
if ($(window).width() > 768) {
headerGap = parseFloat($("#headerimg").css("margin-top"));
headerHeight = headerGap + $("#header").height() + parseFloat($("#navbar").css("margin-top")) - 1;
$(".nav.menu.nav-pills").css("width", "92.5%");
}
else {
headerHeight = $("#header").height();
$(".nav.menu.nav-pills").css("width", $window.width());
}
//The header and navbar height change at certain sizes, so grab them again to be safe.
navbarHeight = $("#navbar").height();
footerHeight = $("#footer").height();
var windowHeight = $window.height(),
contentHeight = windowHeight - (footerHeight + navbarHeight);
//if we account for headerHeight too, maincontent is too big
resizeContent(contentHeight);
resizeBody(windowHeight);
}
//The body should take up the whole height of the window, plus the header
//and margin heights at the top. This way, you scroll to the navbar.
// But it doesn't work this way.
// -7 and -27 are from eyeballing it.
function resizeBody(windowHeight) {
if($window.width() > 728) {
$body.css("height", windowHeight - 7);
}
else {
$body.css("height", windowHeight - 27);
}
}
// The content should go from the bottom of the navbar to the bottom of the footer.
//
function resizeContent(contentHeight) {
$mainContent.css("top", (headerHeight + navbarHeight));
$mainContent.css("bottom", (0 - headerHeight));
//For the background slideshow on the Furniture page
// Again, + 5 was eyeballed
$("div.moduletable").css("height", contentHeight + 5);
if ( (contentHeight + 5) < ($(window).width()) /2 ) {
$(".wk-slideshow img").css("width", "100%");
$(".wk-slideshow img").css("height", "auto");
}
else {
$(".wk-slideshow img").css("height", contentHeight + 5);
$(".wk-slideshow img").css("width", "auto");
}
}
});
It works for a lot of sizes, but one you get to small resolutions it falls apart.
EDIT 2: I was able to get the effect I was going for by adding another div. I set the body to be the height of the window and the new div to be the size of the body + the height of the header. The body has "overflow-y: scroll". The container would have "overflow-y: hidden" (See updated snippet). This doesn't totally answer my question, but at least it helps?

I've taken a look at your code and altered it. Try this and see if this is what you're looking for.
In my example i'm looking for the element by getElementById and then I set it's style.height to window.innerHeight - 10px without taking the 10px it wouldn't show the border fully on the page. So you just remove 10px's. The example has been tested on different screen sizes.
Javascript example:
function autoResizeDiv() {
document.getElementById('body').style.height = window.innerHeight - 10 + 'px';
console.log(window.innerHeight - 10 + 'px');
}
window.onresize = autoResizeDiv;
autoResizeDiv();
#body {
display: block;
border: 5px solid black;
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="body">
</div>

The following worked for me:
$(".body").height($(window).height());

I figured out the biggest problem. I was using some absolutely positioned elements without giving a parent any other position. This made things show up wonky when I was trying to size other things. I also needed to have an extra div as a container for all the content on the page that would be the height of the window + the height of the header.
Thanks to everyone who answered, it helped!

Animate div on click

I'm trying to animate the margins of a div set by the window height and width.
Please see the fiddle.
http://jsfiddle.net/cf4zM/
The bottom and right margins animate fine on the first click, however left and top do not animate. After first click all margins animate.
Any help would be great.
$( document ).ready(function() {
$("#resizer").height(
$(window).innerHeight()
);
$("#resizer").width(
$(window).innerWidth()
);
});
var xminus = window.innerWidth/15;
var yminus = window.innerHeight/15;
function resizediv(){
var x = $("#resizer").width() - xminus;
var y = $("#resizer").height() - yminus;
var heightoffset = (window.innerHeight - $("#resizer").height())/2
var widthoffset = (window.innerWidth - $("#resizer").width())/2
$("#resizer").animate({
width : x,
height : y,
marginTop : heightoffset,
marginBottom : heightoffset,
marginLeft : widthoffset,
marginRight : widthoffset
}, 1000, function(){
});
}

Demo
It's because of the margin you are setting with jquery.
Check out margin of the div on each click through browser debugger you will find the error.
You can also set margin auto in the css assigning top, bottom, left, right position 0 in order to have absolute centering of the div and remove margin set from script.
CSS
#resizer{
background-color: white;
position: fixed;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
padding: 0;
border:1px solid #000;
}
jquery
$( document ).ready(function() {
$("#resizer").height(
$(window).innerHeight()
);
$("#resizer").width(
$(window).innerWidth()
);
});
var xminus = window.innerWidth/15;
var yminus = window.innerHeight/15;
function resizediv(){
var x = $("#resizer").width() - xminus;
var y = $("#resizer").height() - yminus;
var heightoffset = (window.innerHeight - $("#resizer").height())/2
var widthoffset = (window.innerWidth - $("#resizer").width())/2
$("#resizer").animate({
width : x,
height : y
}, 1000, function(){
});
}

You're setting the left margin to:
var widthoffset = (window.innerWidth - $("#resizer").width()) / 2
Originally, the resizer width is the same as the window's width, which means that at the first click, the offset will always be 0, which is causing the element to remain in its position.
On the other hand, width is set to:
$("#resizer").width() - xminus
which means that it will be reduced from the very first click.

How to make a div scroll when I scroll after certain point?

I would like to create a div, that is situated beneath a block of content but that once the page has been scrolled enough to contact its top boundary, becomes fixed in place and scrolls with the page. I know I've seen at least one example of this online but I cannot remember it for the life of me.
Any thoughts?

[Working demo]
var el = $("#sticky");
var win = $(window);
var width = el.width();
var height = el.height();
var win_height = $(window).height();
window.onscroll = function() {
var offset = el.offset().top + height - win_height;
if ( win.scrollTop() > offset ) {
window.onscroll = function() {
el.css({
width: width,
position: "absolute",
top: win.scrollTop() + win_height - height
});
};
}
};
If you don't need to support IE based browsers you can use:
position: "fixed"
bottom: 0