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

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

Related

Autoscroll Jquery

I am trying to automate a scroll of 750px once the user has scroll 1px
, but reached 750 that I would scroll back to normal and the effect start again only if I am at the top of the page .
jQuery.noConflict()(function ($){
$(window).scroll(function (event) {
var body = $("html, body");
var scroll = $(window).scrollTop();
body.stop().animate({scrollTop:750}, '1500');
});
});
This is my code , but continues to scroll automatically to 750px how can I stop the event and start it again only if im ot the top of the body ?
you just need to add an if around the animate call.
if(scroll == 0){
body.stop().animate({scrollTop:750}, '1500');
}
otherwise everytime you scroll it will call the animate and return to 750px position
As i understand it, you want the scroll event to be fired only when the top of page has been reached. So you could toggle a class on the body element:
$(window).on('scroll', function(event) {
var scroll = $(window).scrollTop();
var $body = $('body');
if ($body.hasClass('onTop')) {
$("html, body").animate({
scrollTop: 750
}, '1500');
}
$body.toggleClass('onTop', scroll === 0);
}).scroll(); // trigger it on load or set it directly in HTML markup: <body class="onTop">

Javascript Scroll Animation Issue

I attempted to make an animation, so that a header and a paragraph will increase in size when a user has scrolled to it. When the user scrolls past the header, the text will shrink back.
I had an issue getting this to work, but I got it after looking at: Animate on scroll with jQuery
However, the font increases jerkily when I scroll down. Oddly, it works better when I scroll up.
Here is the code:
$(document).ready(function () {
$(document).on("scroll", onScroll);
function onScroll(event){
$('#sched li').each(function () {
var scrollPos = $(window).scrollTop()+250;
var currLink = $(this);
var refElement = currLink.find("div");
if (refElement.offset().top <= scrollPos && (refElement.offset().top+refElement.height())>scrollPos){
currLink.find("h1").stop().animate({fontSize:'40px'},300);
currLink.find("p").stop().animate({fontSize:'30px'},300);
currLink.addClass("active");
}
else{
if(currLink.hasClass("active")){
currLink.find("h1").stop().animate({fontSize:'20px'},300);
currLink.find("p").stop().animate({fontSize:'15px'},300);
currLink.removeClass("active");
}
}
});
}
});
I am somewhat new to this, so any help would be appreciated.

Detect if page is scrolled on document load

I'm using the scrollTop to detect if the users scrolls then fadeIn an element:
$(document).ready(function() {
// scroll to top
$(window).scroll(function() {
if ($(this).scrollTop() >= 700) { // if page is scrolled more than 700px
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
});
});
It works well if the user loads the page and then scroll, but if the user is already below the 700px and reload or goes back to the same page the element doesn't fadeIn automatically on document load. It seems that it is not detecting the page is already scrolled.
Any idea what could be the problem with my code?
Just do the test when document is ready
It's better to create a function
function checkScroll(){
if ($(window).scrollTop() >= 700) {
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
}
$(document).ready(function() {
checkScroll();
$(window).scroll(checkScroll);
});
Call this way to your function
Put this line end of your document ready.
$(window).scroll();
Simply trigger scroll after the delegation.
$(document).ready(function() {
// scroll to top
$(window).scroll(function() {
if ($(this).scrollTop() >= 700) { // if page is scrolled more than 700px
$('#return-to-top').fadeIn(200);
} else {
$('#return-to-top').fadeOut(200);
}
}).scroll();
//^^^^^^ trigger scroll.
});

Some issues with a 'scroll to top button'

I have this 'scroll to top button' that pops up after the user has scrolled down 300px. Everything works fine so far. What I'm trying to do now, is to make this button pop up at a specific element.
Here is the jQuery:
// 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;
});
});
Ok, I then changed this line
if ($(this).scrollTop() > 100) {
to
if ($(this).scrollTop() > '.show-button-here') {
but it didn't work. Any ideas what I'm doing wrong?
Here is a fiddle: http://jsfiddle.net/v70L4buk/
You need to get the position of the element from the top of the page and then subtract how far from the top you want that element to get before showing the up arrow. In this case, I am showing the arrow when a link I created in the page gets to 300px from the top. Or you can remove the number and when that element gets to the top of the viewport the function will kick in.
if ($(this).scrollTop() > $('.show').offset().top - 300) {
JSFIDDLE: https://jsfiddle.net/gvpLe06c/1/

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
}
}

Categories