We Keep Coding

How to make float navbars with JS and CSS?

How can I make my lower navbar to stay in the top when I scrolling down? I mean I want to hide only upper navbar? The lower navbar should take place of upper nav.
I tried to affix function:
$('.navbar-lower').affix({
offset: {top: 50}
});
But my code doesn't work.
Here is my try on jsFiddle: http://jsfiddle.net/hw3gxhhf
How can I fix it?
PS
Also I use jquery.bootstrap-autohidingnavbar.min.js
$("div.navbar-fixed-top").autoHidingNavbar({
"showOnBottom": false,
"showOnUpscroll": false
});

You can always listen for the scroll event, and check the scrollTop value. Once you've reached the 50px threshold, you change the margin-top value:
window.addEventListener('scroll', function(){
if (document.body.scrollTop >= 50) {
$('.navbar-lower').css('margin-top','0px');
} else {
$('.navbar-lower').css('margin-top','50px');
}
})

Try using the .scroll function to addClass of position:fixed;
and z-index:10;
script-
$(window).scroll(function () {
var scrolled = $(window).scrollTop();
var elemTop = $('#move').offset().top;
if (scrolled >= elemTop) {
$('body').addClass('nav-is-fixed');
}
else {
$('body').removeClass('nav-is-fixed');
}
});
css-
.nav-is-fixed #move {
position: fixed;
top: 0;
z-index:10;
}

scrollTop suddenly not working for sticky menu

I had this working with no problems for the entire build of the site. Then, the day I was supposed to launch, the sticky menu stopped working right. The menu is supposed to start at the bottom, scroll to the top, then stick (position: fixed).
Now, it scrolls about 10px and then jumps to the top. Why is the scrollTop distance not calculating correctly?
Live site at [site no longer exists]
Here's the code for the sticky menu. I'm also using JS to set min-height of divs to window height, but haven't included that code here.
$(function(){
var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyRibbonTop ) {
$('#wrapper-wcf53badf7ebadf7').css({position: 'fixed', top: '0px', 'background-image':'url(http://amarshall.360zen.com/wp-content/uploads/2014/07/menu-fade-background2.png)'});
$('#block-bcf53bf14093931c').css({display: 'block'});
} else {
$('#wrapper-wcf53badf7ebadf7').css({position: 'static', top: '0px','background-image':'none'});
$('#block-bcf53bf14093931c').css({display: 'none'});
}
});
});
Thanks in advance for any help! I'm not a JS or jQuery expert yet, so any suggestions for cleaning things up would be appreciated.
NOTE: The site is built on WordPress, so no-conflict mode is in effect.

I think you are initialising the sticky menu function before you set the min-height of $('big-div').
On page load, the menu starts at 54px from the top, and so when you store the offset().top value as stickyRibbonTop, it is stored at 54px. Then on your scroll event you are comparing against this.
Try setting the min-height of the divs first in your code, then run this same script afterwards. The value of stickyRibbonTop should then be correct.
Bear in mind that you will need to reset stickyRibbonTop every time the window.height() is updated, so you should probably make this sticky menu function a named function and call it at the end of the wrapper_height function. something like this:
function stickyNav() {
var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;
$(window).unbind('scroll', scrollEvent);
$(window).on('scroll', stickyRibbonTop, scrollEvent);
};
function scrollEvent(event) {
var stickyRibbonTop = event.data;
if ($(window).scrollTop() > stickyRibbonTop) {
$('#wrapper-wcf53badf7ebadf7').css({ position: 'fixed', top: '0px', 'background-image': 'url(http://www.adammarshalltherapy.com/wp-content/uploads/2014/07/menu-fade-background2.png)' });
$('#block-bcf53bf14093931c').css({ display: 'block' });
}
else {
$('#wrapper-wcf53badf7ebadf7').css({ position: 'static', top: '0px', 'background-image': 'none' });
$('#block-bcf53bf14093931c').css({ display: 'none' });
}
};
function wrapper_height() {
var height = $(window).height();
var wrapperheight = height - 75;
wrapperheight = parseInt(wrapperheight) + 'px';
$(".bigDiv").css('min-height', wrapperheight);
$("#wrapper-wcf53bad125d7d9a").css('height', wrapperheight);
stickyNav();
}
$(function () {
wrapper_height();
$(window).bind('resize', wrapper_height);
});

$(window).scroll() not working in IE 9

I have a nav bar and a side bar that is displayed on the bottom on my page when its loaded. But as you scroll down it should add certain css to change the position of them. But seems this is not working only in IE. Can anyone tell me how to fix this in IE?
This is my code:
// SCRIPT FOR STICKY SIDEBAR AND NAV
$(function() {
var stickyRibbonTop = $('#second').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyRibbonTop ) {//background: rgba(999,999,999,0.7);height: 80px;width: 100%80
$('#stickyribbon').css({position: 'fixed', top: '0px',maxHeight:'50px',width:'100%',zIndex: '123'});
$('#sidebar').css({position: 'fixed', bottom: '26%',zIndex: '13'});
} else {
$('#stickyribbon').css({position: 'static', top: '0px'});
$('#sidebar').css({position: 'absolute', bottom: '-75%'});
}
});
});
UPDATE:
as I see now, when I log the value of $(window).scrollTop() its always 0 - zero

Try $(document).scroll instead

Menu bar fixed at top of the page when scrolling is causing content underneath to jump during scroll

I'm trying to have a submenu stay at the top of the page while scrolling once it reaches the top during scrolling. Here is what I have so far:
$(window).scroll(function () {
if ($(window).scrollTop() > 175) {
$('#location_menu').css('position', 'fixed').css('top','0px').css('z-index','1000');
$('.first').css('padding-top','415');}
else {
$('#location_menu').css('position', 'relative').css('z-index','1');
}});
The issue I'm having is that the scroll is not smooth and once the element changes from position:relative to position:fixed the content seems to jump/skip up about 415px which is the same height as the submenu.
Here is the css:
<div id="location_menu" >submenu content
</div>
<div id="content" class="location_detail first">content beneath submenu
</div>
I've added the line for .first to have a padding-top of 415px when the page is crolling and reaches within 175px of the top of the page .css('padding-top','415') this doesn't actually seem to be doing anything though. There is no change, so I assume I have executed it incorrectly.
Should I use a different scrolling function then I have listed above?
Here is what I ended up using to fix my problem, based off the code from #Danko :
$(window).scroll(function () {
var $conten = $('.first'),
$menu = $('#location_menu')
scrollpos = $(window).scrollTop();
if (scrollpos >= 175) {
$conten.css('padding-top','365px');
$menu.css('position', 'fixed').css('top','0px').css('z-index','1000');
} else {
$conten.css('padding-top','0');
$menu.css('position', 'fixed').css('position', 'relative').css('z-index','1');
}
});

Edit
Ok now that i understand the question, i did this demo http://codepen.io/anon/pen/BdkLf.
The function in fact is this:
$(window).scroll(function () {
var $menu = $('#location_menu'),
$conten = $('#content'),
scrollpos = $(window).scrollTop();
if (scrollpos >= 175) {
$menu.css( {
"top" : "0",
"position": "fixed",
});
$conten.css('top','375px' );
} else {
$menu.css( {
"position": "relative",
"top" : "175px",
});
$conten.css('top','175px');
}
});
Here 175 is equals to the initial distance from the top and 375 is the addition between the distance and the height of your menu

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