We Keep Coding

Sticky Navigation Bar Jumps on Scroll (JS, HTML, CSS)

I am building this site as a fun little side project but I am stuck. My sticky nav bar jumps once the user scrolls far enough down. I have read other threads and can't quite connect the dots.
I have been thinking it must be a padding issue, however, my JS isn't all that great so there is potential for problems there as well.
Here is my Javascript:
var header = document.getElementById("header");
var navbar = document.getElementById("navbar");
var navbarHeight = navbar.offsetHeight;
var headerHeight = header.offsetHeight;
header.style.height = screen.height - navbarHeight;
function initJake() {
if (window.pageYOffset > headerHeight) {
navbar.style.position = "fixed";
navbar.style.top = "0";
} else {
navbar.style.position = "relative";
}
}
window.onscroll = function() {
initJake()
};
Here is my jsFiddle (the links are cut off since this is the full-screen HTML setup): https://jsfiddle.net/jihlenfeldt/435ugdyf/2/
I am hoping to find a way in which the transition from absolute to fixed is smooth and doesn't end up covering a bunch of lines of text.
Thank you to anyone willing to offer a bit of advice, this little issue has become quite a headache.

Is this what you mean?:
var header = document.getElementById("header");
var navbar = document.getElementById("navbar");
var content = document.querySelector('#navbar + .content');
var navbarHeight = navbar.offsetHeight;
var headerHeight = header.offsetHeight;
header.style.height = screen.height-navbarHeight;
function initJake(){
if(window.pageYOffset > headerHeight){
navbar.style.position = "fixed";
navbar.style.top = "0";
content.style.padding = '60px 0 0 0';
}
else{
navbar.style.position = "relative";
content.style.padding = '0 0 0 0';
}
}
function hamburgerMenu() {
var x = document.getElementById("submenu");
if (x.style.display == "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
window.onscroll = function() {initJake()};
The issue here is that your navbar gets position "fixed" and its height is not considered by the DOM anymore since it'll be positioned "on top" of everything. Best way to fix this is to give the element after it (the content in this case) a padding-top of the same height that navbar has. (Unlike me, use a variable that gets the height of the navbar since its height can vary, not a fixed number like I did (the 60px))

Well here's your mistake.
if (window.pageYOffset > headerHeight) {
navbar.style.position = "fixed";
navbar.style.top = "0";
} else {
navbar.style.position = "relative"; // here
}
Your navbar has position absolute and when window.pageYOffset > headerHeight is false, you are making it relative
#navbar {
position: absolute;
bottom: 0;
width: 100%;
background-color: #111;
z-index: 3;
overflow: hidden;
height: 20%;
padding-bottom: 3%;
display: flex;
flex-direction: column;
transition-property: width;
}
That's why the bump. Also, the navbar is fixed now, so It doesn't disturbs other elements. That's why the this div is covered by the navbar (or is going upwards)
<div class="content">
<h1>text here</h1>
<p>text here text here text here text here text here text here text here text here text here text here text here text here </p>
</div>
Possible fix is we stick to one position. Let's make it relative. Then we add margin top to the content div when the position is fixed. Which makes it some distance from above. So javascript becomes becomes
var content = document.getElementsByClassName("content")[0];
if (window.pageYOffset > headerHeight) {
navbar.style.position = "fixed";
navbar.style.top = "0";
content.style.marginTop = " 115px";
} else {
navbar.style.position = "relative";
content.style.marginTop = "0px";
}
And stick to relative in css
#navbar {
position: relative;
...
}
So your fiddle becomes something like this

Why do you guys use always JS to interact with the appearance of a HTML object.
Use JS to check if the header is outside of the viewport and if yes, set a class on the body. Via CSS you can modify the sticky header.
Something like this:
$(window).scroll(function(){
if($(this).scrollTop() > $('#header').outerHeight()){
$('body').addClass('scrolled');
} else {
$('body').removeClass('scrolled');
}
});
And via CSS
#header { position:relative; }
body.scrolled #header { position:fixed; top:0; left:0; width:100%; }
body.scrolled { padding-top:<Enter here Height of Header to prevent jumping> }

whay can't I change both image height and width at same time with javascript?

I have an image in a div and I want the image to stay centered at all times.
If the width of the image is wider than the screen, then I want the image to expand to the width of the view port. And if the image is shorter than the height of the view port then I want it to expand to the height of the view port.
In my code, when I expand the width, the height expands automatically, which is great since I don't have to calculate it. The height does the same thing. When the height is expanded, the width stays proportional.
However, if the width changes in such a way that the height is now smaller than then view port, then I need to check the height and bring it back up to the view port height (which should expand the width again but it doesn't). When I have to change both height and width at the same time, the automatic proportioning doesn't work. If I do one or the other, it does work.
How can I accomplish this so they can both be changed and work without distorting the image?
my code:
inner_width = $(window).innerWidth();
inner_height = $(window).innerHeight();
if (inner_width < original_pic_width ) {
$(pic).css({'width': original_pic_width});
}
else {
$(pic).css({'width' : inner_width });
}
if (inner_height < original_pic_height){
$(pic).css({'height': original_pic_height});
}
else {
$(pic).css({'height' : inner_height });
}

CSS contain is pretty nice.
$("div").css({
backgroundImage: "url(" + $("img").prop('src') + ")",
backgroundSize:"contain",
backgroundRepeat: "no-repeat"
});
div { width:200px; height:200px; border:1px solid red;}
div img { display:none }
<div>
<img src="http://www.somebodymarketing.com/wp-content/uploads/2013/05/Stock-Dock-House.jpg"/>
</div>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"
integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo="
crossorigin="anonymous"></script>

Here is a possible solution (not sure to understand clearly what you want though). Note that I'm not absolutely sure that the centering method is cross-browser.
var div = $("div");
var img = $("img");
var imgw = img.width();
var imgh = img.height();
var imgr = imgw / imgh;
var sizes = [300, 120];
var i = 0;
setInterval(function () {
div.width(sizes[i]);
i = (i + 1) % 2;
adjust();
}, 1000);
function adjust () {
var divw = div.width();
var divh = div.height();
var divr = divw / divh;
if (divr < imgr) {
img.width("100%");
img.height("auto");
} else {
img.width("auto");
img.height("100%");
}
}
div {
position: relative;
}
img {
display: block;
position: absolute;
top: 0; bottom: 0;
right: 0; left: 0;
margin: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:120px;height:120px;border:10px solid #5900CC;">
<img style="width:100%;" src="http://i.stack.imgur.com/jKXi2.jpg" />
</div>

If you set both height and width... both dimensions, height and width will be set.
It should be enough to set just one dimension if you set the width=viewport's width if it's horizontal (width>height) or the height=viewport's height if it's vertical.

Find which dimension you have to change and change that one only. You can do that by checking the difference between the image's width and the window's innderWidth, and the difference between the image's height and the window's innerHeight. Whichever difference is greater is the one you need to change only. That should take care of the other dimension without having to resize both.

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

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

Elements positioned at the bottom & cut-off from bottom

I have three blocks, I want them positioned at the bottom always, regardless of the viewport height, and when there's not enough height to show all of it, I want them to hide from the bottom, NOT the top.
I tired a flexbox solution: http://jsbin.com/kutipequxe/1/edit?css,output
.. it almost works, except on low resolutions, the blocks hide from top, bottom remains visible.
I also tried another solution: http://jsbin.com/ruhigijeba/1/edit?css,output
.. well this keeps the top always visible, but just hides the bottom altogether, including the other two blocks.
I even tried a JS solution:
var vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var topHeight = document.getElementById('top').offsetHeight;
console.log('Viewport Height: ' + vh);
function getHeight(element) {
console.log(document.getElementsByClassName(element));
var offsetHeight = document.getElementsByClassName(element)[0].offsetHeight;
console.log('offsetHeight: ' + offsetHeight);
var marginTop = vh - (topHeight + offsetHeight);
console.log('marginTop: ' + marginTop);
document.getElementsByClassName(element)[0].style.marginTop = marginTop + "px";
}
getHeight("card-1");
getHeight("card-2");
getHeight("card-3");
... but it still hides the blocks from top!

try it with CSS media queries:
At the end of your CSS just add
#media screen and (max-height: 120px) {
div#top {
display: none;
height: 0px;
}
#main {
height: 100vh;
}
}
[edit] appearently thats not what oyu were asking for.
so... in your second jsbin example, add this to your .cards class:
position: sticky;
bottom: 0;
and to your #cards id:
overflow: hidden;
http://jsbin.com/zijedofija/1/
it does not work on chrome 35+ though: Why doesn't position: sticky work in Chrome?
my best bet would be to use a jquery plugin for chrome: https://github.com/filamentgroup/fixed-sticky

Ended up using Javascript and CSS media queries to achieve the desired results:
var vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var topHeight = document.getElementById('top').offsetHeight;
function getHeight(element) {
var elementHeight = document.getElementsByClassName(element)[0].offsetHeight;
var offsetTop = vh - (topHeight + elementHeight);
var cardsContainerHeight = document.getElementById('cards').offsetHeight;
if (elementHeight < cardsContainerHeight) {
document.getElementsByClassName(element)[0].style.top = offsetTop + "px";
}
}
var resize = function(event) {
getHeight("card");
}();