We Keep Coding

javascript issue with fixed position side menu

I'm building a website with a sidebar that, once the user scrolls past a certain point it becomes fixed on the site. This code works fine.
The issue that I am coming into is that the sidebar is overlapping the footer when the user scrolls to the bottom of the page. I wrote code to detect when the bottom of the sidebar hits the same position as it's containing element - when that happens I am taking the position of the bottom of the containing element and subtract the height of the sidebar element and using that number to give the sidebar it's new "top" (while also changing the position to "absolute").
This is where I am running into the issue - once the sidebar is overtop of the footer as the user scrolls the code that is getting called alternates between the normal "fixed" position code and the "absolute" positioned code giving it this flickering effect.
For the life of me I can't figure out why the "fixed" code keeps getting called.
Here is the code:
( function( $ ) {
var sidebar_pos = $('#secondary')[0].getBoundingClientRect();
var pos_top = sidebar_pos.top + window.scrollY; //need this to get the pos of TOP in the browser - NOT the viewport
var main_pos = $('.main-content')[0].getBoundingClientRect();
var main_bottom = main_pos.bottom + window.scrollY;
var stop_pos;
var i = 0;
$(window).scroll(function(event){
var scroll = $(window).scrollTop();
var produce_pos = $('.produce')[0].getBoundingClientRect();
var pos_bottom = produce_pos.bottom + window.scrollY;
//console.log("scroll "+scroll);
//console.log("top " + pos_top);
console.log(main_bottom);
console.log('bottom ' + pos_bottom);
if( scroll >= pos_top){
if ( pos_bottom >= main_bottom ){
//if the sidebar would end up overlapping the footer
if(i == 0){
//only need to set this once, not on every scroll
stop_pos = main_bottom - $('#secondary').height() ;
}
$('#secondary').removeClass('hover').css({
position: 'absolute',
margin:0,
left: sidebar_pos.left,
top: stop_pos
});
i++;
} else {
$('#secondary').addClass('hover').css({
position: 'fixed',
left: sidebar_pos.left,
marginTop: '1.5em',
top: 20
});
setTimeout(() => {
$('*[data-widget="comet"]').addClass('active');
}, 5000);
setTimeout(() => {
$('*[data-widget="produce"]').addClass('active');
}, 7000);
}
} else if( scroll < pos_top && $('#secondary').hasClass('hover') ){ //if user scrolls up past original pos of sidebar, remove effects
$('#secondary').removeClass('hover').css({
position: 'relative',
left: 'auto',
top: 'auto'
});
i = 0;
}
});
}( jQuery ) );
I also have a codepen of the script in action.
https://codepen.io/antlaur00/pen/ExyrgYR
Any help is much appreciated! Thanks!

Well its pretty simple, just add Z-index property to your footer CSS, that way it will always overlap your sidebar .
You can refer to this article regarding the z-index property
https://www.w3schools.com/cssref/pr_pos_z-index.asp

Change position of div based on content & viewport height using jquery

I want to have a div be fixed at the bottom of the window when the window is taller than the content height. If the content height is taller than the window height, I want the div position to remain relative.
I currently have this mostly working, however I don't want the div to overlap the content at all. I tried various forms of below, but still not working:
var body = content+bottomBar
if (body > viewport) {
$(".bottom-bar").css({
'position':'relative'
});
} else {
$(".bottom-bar").css({
'position': 'fixed'
})
}
I also am having trouble getting the window.resize to work.
Any help would be appreciated!
http://jsfiddle.net/no05x1vx/1/

Referring to the jsfiddle linked by the OP, here are a few changes to make the code work as expected, please see the comments:
var content = $(".content").height()
var viewport = $(window).height();
// Use innerHeight here as the bottom-bar div has height 0 and padding 60px
// .height() would return 0
var bottomBar = $(".bottom-bar").innerHeight();
var body = parseInt(content)+parseInt(bottomBar)
$(window).on('resize', function(){
// Get new viewport height
viewport = $(window).height();
if (content > (viewport-bottomBar) ) {
$(".bottom-bar").css({
'position':'relative'
});
} else {
$(".bottom-bar").css({
'position': 'fixed'
})
}
});
// Trigger resize after page load (to avoid repeated code)
$(document).ready(function(){
$(window).resize();
});

Sticky Navigation and jQuery

Having a bit of a problem. Looking to build a sticky nav, and when the sticky nav triggers, adding the 'is-sticky' class, i'd like to add a different class to another div.
Below is the code..
Thanks
<script>
$(document).ready(function(){
if ( $(".sticky-wrapper").hasClass("is-sticky") ) {
$("#menu-item-25").css({display: "inline"});
}
});
</script>

There's a lot going on here that I'm not sure about, but:
You need an event listener that leads to code that adds/removes the classes/css that you want. What you have now is an event listener, but it's listening for the document ready state, not a scroll that triggers a sticky nav. So:
<script>
$(document).ready(function(){
//add a listener for something that would indicate a sticky-state change, presumably scrolling
$(document).on('scroll', function() {
checkForStickyNav();
});
function checkForStickyNav() {
//look for sticky nav, and prevent running over and over
if ( $(".sticky-wrapper").hasClass("is-sticky") && !$(".otherStuff").hasClass("stickyfied") {
//do your stuff here; presumably changing CSS as appropriate
//make sure to add something along the lines of 'stickyfied' above, so that you don't keep re-adding the css on every scroll event
$("#menu-item-25").css({display: "inline"});
$('.otherStuff').addClass('stickyfied');
}
</script>

To add a class you need
$("#element").addClass('myclass');
You can also remove a class with
$("#element").removeClass('myclass');
And toggle a class with
$("#element").toggleClass('myclass');
But your code is far away from a sticky nav, here is how I do it
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('nav').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('nav').css({ 'position': 'fixed', 'top': '0px', 'left': '0px', 'line-height': '30px' });
} else {
$('nav').css({ 'position': 'relative', 'top': '0px' });
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
Obviously you'll have to play around with the css

overflow-y:hidden IOS issue with inner scrolling div

I am building a responsive site that has overlays slide out from the side. The issue is on mobile these overlays need to be able to scroll but i dont want the page behind to scroll. On desktop setting overflow:hidden works to stop the page from scrolling but still allow the slide out div to scroll. However, in IOS this property is not working. The base page is still scrollable. I have created a jsbin below. Can someone tell me how to get the black div to scroll on IOS but prevent the base page from scrolling? It works fine on desktop but not on mobile.
http://jsbin.com/isayuy/4/
Thanks

You have to add this to your CSS:
html { height:100%; overflow:hidden; }
body { height:100%; overflow:hidden; }
That works for me. See here: http://jsbin.com/isayuy/10/

The solution from #Tim Wasson works for me.
As another option, I'm wondering if there's a reason why you don't apply position:fixed to the body tag when the slide-outs are visible?
http://jsbin.com/isayuy/6
Appologies if I'm missing something obvious.
Good luck!

Here's what I'm doing - this solution prevents the background from scrolling, while retaining the initial position (i.e. it doesn't jump to the top).
preventScroll : function(prevent) {
var body = $('body'), html = $('html'), scroll;
if (prevent) {
var width = body.css('width');
scroll = window.pageYOffset;
// This is all you need to do to prevent scroll on everything except iOS.
html.css({ 'overflow': 'hidden'});
// For iOS, change it to fixed positioning and make it in the same place as
// it was scrolled.
// For all systems, change max-width to width; this prevents the page getting
// wider when the scrollbar disappears.
body.css({ 'position': 'fixed', 'top': -scroll, 'max-width' : width});
} else {
scroll = -parseInt(body.css('top'));
html.css({ 'overflow': '' });
body.css({ 'position': '', 'top': '', 'max-width': '' });
window.scrollTo(0, scroll);
}
},
This will cause problems if you resize (rotate phone) while scroll is prevented; I also have a resize event which calls preventScroll(false) and then preventScroll(true) to update the position in that case.

yes. it's working.and added the following code also
if (window.location == window.parent.location &&
navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('#orderpop').attr('style',
'-webkit-overflow-scrolling: touch !important; overflow-y: scroll !important;');
}
preventScroll : function(prevent) {
var body = $('body'), html = $('html'), scroll;
if (prevent) {
var width = body.css('width');
scroll = window.pageYOffset;
// This is all you need to do to prevent scroll on everything except iOS.
html.css({ 'overflow': 'hidden'});
// For iOS, change it to fixed positioning and make it in the same place as
// it was scrolled.
// For all systems, change max-width to width; this prevents the page getting
// wider when the scrollbar disappears.
body.css({ 'position': 'fixed', 'top': -scroll, 'max-width' : width});
} else {
scroll = -parseInt(body.css('top'));
html.css({ 'overflow': '' });
body.css({ 'position': '', 'top': '', 'max-width': '' });
window.scrollTo(0, scroll);
}
}

Make a navigation bar retain position when scrolled

I know this question has been asked before, but I'm pretty sure after checking them out, that none of the navigation bars where built like this one.
I'm basically having trouble making the navigation bar "seamlessly" switch to a fixed position at the top of the screen after scrolling past its original position, then back again.
I have included the code, and an example here: http://jsfiddle.net/r2a6U/
Here is the actual function which makes the div switch to fixed position mode:
var navPos = $('#navContainer').offset().top;
$(window).scroll(function(){
var fixIT = $(this).scrollTop() >= navPos;
var setPos = fixIT ? 'fixed' : 'relative' ;
var setTop = fixIT ? '0' : '600' ;
$('#navContainer').css({position: setPos});
$('#navContainer').css({'top': setTop});
});
Any help would be much appreciated.
Cheers

You can fix your issue to remove the styles instead of setting them to relative and 600px. I suggest you add/remove a class in JavaScript which will then apply the fixed CSS though. You will end up with much nicer and cleaner JavaScript.
Also make sure you center #navContainer properly when it's fixed.
jsFiddle
CSS
#navContainer.fixIT {
position:fixed;
top:0;
/* these will ensure it is centered so it doesn't jump to the side*/
left:0;
right:0;
text-align:center;
}
JS
var navPos = $('#navContainer').offset().top;
$(window).scroll(function(){
var fixIT = $(this).scrollTop() >= navPos;
if (fixIT)
$('#navContainer').addClass('fixIT');
else
$('#navContainer').removeClass('fixIT');
});

Fix it in here: jsFiddle
Only a small script update:
var navPos = $('#navContainer').offset().top;
$(window).scroll(function(){
var navContainer = $('#navContainer');
if( $(this).scrollTop() >= navPos ) {
// make it fixed to the top
$('#navContainer').css({ 'position': 'fixed', 'top': 0 });
} else {
// restore to orignal position
$('#navContainer').css({ 'position': 'relative', 'top': 600 });
}
});