Develop Reference

change div height when scrolling down

I have div element that contain google map. The div is on the half of the page, and it's start from the middle (more or less).
Is it possible that the height of it will be expand when user scroll down ( and shrink when scroll up) ?
I have some script that do it, but it's not so friendly.
and the current script is:
// change map size when scroll down
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 450) {
$("#map-warp").addClass("change-map-canvas"); // removed the . from class
$("#map-warp").css("margin-top", "40px"); ; // change margin from top for close infoWindow button
} else {
$("#map-warp").removeClass("change-map-canvas"); // removed the . from class
$("#map-warp").css("margin-top", "10px"); ;
}
});

Try this here:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var topMargin = 10 - $(window).scrollTop();
if (scroll >= 570) {
$("#map-warp").addClass("change-map-canvas");
$("#map-warp").css("margin-top", "40px");
} else {
$("#map-warp").removeClass("change-map-canvas");
$("#map-warp").css("margin-top", topMargin+"px");
}
});
Until the scroll reaches 570, the map will always stay like in the beginning. After that it will smoothly follow the scroll.

Stop a scrollfollow div on specific div

I have a sidebar which are scrollfollow, that means it works as it is set to position:fixed. However, the sidebar continue scrolling till the user stop. This results in the elements on the bottom of the site doesn't reach the sight of the user, because the sidebar push elements down.
I have created a fiddle to illustrate the exact problem: jsd https://jsfiddle.net/Lv4humd6/2/
The javascript that makes the div scrollfollow:
$(function() {
var $sidebar = $("#sidebar-right"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
What I want is the sidebar to stop scrolling, when it reach the div break as you see in the jsfiddle. I have searched and tried everything, but I can't find any solution for it.

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

Position fixed when scrolled passed certain amount of pixels

I'm looking for a way to position the #header element of my page as "Fixed" only after having scrolled downward for about 170 pixels.
Above the header is a banner, so when people scroll down, I would like the banner to scroll away, the header to stay fixed when it hits the top of the window, and the page content to scroll underneath the header.
http://jsfiddle.net/tdskate/zEDMv/

This is the general idea although you may want to fudge around with the css a bit.
var header = $("#header");
$(document).scroll(function(e) {
if($(this).scrollTop() > $("#banner").height()) {
header.css({"position" : "fixed", "top" : "0"});
} else {
header.css("position", "relative");
}
});

You need to check for the different scroll positions:
var $header = $('#header'),
headerPos = $header.position().top,
$win = $(window);
$win.scroll(function() {
if ( $win.scrollTop() >= headerPos) {
$header.css({
'position':'fixed',
'top':0,
'width': '100%'
});
}
if ( $win.scrollTop() <= headerPos ) {
$header.css({
'position': 'static'
});
}
});
http://jsfiddle.net/DOSBeats/zEDMv/10/

Here's a slightly more concise version:
var header = $('#header'),
bannerHeight = $('#banner').height(),
win = $(window);
win.scroll(function() {
header.css({ top: Math.max(Number(win.scrollTop() - bannerHeight), 0) });
});

Here is a demo of a jquery plugin that takes care of this. Similar to John's answer above, but the plugin takes the solution a bit farther.
Demo: http://jsfiddle.net/ZczEt/
Plugin and source: https://github.com/bigspotteddog/ScrollToFixed
Usage:
$(document).ready(function() {
$('.header').scrollToFixed();
});

I think this should work: http://jsfiddle.net/Skooljester/K2mFT/. However, you'll need to define a width on your header or else it'll shrink when it becomes fixed.

lock a div on header when window scrolled past element

I want a circle div to lock in the header when the user scrolls past in.
I'm using the following code but it doesn't work
var circle$ = $('.circle'),
oCircleBottom = circle$.offset().top + circle$.outerHeight(true),
window$ = $(window);
window$.scroll(function() {
if (window$.scrollTop() > oCircleBottom) {
}
}.bind(this));
I want to perform an action when the user scrolls pass the circle div; however, the code above does not seem to work. Is oCircleBottom computed correctly?

Enclose your code in $(document).ready function
$(document).ready(function () {
var circle$ = $('.circle'),
oCircleBottom = circle$.offset().top + circle$.outerHeight(true),
window$ = $(window);
window$.scroll(function () {
if (window$.scrollTop() > oCircleBottom) {
$('.circle').css({
position: 'fixed',
top: '0',
left: '0'
});
}
else{
$('.circle').css({
position: 'static'});
}
}.bind(this));
});

You need to take window height into account because if the height of the page isnt enough to scroll down, your code doesnt work. Take a look at this example
However, if the increase page height, you code will work fine without subtracting window height. Take a look at this example
Hence, its better to subtract the window height. jsFiddle
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.circle').offset().top + $('.circle').innerHeight() - window.innerHeight) {
//Do you stuff
}
});