Getting pixel amount of Scrolling in an Overflow Hidden Page - javascript

I wish to be able to toggle a class for the body when there is a large amount of scroll in the page, but there is a catch: its a full-sized, hidden overflow, single page.
I tried the simple:
if ($(window).scrollTop() > 1000){
$('body').addClass( "endScroll");
}
else {
$('body').removeClass("endScroll");
}
I tried this method to add the class endScroll after the page has been scrolled after 1000 pixels, however, it does not work because since it is a single screen with overflow hidden, there is no actual scroll from top. (To better explain, there is an animation going on while the user scrolls)
So I tried this method:
$(document).bind('mousewheel', function(e) {
var delta = e.originalEvent.wheelDelta;
if (delta < 0) {
$('body').addClass("endScroll");
} else if (delta > 0) {
$('body').removeClass("endScroll");
}
});
While it actually works, adding the class, it does as soon as the user scroll once. I can't figure a way to make it toggle the class after 1000 pixels have been scrolled.
Thank you in advance!

EDIT: I think this is closer to what you're looking for. You need a tracking variable to see how much the user has scrolled:
var scrollVal = 0;
$(document).bind('mousewheel', function(e) {
scrollVal += e.originalEvent.wheelDelta;
if (scrollVal > 0) scrollVal = 0;
console.log(scrollVal);
if (scrollVal < -1000) {
$('body').addClass( "endScroll");
}else {
$('body').removeClass("endScroll");
}
});
EDIT 2: Firefox compatibility:
var scrollVal = 0;
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";
$(document).bind(mousewheelevt, function(e) {
var offset = -1 * e.originalEvent.wheelDelta;
if (mousewheelevt == "DOMMouseScroll"){
offset = e.originalEvent.layerY - e.originalEvent.clientY;
}
scrollVal += offset;
if (scrollVal < 0) scrollVal = 0;
console.log(scrollVal);
if (scrollVal > 1000) {
$('body').addClass( "endScroll");
}else {
$('body').removeClass("endScroll");
}
});

Just scroll it to 1000px and see the background will be red if you scroll up it will be again black
$(window).on("scroll", function() {
if($(window).scrollTop() > 1000){
$(".scroll-div").addClass('scroll-div-red');
}
else{
$(".scroll-div").removeClass('scroll-div-red');
}
});
.scroll-div{
background:#000;
height:1500px;
overflow:hidden;
}
.scroll-div-red.scroll-div{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="scroll-div">
</div>

Related

Show div after scrollDown then scrollUp to top

I want to show hidden div after scrollDown then scrollUp to top. This means that after I scroll down and then scroll up to top, the hidden div is show.
This is my js, but it's just scrollDown.
$(document).scroll(function() {
let y = $(this).scrollTop();
if (y > 100) {
$('.latest_news').fadeIn();
} else {
$('.latest_news').fadeOut();
}
});
I don't know how to after scrollUp, that div show for me?
Thank you.
Sorry about my English.
$(document).scroll(function() {
if ($(this).scrollTop() === 0 && $(".latest_news").is(":hidden")) {
$(".latest_news").fadeIn();
} else {
$(".latest_news").fadeOut(); // remove this else block if you do not want hidden on every scroll down
}
});
I give you solution.
This is very simple.
You need to know scroll direction.
var lastScrollTop = 0;
$(window).scroll(function(event) {
var st = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
if (st > lastScrollTop) {
// downscroll code
} else {
// upscroll code
}
lastScrollTop = st;
});
reference my blog: https://seunggabi.tistory.com/entry/JS-Browser-get-scroll-direction

Different scripts for Desktop and Mobile

I have been working on this website, and I have a script that works quite well on desktop, but I would like to make some modifications on mobile.
The script I have provided below will generate the 'menu box items' as the user is scrolling down.
Then, as the user keeps scrolling down, the boxes will a get zero opacity.
Now, this script is not working that good on mobile (especially on iOS). So what I would like to do is:
Instead of having an opacity of 0 at the beggining, I would like the boxes to have an opacity of 1 when the page is loaded.
Then, as the user makes his/her first scroll on mobile, the boxes will get an opacity of 0.
The code can be tested here.
$(document).scroll(function () {
$('.hContentV2>div').each(function () {
var dataOpacity = $(this).attr('data-opacity');
var opacityValue = $(document).scrollTop() / 500;
var aosDelay = Math.floor(Math.random() * (700 - 100 + 1)) + 100;
var t = $('.hotelSection2').offset().top;
if ($(document).scrollTop() > 150 && $(document).scrollTop() < ($('.hotelSection2').offset().top - 300)) {
if (opacityValue >= dataOpacity) {
opacityValue = dataOpacity;
}
$(this).css({ 'opacity': 1, 'transition-delay': aosDelay + 'ms' });
}
else if ($(document).scrollTop() <= 100) {
var opacityValue = 0;
$(this).css('opacity', opacityValue);
}
else if ($(document).scrollTop() > $('.hotelSection2').offset().top) {
var opacityValue = 0;
$(this).css('opacity', opacityValue);
}
});
if ($(document).scrollTop() < 100) {
$('.scrollTopButton').css({ 'opacity': 1 });
}
else {
$('.scrollTopButton').css({ 'opacity': 0 });
}
});
You can look at the width of the device
E.g
if(document.documentElement.clientWidth < 900){
//script
}
First detect the device mobile device with this script
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// YOur less opacity code will be here for ios
}
else{
//Your normal code here
}
or you can do same by detecting the width of screen to detect the mobile screens
if(window.screen.width < 768){
// Your ios code here for mobile
}
else{
}
Like this.
I hope it helped you.

Jquery mobile sticky header

I have a jquery mobile header div (data-role="header" data-position="fixed") with two toolbars inside in a layout like this:
_____________________
|XXXXXXXXXXXXXXXXXXX|
|YYYYYYYYYYYYYYYYYYY|
and I want to reproduce the effect of WhatsApp, where scroll down hides toolbar XXXXXXXX and scroll up shows toolbar XXXXXXXXXX. Toolbar YYYYYY always visible.
By using window.onscroll this can be achieved by adding/removing a class with top:-50px; upon scroll down/scroll up.
It works, however, it works only when the page is loaded for the first time or it is reached with a link having rel=external. In all other cases, it is impossible to see the effect of the added class. I have also tried .addClass("sticky").enhanceWithin() with no effect.
Any suggestion to make this to work every time?
Here the code:
var didScroll = false;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = 20;
$(document).on("scroll", function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var currentScroll = $(this).scrollTop();
if(currentScroll >= 200) {
$("#scrollToTop").show();
} else {
$("#scrollToTop").hide();
}
if(Math.abs(lastScrollTop - currentScroll) <= delta)
return;
if (currentScroll > lastScrollTop && currentScroll > navbarHeight){
$('#PageHeader').removeClass('nav-down').addClass('sticky');
} else {
if(currentScroll + $(window).height() < $(document).height()) {
$('#PageHeader').removeClass('sticky').addClass('nav-down');
}
}
lastScrollTop = currentScroll;
}
I hope my fiddle will help you out:
[http://jsfiddle.net/Lfve19u0/]
Ramon.

Execute code after scrolling a certain amount of pixels from a certain point (up or down)

I'm currently making an overlay that covers a sticky top bar when the user has scrolled beyond a certain point (down) and disappears when scrolling back up. However, I'd like to be able to scroll for at least 50px before the code is executed (something like a gap before the overlay is triggered).
$(function() {
var prevScroll = $(document).scrollTop(); //initial position
$(window).scroll(function() {
var newScroll = $(document).scrollTop(); //position from top after scrolling
if(newScroll > prevScroll) { // checks if the user has scrolled up or down
var fromNew = $(document).scrollTop(); // holds value to compare with the position + gap amount
if (fromNew > newScroll + 50) { //checks to see if scrolled for 50px
$("#stick-start").fadeIn("fast");
prevScroll = newScroll + 50; //initial position + scrolled amount
};
} else {
var fromNew = $(document).scrollTop();
if (fromNew > newScroll - 50) {
if ($("#stick-start").hasClass("is-stuck")) {
$("#stick-start").fadeOut("fast");
prevScroll = newScroll - 50;
};
};
};
});
});
The condition that checks whether you're scrolling up or down works. But as it is now, the overlay just keeps fading in and out repeatedly. How do I make it so that you have to scroll at least 50px before anything happens ?
I think this should get you where you're going.
var $document = $(document);
$(window).scroll(function() {
if ($document.scrollTop() >= 50) {
$("#stick-start").fadeIn("fast");
} else {
$("#stick-start").fadeOut("fast");
}
});
EDIT: had an error, should be good now.
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) {
$("#stick-start").fadeIn();
} else {
$("#stick-start").fadeOut();
}
});

Changing position background in JavaScript, strange issue

I have a simple question, I would like to change one picture when a user scroll the page (to make an illusion of 3d picture)
the first approach was changing the image src every time (making like 8 different pictures) but I could see the lag on the browser when I was scrolling, the effect was not good.
So that, I had the idea to make one single image, anche change the background-position while the user scroll.
This works perfect (when everything is loaded), the only problem is when the user scroll, each time the background-position is changing, the browser reload the picture. So that, the waiting will be to much. Looks like load different picture, but it's only one.
I don't understand why, the picture is always the same, why there is this problem? did someone know another solution?
this is the script:
<script type="text/javascript">
jQuery('.qty-cart-btn2').hide();
jQuery('.shoes-360-2').css('backgroundImage','url(shoes_img1/360.png)');
require(['jquery', 'jquery/ui'], function($){
jQuery(function(){
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop() >= 30) {
jQuery('#back-shoes')
.css({'background-position-y':'-264px'})
}
if(jQuery(this).scrollTop() >= 45) {
jQuery('#back-shoes')
.css({'background-position-y':'-528px'})
}
if(jQuery(this).scrollTop() >= 60) {
jQuery('#back-shoes')
.css({'background-position-y':'-792px'})
}
if(jQuery(this).scrollTop() >= 75) {
jQuery('#back-shoes')
.css({'background-position-y':'-1056px'})
}
if(jQuery(this).scrollTop() >= 90) {
jQuery('#back-shoes')
.css({'background-position-y':'-1320px'})
}
if(jQuery(this).scrollTop() >= 105) {
jQuery('#back-shoes')
.css({'background-position-y':'-1584px'});
}
if(jQuery(this).scrollTop() >= 120) {
jQuery('#back-shoes')
.css({'background-position-y':'-1848px'});
}
});
});
});
</script>
Thank you very much
Use IF condition in greather than and smaller than, like:
jQuery(function(){
jQuery(window).scroll(function(){
var Scroll = jQuery(this).scrollTop();
if(Scroll >= 30 && Scroll < 45){
jQuery('#back-shoes').css({'background-position-y':'-264px'})
}
});
});
I solved by this example:
<div id="rotator"></div>
$(function() {
var rotator = $('#rotator');
var container = $(document);
var viewport = $(window);
var images = 72;
var imageHeight = 30000 / images;
var scrollHeight = container.height() - viewport.height() + imageHeight;
var step = images / scrollHeight;
viewport.scroll(function(event) {
var x = -Math.floor(step * viewport.scrollTop()) * imageHeight;
rotator.css('background-position', x + 'px 0');
});
body {
height: 2000px;
}
#rotator {
font-size: 416px;
width: 1em;
height: 1em;
position: fixed;
top: 0;
right: 0;
z-index: -1;
background: transparent url(http://www.3sessanta.it/images/polaroid/sprite_polaroid_total.jpg) no-repeat 0 0;
}
http://jsfiddle.net/coma/sBTzG/13/
Thanks everyone

Categories