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);

Fixed Element on scroll issue

So, I'm trying to reproduce the main scrolling effect on this beautiful portfolio: http://melaniedaveid.com/
I've followed this tutorial on Codyhouse: http://codyhouse.co/gem/fixed-background-effect/
And came up with the following Javascript function.
$(window).scroll(function(){
var scrollTop = $(window).scrollTop(),
windowHeight = $(window).height(),
contentright1 = document.getElementById('contentright1');
function checkScroll(id) {
var offset = scrollTop - $(id).offset().top;
if (offset >= 0 && offset < windowHeight) {
$(id).addClass('fixed_content');
if ((scrollTop/2) <= windowHeight) {
$(id).removeClass('fixed_content');
}
}
else {
$(id).removeClass('fixed_content');
}
};
checkScroll(contentright1);
The fidex_content class apply the following CSS:
.fixed_content {
position: fixed;
top:0; }
As you can see, my main problem is that I can't manage to remove this class when I go back to the position of the element in the first place.

Sticky navigation with full height divs

I'm using a JQuery plugin called SMINT to create sticky navigation that becomes fixed to the top of the viewport when scrolling. I'm trying to leave a space before and after the navigation at the top of the page and multiple full height divs below.
Using
* {margin: 0; padding: 0; outline: 0;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
makes the divs full height (minus the sticky nav) but botches the initial navigation. (after scrolling the navigation is fine). Removing the border-box screws up the full-height.
My attempt: https://jsfiddle.net/colintkelly/uxsg6mL8/
Live example: http://www.banditfish.com/black-fives/

You don't need any plugin for that - here is a quick and easy to understand/customize
Approach:
JSnippet demo - using your HTML without smint
var barSelector = ".subMenu",
offSetToTriggerFixed = 1,
offsettofix = $(barSelector).offset().top + offSetToTriggerFixed,
$fixedBar = $(barSelector).eq(0).clone();
//Set cloned style and append to body:
$fixedBar.css({ display:'none', position: 'fixed', top:0, 'z-index':1100});
$('body').append($fixedBar);
//Set heights:
var viewPortHeight = $('body').height(),
navHeight = $(barSelector).outerHeight(),
$anyOtherSec = $('.section').not('.sTop');
$anyOtherSec.css({ height: viewPortHeight - navHeight + 5});
//Trigger when needed:
$(window).scroll(function(){
var fromTop = $(this).scrollTop();
if (fromTop <= offsettofix) $($fixedBar).hide();
else $($fixedBar).show();
});

Get the height of a div jquery

I am trying to make a navigation, that sets the "active" class to links whenever it scrolls a specified ammount of pixels. But there is a div on the page, that get's its size based on user interaction.
This is the code for setting the active class.
$(function() {
//caches a jQuery object containing the header element
var header = $(".active");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >=760) {
header.removeClass('active').addClass("active1");
}
else { header.removeClass('active1').addClass('active');}
});
var header1 = $("#work");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 759 && scroll < 780) {
header1.removeClass('#work').addClass("active");
} else {
header1.removeClass("active").addClass('#work');
}
});
var header2 = $("#about");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 779 && scroll < 1450) {
header2.removeClass('#about').addClass("active");
} else {
header2.removeClass("active").addClass('#about');
}
});
var header3 = $("#contact");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 1449) {
header3.removeClass('#contact').addClass("active");
} else {
header3.removeClass("active").addClass('#contact');
}
});
});
How do I get the height of a div which has it's class set as auto, and then apply it in the code above ?
EDIT: I tried the $('#ID').height(); but it gets the height when the website is loaded, and it doesn't work after any user interacts with the div.

In basically get the height of the DIV
$('#ID').height();
it returns height.

I guess this is what you are looking for
Sample DEMO
if($("#ID").offset().top < $(window).scrollTop() + $(window).outerHeight())
If you create a fiddle possibly can do the same for you
Hope this helps, Thank you

Parallax on Div center vertically and positioned absolute

In a project, I have a div which take 100% height and 100% width of the window thanks to a script I've wrote (with jQuery, and called on window resize too).
Inside this div, I have an other div which contains a title(H3) and a paragraph(P). This div is centered vertically et horizontally in this 100% parent div.
Now, I want to add a parallax effect on the child div. I mean I want that on scroll, the div moves slower than his parent div. How could I achieve that ? I've tried to wrote it myself but it doesn't work...
My try :
var lastScrollTop = 0;
$(window).scroll(function(event) {
parallax();
});
function parallax() {
var ev = {
scrollTop: document.body.scrollTop || document.documentElement.scrollTop
};
ev.ratioScrolled = ev.scrollTop / (document.body.scrollHeight - document.documentElement.clientHeight);
render(ev);
}
function render(ev) {
var t = ev.scrollTop;
var obj = $('.topBonjour .wrapper');
var top = parseInt(obj.css('top'));
if (t > lastScrollTop) {
newTop = top + 1;
$('.topBonjour .wrapper').css('top', newTop +'px');
} else {
newTop = top - 1;
$('.topBonjour .wrapper').css('top', newTop +'px');
}
}
Thanks a lot,
Cédric