Develop Reference

How to change the scrolling position?

I want to have my content fade in on scrolling, but it reacts to late. How can I change it, to have my content fade in earlier?
I am very new to javascript and couldn't get it worked yet.
$(window).on("load",function() {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".fade").each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});
Right now the content space is blank until I scroll to the bottom. I need to have my content fade in when it is on like half of the page or earlier. Maybe changeable to any height with percent or pixel?

The shared portion of code fades element in once they are completely in the viewport (= when bottom of the elements is in the window).
How about fading elements in as soon as their tops get in the viewport?
Fade out logic should remain as is: elements should be faded out once their bottom get out of the viewport.
Adapted code:
$(window).on("load",function() {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".fade").each(function() {
/* Check the location of each desired element */
var objectTop = $(this).offset().top
, objectBottom = $(this).offset().top + $(this).outerHeight();
/* If the element's top gets within bounds of the window, fade it in */
if (objectTop < windowBottom) { //object comes into view (scrolling down)
if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
} else if (objectBottom >= windowBottom){ //object goes out of view (scrolling up)
if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});

jquery - expand google map when scrolling

I have split page - on one side i have sections with texts, on the other i have google map with location the refer to the texts.
I add script that expand the map height when you scroll down, but it's not so intuitive.
Is there any better code than can open expand the map while user scroll down?
This is my current code:
// 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"); ;
}
});

mouse over event within certain window y range

I am working on a project that requires the full length logo shrink to short initial in 2 situations:
A) when page scroll down past 300px.
and
B) if page hasn't scroll past 300px (meaning full length logo still showing), shrink the full length logo to initial to accommodate pulldown menu when mouse over the top menu items.
Here is the code I tried:
it is working but when page scroll past 300px the mouse out should not happen. It should keep the logo as the smaller initial format. Right now the mouse out will happen no matter the page is scroll past 300px or not.
/* shrink logo when page scroll past 300px by adding .smaller class to #logo. */
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
document.getElementById("logo").className = "smaller";
} else {
document.getElementById("logo").className = "";
}
}
/* shrink logo when mouse over top menu items (.showlp) only if page has NOT scroll past 300px */
$(document).ready(function(){
$(".showlp").mouseover(function(){
if (document.body.scrollTop < 300 || document.documentElement.scrollTop < 300) {
document.getElementById("logo").className = "smaller";
}
})
$(".showlp").mouseout(function(){
if (document.body.scrollTop < 300 || document.documentElement.scrollTop < 300) {
document.getElementById("logo").className = "";
}
})
});
Any help is appreciated.

Pass parameters via data attribute in the body tag and access that value via you javascript code.
Eg.
then on your javascript
var ctrl=
$("body").attr("
data-var");
then on your window scroll function set the attribute value to 1, aand listen to it on your mouse over function to know when to
add the functionality.
Eg.
Function
myfunction(){
if(document.bo
dy.scrollTop>3
00){
// swap urclass
// then do
$("body").attr("
data-var", 1);
}
then on your mouse over function do:
$(document).re
ady(function(){
$(".showIp").mo
usover(functio
n(){
var ctrl=
$("body").attr("
data-var");
if(ctrl==1){
//swap class
}
else{
//keep swap
}
});
});

Preventing Fixed Div from covering other Div

need some help.
My setup:
I have a fixed Div ("myFixedDiv") that remains in place when scrolling till
"myFixedDiv" reaches another div ("footer"). Then it moves with scrolling.
The Div "myFixedDiv" is placed next to a div ("text") using: display:inline-block.
Now for my problem:
When the window is horizontally made smaller, "myFixedDiv" is vertically placed after "textDiv" as intended. Only thing is, the upper-half of "myFixedDiv" visibly overlaps "textDiv", covering part of the text. I want "myFixedDiv" to be vertically placed after "textDiv" by pushing "footer" down to allow for this.
See an example here:
JSFIDDLE
You may need to give a little scroll to make "myFixedDiv visible again after making the window smaller.
$(document).scroll(function() { var $self = $("#myFixedDiv"); $self.css('margin-top', 0); var myFixedDivOffset = $self.offset().top + $self.outerHeight(true); if (myFixedDivOffset > ($("#footer").offset().top - 30)) { $self.css('margin-top', -(myFixedDivOffset - $("#footer").offset().top)); } else { $self.css('margin-top', '30px'); } });

Change fixed position to relative position of the div when you resize the window and it should be good
See this fiddle
$(window).resize(function() {
$("#myFixedDiv").css('position','relative');
});
You can also add a condition based on the width of the body to change the CSS of the div to relative or fixed position.

Solved it:
$(document).scroll(function() {
var $self = $("#myFixedDiv");
$self.css('margin-top', 0);
var myFixedDivOffset = $self.offset().top + $self.outerHeight(true);
if (myFixedDivOffset > ($("#footer").offset().top - 30)) {
$self.css('margin-top', -(myFixedDivOffset - $("#footer").offset().top));
} else {
$self.css('margin-top', '30px');
}
});
$(window).resize(function() {
if ($(window).width() < 601) $("#text").css('padding-bottom', '70px'); {
$(window).scrollTop($(window).scrollTop() + 1);
$(window).scrollTop($(window).scrollTop() - 1);
}
});
$(window).resize(function() {
if ($(window).width() > 600) $("#text").css('padding-bottom', '0'); {
$(window).scrollTop($(window).scrollTop() + 1);
$(window).scrollTop($(window).scrollTop() - 1);
}
});

Move div with window scroll not consistent

I need my sidebar to scroll up and down with the window but stop when the div is at its top or bottom. The code below works when the page is first loaded and scrolled down or when the page is scrolled up slowly, but when the page is scrolled to the very bottom of the sidebar div, the page has to reach the top (and then some) in order to trigger that margin change.
Is there some other trigger I should be looking for besides just on scroll? How can I adjust this code to properly adjust the div?
$(window).on("load scroll", function() {
var scrollYpos = $(document).scrollTop();
var sidebarinfo = $("#sidebar").offset().top + $("#sidebar").height();
var windowinfo = $(window).height() + $(window).scrollTop();
if ((windowinfo)<(sidebarinfo)){
$('#sidebar').css('margin-top', -scrollYpos);
}
});
The sidebar div is fixed position. If I use absolute position, the div scrolls fine, but it doesn't stop when the bottom of the div has been reached - it just continues to scroll with the window.
I've fixed the main part of the problem with this code.
$(window).on("load scroll", function() {
var sidebarinfo = $("#sidebar").scrollTop() + $("#sidebar").height();
var windowinfo = $(window).innerHeight() + $(window).scrollTop();
if ((windowinfo)<(sidebarinfo)){
$('#sidebar').css('top', -($(window).scrollTop()));
}
});
The only problem is on page load, the sidebar gets stuck in the wrong position until it is scrolled all the way up (and more).

I actually figured out that I needed to adjust a few things and add an else clause:
$(window).on("scroll", function() {
var scrollmargin = $(window).scrollTop() - $("#sidebar").outerHeight();
var sidebarinfo = $("#sidebar").scrollTop() + $("#sidebar").outerHeight();
var windowinfo = $(window).innerHeight() + $(window).scrollTop();
console.log($(window).scrollTop());
if ((windowinfo)<(sidebarinfo)){
$('#sidebar').css('top', (sidebarinfo + scrollmargin)*-1);
}
else {
var margintop = $(window).innerHeight() - $("#sidebar").outerHeight();
$('#sidebar').css('top', margintop);
}
});