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.

div fade out inner div elements

I came accross the following fiddle which let elements fade out of the document 1 by 1 as they reach the top.
By executing javascript:
$(window).scroll(function () {
$('[id^="box"]').each(function () {
if (($(this).offset().top - $(window).scrollTop()) < 20) {
$(this).stop().fadeTo(100, 0);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});
http://jsfiddle.net/JdbhV/6/
Only this is working on the full window, I want it to work on a div tag. So I modified the fiddle to add the div test and all other divs inside there, then modify the javascript to grab the div instead of the window:
$("#test").scroll(function () {
$('[id^="box"]').each(function () {
if (($(this).offset().top - $("#test").scrollTop()) < 20) {
$(this).stop().fadeTo(100, 0);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});
http://jsfiddle.net/JdbhV/1692/
But now they fade too fast and not when they reach the top of the div.
Does someone have a pointer what is going wrong here?

The .offset() method allows us to retrieve the current position of an element relative to the document.
Scrolling the window doesn't change the position of elements in the document however scrolling elements inside another element does. This causes the offset position to change which throws off the check to see if box is at the top of the scroll view.
Try using the .position() method which gets the position relative to the parent.
$("#test").scroll(function () {
$('[id^="box"]').each(function () {
//When the top of the square goes above the top of the scroll element, fade it out
if ($(this).position().top < 0) {
$(this).stop().fadeTo(100, 0);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});
http://jsfiddle.net/ys0m6axL/

The reason is that jQuery turns the divs transparent. However the divs are still there, which means their height still counts.
So, in particular for this case, the only thing you need is the subtraction. Using 20 minus the height of divs (which is 100px) and spaces between divs (which is 100px as well), you have 200px in total for each div (and the space around it).
Try the code below, and see if it works.
$("#test").scroll(function () {
$('[id^="box"]').each(function () {
if (($(this).offset().top - $("#test").scrollTop()) < 20 - $(this).index() * 200) {
$(this).stop().fadeTo(100, 0);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});
Good luck.

Try with using div top instead scrollTop in the calculation.
I have changed the calculation in this line :
if (($(this).offset().top - $("#test").offset().top) < 20) {
JSFIDDLE : http://jsfiddle.net/JdbhV/1697/
$("#test").scroll(function () {
$('[id^="box"]').each(function () {
if (($(this).offset().top - $("#test").offset().top) < 20) {
$(this).stop().fadeTo(100, 0);
} else {
$(this).stop().fadeTo('fast', 1);
}
});
});

Here are the jsfiddle example.
You just need to change the condition
from
$(this).offset().top - $("#test").scrollTop()) < 20
To
$(this).offset().top < $("#test").offset().top
$("#test").offset().top
is the height that determine when to do the fade action.
For now that is the top of the container #test.

How to make an element become fixed when 50px from the top of the screen

I have a html div element that scrolls with the page but I would like it to become fixed once it reaches 50px from the top of the screen...
How is this done?
My div id is #box
Thanks!
-Ina

If you want it to be fixed at the top of the page at some distance from the top, you can check the top offset of the element and change the class when it reach the distance you want.
Here is the jquery code for your reference
jQuery(document).scroll(function() {
var documentTop = jQuery(document).scrollTop();
console.log('this is current top of your document' + documentTop );
//box top is 891
if (documentTop > 841) {
//change the value of the css at this point
jQuery("#box").addClass("stayfix");
}
else
{
jQuery("#box").removeClass("stayfix");
}
});
You need to be more specific about what have you done so far. For eg, how did you make the div element to scrolls inside the page. using css or js/jquery animation features?That will help us to give more specific answer.
**Edited According to your fiddle.

They are right, this question is duplicate. Here is a code I made with answers from the forum.
var box_top = $("#box").offset().top;
$(window).scroll(function (event) {
if ($(window).scrollTop() >= (box_top - 50)) {
$("#box").css({position:"fixed",top:"50px"});
} else {
$("#box").css({position:"relative"});
}
});
Hope it helps anyway.
https://jsfiddle.net/ay54msd5/1/

Try something like this. It's a solution using jquery (hopefully not a problem) that checks the scrollHeight of the page every time the page scrolls. If the scrollHeight is greater than a certain threshold, the element becomes fixed. If not, the element is positioned relatively (but you can do whatever you want in that case.
$(document).ready(function() {
var navFixed = false;
var $box = $("#box");
var topHeight = 50;
$(document).scroll(function() {
if ($(document).scrollTop() >= topHeight && !navFixed) {
$box.css("position", "fixed");
navFixed = true;
}
else if ($(document).scrollTop() < topHeight && navFixed) {
$box.css("position", "relative");
navFixed = false;
}
});
});
You would have to write some additional CSS targeting the #box element that tells it what coordinates you'd like it to be fixed to.

How to make a .fixed sticky item's "margin-top" relative to the size of the sticky item?

This is my first question. I am having trouble with a image I am trying to stick when it reaches the top of the page after scrolling.
Check out this jfiddle - it is not mine but comes close to representing my question
http://jsfiddle.net/vBy5w/
(I am aware that I can input a set "margin-top" to make this work but when the browser size changes then the image size will respond and will throw off the set margin.)
So far I have achieved this by using the code below to effect the Div Id = Picture1 in my html
<div id="picture1"><img src="img/empty-restaurant.png" alt="Why do your customers not come back?" style="max-width:100%;height:auto;"> </div>
When this picture "sticks" the test below the image will jump up, I fixed this by including the last line of the .js but by stating a fixed "margin-top" it means that there will be a jump if the margin size is not correct depending on browser size.
Is there a way to make this Margin variable or relative to the height of the "stick"-ed item? And if so how?
Thanks guys!
$(document).ready(function() {
var s = $("#picture1");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
//$("#header_left").html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
This is the part that needs changing - the first "margin-top" needs to be relative to the size of the "stick"ed item
if (windowpos >= pos.top) { s.addClass("stick"); $("body").css("margin-top", 60); } else { s.removeClass("stick"); $("body").css("margin-top", 0); }
});
});

As comments,
$("body").css("margin-top", s.height());
Gives a dynamic margin-top css value to the <body> based on the height on the element ( #picture1 ) that is being fixed during window.scroll
As an addition, you mention that the height may change on screen resize ( rwd )
So this may be good to add also ( to keep it in check )
$(window).resize(function() {
var s = $("#picture1");
if(s.hasClass("stick") {
$("body").css("margin-top", s.height());
}
});

Jquery when the user hits bottom of the page

I've been working on a scroll to top function for my website, and that part of it works fine. My problem is however that I have a fixed div that is overlapping my footer when it hits the bottom of the page.
Here is the function that I have working.
$(document).scroll(function (e) {
if (document.body.scrollTop >= 800) {
$('#beamUp').show(1000);
} else {
$('#beamUp').hide(1000);
return false;
}
});
Is there somehow I could detect when I hit that part of the page and stop the div from moving past that.Help is much appreciated!
jsFiddle: http://jsfiddle.net/zazvorniki/RTDpw/

Just get the height of the page, minus the height of the div in question, as well as the footer... make sure the top is never greater than that value... you'll also need an onresize event handler re-evaluate that value.
looking at your jsfiddle... here are my edits
In your scroll listener, I am checking for the position of the page, and adjusting the bottom position of the floater appropriately. I also set the initial display:none, so you don't need to call .hide() in your initial script. In addition, resizing the window has the effect of scrolling for your use, so I changed the listener for both events.
$(document).on('scroll resize', function (e) {
var viewHeight = $(window).height();
var viewTop = $(window).scrollTop();
var footerTop = $("footer").offset().top;
var baseline = (viewHeight + viewTop) - footerTop;
var bu = $("#beamUp").css({bottom: (baseline < 0 ? 0 : baseline) + 'px'});
if (viewTop >= 50) {
bu.show(1000);
} else {
bu.hide(1000);
}
});