We Keep Coding

jQuery -- Prevent User from Scrolling Up Past Certain Scroll Height

I am making a one-page website.
Basically, I have this animated landing page with a landing image and a bootstrap jumbotron. I want to be able to implement a function where once the user scrolls past the end of the jumbotron, the user cannot scroll back up to view the landing image and the jumbotron. In a sense, either hide or delete the <div>s that were at the top, or completely disable scrolling back to those points.
I found this code, but it automatically disables scrolling up to the page top (after 200 px) on page load:
$(function() {
var scrollPoint = 200;
$(window).scroll(function() {
$(window).scrollTop() < scrollPoint ?
$(window).scrollTop(scrollPoint) : '';
}).scroll();
});
Any ideas?

You can use this code to hide the jumbotron.
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('#id_of_jumbotron').offset().top +
$('#id_of_jumbotron').outerHeight() - window.innerHeight) {
hideTheJumboTron();
}
});

try this:
$(function () {
var scrollPoint = 200;
$(window).scroll(function () {
if ($(window).scrollTop() < scrollPoint) {
console.log($(window).scrollTop());
$(window).scrollTop(scrollPoint)
return false;
}
}).scroll();
});

Fade out 'scroll to top' button when you're 100px off the bottom of the page

I'm using a simple jquery "scroll to top" plugin I found online and it's working well. However, I want to fade out my 'scroll to top' button when I'm 100px off the bottom of the page. Can anyone help? Here's a fiddle - https://jsfiddle.net/p1em9gph/
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
Scroll To Top

You need to amend the logic which compares scrollTop() to be the height of the document, minus the height of the window, minus the 100px distance. Try this:
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > $(document).height() - $(window).height() - 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
Working example
Update
From your comments below it sounds like you only want the div to show when the scroll is 100px from either the top or bottom, in which case try this:
$(window).scroll(function() {
if ($(this).scrollTop() < 100 || $(this).scrollTop() > $(document).height() - $(window).height() - 100) {
$('.scrollToTop').fadeOut();
} else {
$('.scrollToTop').fadeIn();
}
});
Working example

fadeOut on scroll at pixel height

i'm trying to achieve a Scroll to Top button that fades in at a certain point on the page and fades out at a certain point...I have the fadeIn function working properly but can't seem to get the proper syntax for the click event fadeOut; it just disappears once you get to the top, instead of fading out if you're <= 675px. Any help is greatly appreciated!
HTML:
</div>
BACK TO LOGIN
</div>
jQuery:
$(document).ready(function() {
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('html, body').animate({
scrollTop : 0
}, 800);
return false;
});
});

I think your question isn't so clear but maybe you mean that when click on the scrollToTop button it doesn't disappear until the scroll reach to top of page, it's because when your animation function is running the .scroll can't runs so fast that disappear button when reach to 675px but you can fadeout button as soon as click on it using this code:
jQuery: $(document).ready(function() {
var isClicked = false;
$('.scrollToTop').css("display","none");
$(window).scroll(function() {
if (isClicked == false){
if ($(this).scrollTop() > 675) {
$('.scrollToTop').fadeIn(500);
} else {
$('.scrollToTop').fadeOut(500);
}
}
});
$('.scrollToTop').click(function() {
isClicked = true;
$('.scrollToTop').fadeOut(500);
$('html, body').animate({
scrollTop : 0
}, 800, function(){
isClicked = false;
});
});
});
The isClicked variable is added to prevent blinking button (you can remove it to figure out what i'm saying).
Also i add this line:
$('.scrollToTop').css("display","none");
because it seems that you don't need a "Scroll To Top" button when page load for first time and you are on the top of page.
Check JSFiddle Demo

Show A Sticky Bar Until User Scrolls Down to a <div>

I want to add a sticky bar at bottom of my page and I want it to fade out once user reaches to a div by scrolling and again fade in once user scrolls up and that div is not on screen anymore.
And it shouldn't show if user screen is big enough to show that div normally.
Please guys help me...
I am currently using this code:-
<script type="text/javascript">
//<![CDATA[
$(window).bind("scroll", function() {
if ($(this).scrollTop() > -1) { //Fade in at a level of height
$("#bottbar").fadeIn();
checkOffset();
} else {
$("#bottbar").stop().fadeOut();
}
});
function checkOffset() {
if($('#bottbar').offset().top + $('#bottbar').height() >= $('#stopDiv').offset().top) {
$('#bottbar').css('position', 'absolute');
}
if($(window).scrollTop() + $(window).height() < $('#stopDiv').offset().top) {
$('#bottbar').css('position', 'fixed'); // restore when you scroll up
}
}
//]]>
</script>
but it is not working as expected on my site bookaire.com
I am not sure whats the problem is with this code, it doesn't show the bar when site loads, it show only when user scrolls a little and when it reaches the stopdiv instead of hiding the bar it get stuck at center of screen.

Whew! that took me a while since I'm still a beginner with javascript but I think I got it.
Note: the bar is getting stuck in the middle on certain screen size because you are only changing the position from fixed to absolute in your javascript. instead, change the display from block to hidden.Also note that the css for #bottbar should already be display:block
I believe your requirements are:
1. it shouldn't show if user screen is big enough to show that div normally
2. to fade out once user reaches to a div by scrolling
See: JSFIDDLE
$(document).ready(function() {
if($(window).height() > $('#stopDiv').offset().top) {
$("#bottbar").css('display', 'none');
}
else {
$("#bottbar").css('display', 'block');
}
});
$(window).bind("scroll", function() {
if($(window).height() > $('#stopDiv').offset().top) {
$("#bottbar").css('display', 'none');
}
if ($(this).scrollTop() > -1) { //Fade in at a level of height
$("#bottbar").css('display', 'block');
checkOffset();
}
else {
$("#bottbar").css('display', 'none');
}
});
function checkOffset() {
if($('#bottbar').offset().top + $('#bottbar').height() >= $('#stopDiv').offset().top) {
$('#bottbar').css('display', 'none');
}
if($(window).scrollTop() + $(window).height() < $('#stopDiv').offset().top) {
$('#bottbar').css('display', 'block'); // restore when you scroll up
}
}

backtotop.js bug: box is always visible in Firefox 29

// JavaScript Document
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
This should hide the box until you have scrolled to about 100px from the top. It does work in every browser until the latest Firefox update came out. Any suggestions why that is?
Check the box on the lower left corner on this site: http://lightningsoul.com

Problem had nothing to do with FF29 but with the implementation of the JavaScript.
I had to add a leading / in order to implement it for pages like http://lightningsoul.com/media/vid/1934 etc.