We Keep Coding

Stop scrolling element and have it go back to where it started, when a certain page width is met

I want the Spotify iframe to follow the user as they go down the page. I've achieved that with this:
$(window).scroll(function() {
var $scrollingDiv = $("#spotifyIframe");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop())/1.5 + "px"}, "slow" );
});
});
The only problem is that when the width of the page is smaller than 700px, the iframe goes below the paragraph, letting it scroll to infinity.
I tried putting the function in an if statement with $(window).width() < 700, and it sort of worked, but the only problem was that the scrolling function didn't start back up again, when the page width became bigger than 700px.
Here's what the website I'm making looks like:

Try listening to the resize() event:
$(window).scroll(function() {
var $scrollingDiv = $("#spotifyIframe");
var largerThen700 = $(window).width() > 700;
$(window).resize(function(){
largerThen700 = $(window).width() > 700;
});
$(window).scroll(function(){
if(largerThen700){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop())/1.5 + "px"}, "slow");
});
}
});

never ending scrolling page (scrolling top and back to bottom of the page or otherwise)

I want to know a code for continuous website that if i scroll to the bottom and will get back to top, and otherwise.
i already in a half way that i used this code for the bottom page :
$(document).ready(function() {
$(document).scroll(function(){
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
$(document).scrollTop(0);
}
});
});
how can i make conversely?
from top to the bottom page?
EDIT:
$(document).ready(function() {
$(document).scroll(function(){
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
$(document).scrollTop(0);
}
else if ($(window).scrollTop() <= 0) {
$(document).scrollTop($(document).height());
}
});
});
i tried that code and it works, but i think there is a little bug there, i need to scroll a bit more to get to bottom from top or otherwise, why is that happen?
Thanks

scrollTop can't go below 0, so you probably want to leave a buffer at the top of the page which sends you to the bottom when you scroll above it.
Something like this:
var BUFFER = 10;
$(document).ready(function() {
$(document).scrollTop(BUFFER);
$(document).scroll(function(){
var scrollPos = document.documentElement.clientHeight + $(window).scrollTop();
if (scrollPos >= $(document).height()) {
$(document).scrollTop(BUFFER);
} else if (scrollPos < BUFFER) {
$(document).scrollTop($(document).height());
}
});
});

i think this will help
window.scrollTo(0,document.body.scrollHeight);
or if you want to use jQuery get it from this thread

How to show a div when the user scrolls to the end of the page?

http://codepen.io/BrianDGLS/pen/yNBrgR
This is what I am currently using which allows the user to track where he is on the page.
What would I have to do to show a div when the user reaches the bottom of the page? And continue to show it until he hits refresh
#show {display: none}
<div id="show">
<p>Hello</p>
<p>World!</p>
</div>
Show the div '#show' when the user reaches the bottom of the page and continue to show it for as long as he stays on the page.

Using a convention that mirrors the sample JS code:
$(window).scroll(function() {
var wintop = $(window).scrollTop(),
docheight = $(document).height(),
winheight = $(window).height(),
scrolled = (wintop / (docheight - winheight)) * 100;
if (scrolled >= 100) {
$(yourDiv).show();
}
});
The computation of the scroll percentage is straight from the link you provided and the condition just checks if you've reached 100% of the page (minus current window size).
You could also change 100 to be whatever percentage if you want to load the div before the user reaches the absolute bottom.

It could be something like:
$(window).on('scroll', function(){
var op = $(window).scrollTop() + $(window).height();
if( op >= $(document).height() ) $("#show").show();
});

You need to trigger a Javascript function when the <div id="show"> is visible in the client's viewport, for that you can use a plugin

try below code
var show=false;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height() || show==false) {
$("#show").show();
show=true;
}
});

Use jQuery to detect when an element is near the bottom of the page

I've got a script that works out the distance of a list of elements from the top of the page, but I am unsure how to detect it's distance from the bottom. When it hits the bottom (well, 20px before the bottom) I want to fire an event and fade it out:
$(window).on('load resize scroll', function () {
$('.links__item').each(function () {
if (($(this).offset().top - $(window).scrollTop()) < 20) {
$(this).stop().fadeTo(100, 0)
} else {
$(this).stop().fadeTo('fast', 1)
}
})
})
If anyone has any advice, much appreciated. I'm looping through the elements to detect it, so when one of them hits 20px from the bottom, I want to fade it out. Thanks!

You can use the jQuery function height() at your calculations, like:
$(window).height();
$(this).height();
Specifically, if you want to detect if the top of the element is near to the bottom of the page, you can use this calc:
if ( $(this).offset().top > ($(window).scrollTop() + $(window).height() - 20) ) // True

Halcyon,
I am not sure what you want to fire but you can test the bottom of the page like this
$(window).on('load resize scroll', function () {
$('.links__item').each(function () {
if( ($(this).offset().top > ($(window).scrollTop() + $(window).height() - 20)) {
$(this).stop().fadeTo(100, 0)
} else {
$(this).stop().fadeTo('fast', 1)
}
})
})
Reason being is jQuery finds bottom of the page based upon its height
1 $(window).height(); // returns height of browser viewport
2 $(document).height(); // returns height of HTML document

javascript doesn't work in firefox

JavaScript:
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
$('#footer').show();
}
});
CSS:
#footer {
display: none;
}
This is supposed to reveal a hidden div at the bottom of a page when scrolled all of the way down to the bottom. For some reason, the hidden div never gets shown in Firefox. Is there another method using jQuery to create the same effect?
EDIT: Here's the page where it's not working correctly in Firefox
http://safe.tumblr.com/theme/preview/34069

You need to be using this:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$('#footer').show();
}
});

There may be a small difference between the max value for scrollTop and what documentHeight - windowHeight gives you, so I would propose to subtract a small safety factor:
$(window).scroll(function(){
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 3) {
$('#footer').show();
}
});