Develop Reference

A variation of the fixed top navbar

How do I make a nav bar that on page loading is present at, say, 50px from the top? As I scroll down, it doesn't move but when I cross it, it behaves similar to a fixed-top nav bar in Bootstrap.
It would be really helpful if you used Bootstrap.
Thanks in advance for your answers.

Use this simple jquery script:
$(window).scroll(function () {
var height = $('body').height();
var scrollTop = $(window).scrollTop();
if(scrollTop>50){
$('#navbar').css({ 'position': 'fixed', 'top' : '0', 'opacity': '0.5'});
} else {
$('#navbar').css({ 'position': 'absolute', 'top': '50px', 'opacity': '1'});
}
});
and here is the JSFiddle example

Here is a jquery script built to work with bootstrap, and that swaps in navbar-fixed-top at 50px scroll.
Example Bootply
$(window).scroll(function () {
var height = $('body').height();
var scrollTop = $(window).scrollTop();
if(scrollTop>50){
$(".navbar-default").addClass("navbar-fixed-top");
} else {
$(".navbar-default").removeClass("navbar-fixed-top");
}
});

Cannot read property 'top' of undefined issue in WP? or Gravity Forms?

A gravity forms support rep told me there was an issue with my javascript code but didn't tell me what was wrong. I looked at the screenshot provided and say an error saying:
"Uncaught TypeError: Cannot read property 'top' of undefined"
Here's the code that I'm using:
jQuery(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = jQuery('#second-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 = jQuery(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) {
jQuery('#second-nav').css({ 'left':0, 'position': 'fixed', 'top':0, 'width': '100%', 'z-index': 99999999 });
} else {
jQuery('#second-nav').css({ 'position': 'relative' });
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
jQuery(window).scroll(function() {
sticky_navigation();
});
});
I looked at some similar questions but I'm not a js fan :(
thanks for the help!
edit:
$(function() {
// grab the initial top offset of the navigation
var second-nav_offset_top = $('#second-nav').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var second-nav = 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 > second-nav_offset_top) {
$('#second-nav').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#second-nav').css({ 'position': 'relative' });
}
};
// run our function on load
second-nav();
// and run it again every time you scroll
$(window).scroll(function() {
second-nav();
});
});'

How to achieve floating div on scrolldown

I am a newbie on jquery, and I want the div to hang on top of the screen when the page scrolldown is more than 50, how can I achieve this?
I want the div to be always absolute and not fixed.
http://jsfiddle.net/8UCcY/
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$(".articlebutton").css("top", "0px"); //I want this value to change dynamically as the scrollbar moves down, so that the div stays on top of screen
} else {
$(".articlebutton").css("top", "-50px");
}
});
});

You can set it to position top -100 since it is -50 and scroll occurs after 50:
$(".articlebutton").css("top", ($(window).scrollTop()-100)+"px");

Try this:
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() <= 50) {
$(".articlebutton").css("top", $(window).scrollTop() - 50); //I want this value to change dynamically as the scrollbar moves down, so that the div stays on top of screen
} else {
$(".articlebutton").css("top", $(window).scrollTop() - 100);
}
});
});
Fiddle

DEMO
Try this
$(document).ready(function () {
var top = $(".articlebutton").css('top');
$(window).scroll(function () {
if ($(window).scrollTop() > 50) {
$(".articlebutton").animate({
"top": $(window).scrollTop() + "px"
}, 400);
} else {
$(".articlebutton").animate({
"top": top
}, 400);
}
});
});
Hope this helps,thank you

You can do something like this on that line:
$(".articlebutton").css("top", $(window).scrollTop());
Or event better, use a position: fixed; top: 0;

Why not simply set a position:fixed; for the div? That way it will always be at the top anyways. See the css below
.articlebutton div
{
position:fixed;
top:0;
}

make the property of div as
div{
position : fixed;
top : 0px;
}
it will make you div always stay on top.. no matter how much you scroll the page

The following code is taken from https://deltafrog.com/create-floating-div-jquery/
jQuery('document').ready(function(){
if(jQuery('.right').length){
jQuery(window).scroll(function(){
var win_width=jQuery(window).width();
if(win_width>1200){
var topoffset=jQuery('.right').offset().top;
var leftoffset=jQuery('.right').offset().left;
var botoffset=jQuery('footer').offset().top;
var block_height=jQuery('.floating-block').height();
botoffset=botoffset-block_height-250;
topoffset=topoffset-200;
var sTop=jQuery(window).scrollTop();
var top_fix_to_abs=botoffset-topoffset;
if(sTop < topoffset){
jQuery('.floating-block').removeClass('curr_fix');
jQuery('.floating-block').removeClass('right_fix');
jQuery('.floating-block').css('top',"");
jQuery('.floating-block').css('left',"");
console.log('h1');
}
if(sTop > topoffset && sTop<botoffset){
jQuery('.floating-block').addClass('curr_fix');
jQuery('.floating-block').addClass('right_fix').css('left',leftoffset);
jQuery('.floating-block').css('top',"");
console.log('h2');
}
if(sTop >=botoffset && sTop>topoffset){
jQuery('.floating-block').removeClass('curr_fix');
jQuery('.floating-block').css('left',0);
jQuery('.floating-block').css('top',top_fix_to_abs);
console.log('h3');
//return;
}
}
});
}
});

Change CSS properties when the element passes a specific position

my page contains a header which stays on top of a dark image. The image is the exact same size as the viewport from the browser.
My goal is, when I scroll down the page and the header passes the image completely, that the background-color of the header changes.
Is that possible - and how?
Thanks

You can done it by using jquery's "scrollTop":
$(window).scroll(function() {
if ($(window).scrollTop() > sumValue) {
$('#header').css('background', 'yellow');
}
})
"sumValue" refer the amount of scroll you want the user to travel until you change the background.

Please look at the Fiddle
$(function() {
var image = $('.image'),
winHgt = $(window).innerHeight();
image.css({ height: winHgt });
$(window).scroll(function() {
var header = $('#header'),
winHgt = $(window).innerHeight();
if ($(window).scrollTop() > winHgt) {
$('#header').css({ background: '#333' });
}
else if ($(window).scrollTop() < winHgt) {
$('#header').css({ background: '#888' });
}
});
});

Fix navigation position when scrolling

I want to fix the position of navigation at the top when the navigation position and scroll position are equal.
Please let me know how can I get the position of navigation and page scroll position? I want something like this: http://new.livestream.com/live-video-tools
I've tried:
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#main-heading').offset().top;
// our function that decides weather the navigation bar should have "fixed" cs s 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) {
$('#fixed_nav').css({ 'position': 'fixed', 'top':6, 'left':0, 'width':'100%', 'z-index':999, 'height':80, 'background':'#fff' });
} else {
$('#fixed_nav').css({ 'position': '','overflow': 'visible', 'display':'block','height':80});
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});

This is old, but deserves an answer for Googlers' benefit.
See Fiddle here.
$(function () {
var offset = $('#nav').offset().top;
var nav = function () {
var scroll = $(window).scrollTop();
if (scroll < offset) {
$('#nav').css({ 'position': 'relative' });
}
else {
$('#nav').css({ 'position': 'fixed', 'top': 0 });
}
};
nav();
$(window).scroll(function () {
nav(); //this ensures we check again every time the user scrolls
});
});
OP - you probably figured it out by now, but I'm not sure why you were checking the offset of #main-heading and then setting the position of a different #fixed-nav, that's probably where you're issue was.