Jquery scroll plugin scrolls down only - javascript

Im making a plugin with jquery and it makes use of a mouse scroll event.
The problem is i get it scrolls down even when im scrolling up.
Here i got my code
HTML:
<body>
<!-- <div id="element"></div> -->
<div id='wrapper'>
<img id='img1' src='./images/image1.jpg'>
</div>
<script>
$(document).ready(function()
{
$(document).scrollPage();
});
</script>
</body>
Javascript:
$.extend(Plugin.prototype, {
init: function () {
document.addEventListener('scroll', this.checkScroll);
},
checkScroll: function(event) {
//Guess the delta.
var delta = 0;
if (event.wheelDelta) {
delta = event.wheelDelta/120;
}
else if (event.detail) {
delta = -event.detail/3;
}
if(delta / 120 > 0){
console.log('up');
}
else{
console.log('down');
}
}
});
Somehow when i scroll the code always come in the else statement console.log('down');
is the formula delta / 120 > 0 wrong in this code?

Check current scrollTop vs previous scrollTop
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
} else {
// upscroll code
}
lastScrollTop = st;
});

My solution for:
/**
* Plugin that makes the screen scroll particular component visible on the screen
*/
$.fn.scrollTo = function() {
var isVisibleOnScreen = function(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
};
if(!isVisibleOnScreen(this)){
$('html, body').animate({
scrollTop: $(this).offset().top + 'px'
}, 'fast');
return this; // for chaining...
}
};
Usage:
$('#top').scrollTo();

i fixed it this way:
$.extend(Plugin.prototype, {
init: function () {
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? 'DOMMouseScroll' : 'mousewheel';
if (document.attachEvent){
document.attachEvent('on'+mousewheelevt, function(e){scroller(e)});
}
else if (document.addEventListener){
document.addEventListener(mousewheelevt, function(e){scroller(e)},false);
}
function scroller(evt)
{
//Guess the delta.
var delta = 0;
if (!evt) evt = window.event;
if (evt.wheelDelta) {
delta = evt.wheelDelta/120;
}
else if (evt.detail) {
delta = -evt.detail/3;
}
if(delta /120 > 0){
console.log('up');
}
else{
console.log('down');
}
}
}
});

Related

Javascript scrolling for navigation bar not showing up when scrolling back up [django]

I am new to programming and having an issue with my navigation bar. I have a fully functional nav bar and when I scroll down it hides as expected but does not pop back up when I scroll back up. This is the function I used for the scrolling:
var scrolled;
var lastscroll = 0;
var delta = 5;
var navHeight = $('header').outerHeight();
$(window).scroll(function(event){
scrolled = true;
});
setInterval(function() {
if (scrolled) {
hasScrolled();
scrolled = false;
}
}, 250);
function hasScrolled() {
var scrolltop = $(this).scrollTop();
if(Math.abs(lastscroll - scrolltop) <= delta)
return;
if (scrolltop > lastscroll && scrolltop > navHeight){
$('header').removeClass('nav-down').addClass('nav-up');
} else {
if(scrolltop + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = scrolltop;
}
Does anyone know what I am missing?

how to run javascript when screen size over certain width size?

I want to run certain javascript only when the window width is over 1024.
The script is long. I've tried to combine them with
if ($(window).width() >= 1024
but it still not working.
Can someone help me?
This is the script I want to run when the width is over 1024 :
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(window).load(function() {
$(window).on("scroll resize", function() {
var pos = $('#fixPlace').offset();
$('.post').each(function() {
if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
var newDescr = $(this).find('.feature__description').html();
var oldDescr = $("#fixPlace").html();
$('#fixPlace').html(newDescr);
if (newDescr !== oldDescr) {
$("#fixPlace").css('opacity', 0.4).animate({ 'opacity': '1', }, 200);
return;
}
}
});
});
$(document).ready(function() {
$(window).trigger('scroll');
});
});
let fixPlace = '#fixPlace';
let scrollStart = null;
let scrollEnd = null;
let floatBoxTop = 0.25 * $(window).height();
$(document).ready(function() {
scrollStart = $('#fixPlace').offset().top;
scrollEnd = $('.transition').offset().top - 680;
})
$(window).scroll(scroll)
function scroll() {
let scrollTop = $(document).scrollTop() + floatBoxTop;
scrollTop = Math.min(scrollEnd, Math.max(scrollTop, scrollStart))
if (scrollTop === scrollStart || scrollEnd === scrollTop) {
$(fixPlace).css({
position: 'absolute',
top: scrollTop
});
} else {
$(fixPlace).css({
position: 'fixed',
top: floatBoxTop
});
}
}

How can I control the mouse scroll event and after that do an animation on the html, body?

I'm facing a very strange error, which is animation on body during mouse scroll. I think its happening because of the jQuery event window.scroll. I have tried a lot of things like unbinding of animation on mouse scroll, but nothing works. Below is my code.
$(document).on("scroll", function () {
var lastScrollTop = 0;
var windowHeight = $(window).scrollTop();
var seccion1 = $("#seccion1").height();
var seccion2 = $("#seccion2").offset().top;
var alturaseccion2 = $("#seccion2").height();
//this function returns in which section is the user with the scroll
var localizacion = comprobarSeccion(seccion1, seccion2);
if (windowHeight > lastScrollTop) {
// down scroll
console.log("scrollabajo");
if (localizacion == 1) {
$("html, body").animate({
scrollTop: $("#seccion2").offset().top
}, 2);
$(document).bind("scroll");
} else if (localizacion == 2) {
if (windowHeight >= ((alturaseccion2 * 0.80) + seccion2) && windowHeight <= (alturaseccion2 + seccion2)) {
} else {
}
}
} else {
// up scroll
console.log("scrollarriba");
}
lastScrollTop = windowHeight;
});
ยดยดยด
I'm not sure what you are trying to accomplish, but if your trying to trigger an event with a specific scroll value you can use the code below
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
alert("scroll is greater than 500 px)
} else if(scroll==500){
alert("scroll has hit 500px");
}
});

Calling javascript function's result into Jquery css event, on load and resize

I want to call logoSocialHeight() function's result into $('header.main').css('top',logoSocialHeight()).hover(
It should only trigger this when the window loads or viewport will be resized. I try to call everything here below 1600px screen resolution. However logoSocialHeight() only works if I first loading the webpage more than 1600px resolution, than I shrink it down to below 1600px and it will be triggered, otherwise not.
Is there a Jquery way of window.addEventListeners, like with $(window).on('load resize'?
function logoSocialHeight() {
var logoHeight = $('header.main .logo').outerHeight(true);
var socialHeight = $('header.main .social-links').outerHeight(true);
var sum = -Math.abs(logoHeight + socialHeight - 10);
console.log(sum);
return sum;
};
window.addEventListener('load', logoSocialHeight, false);
window.addEventListener('resize', logoSocialHeight, false);
function bindNavUp() {
var lastScrollTop = 0, delta = 5;
$(window).on('scroll', function() {
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta) {
return;
};
if (st > lastScrollTop) {
// downscroll code
$('header.main').css('top',logoSocialHeight()).hover(
function() {
$('header.main').css('top','0');
}
);
}
else {
// upscroll code
$('header.main').css('top','0');
};
lastScrollTop = st;
});
};
function unbindNavUp() {
$(window).unbind('scroll');
};
function handleNavUp() {
if ($(window).width() < 1600) {
bindNavUp();
}
else {
unbindNavUp();
};
};
$(document).ready(function() {
var timer;
$(window).on('load resize scroll', function() {
clearTimeout(timer);
timer = setTimeout(function() {
handleNavUp();
}, 100);
});
handleNavUp();
});
UPDATE:
Working, simplified code:
function logoSocialHeight() {
var logoHeight = $('header.main .logo').outerHeight(true);
var socialHeight = $('header.main .social-links').outerHeight(true);
var sum = -Math.abs(logoHeight + socialHeight - 10);
//console.log(sum);
return sum;
};
function bindNavUp() {
var lastScrollTop = 0, delta = 5;
$(window).on('scroll', function() {
var st = $(this).scrollTop();
if(Math.abs(lastScrollTop - st) <= delta) {
return;
};
if (st > lastScrollTop) {
// downscroll code
$('header.main').css('top',logoSocialHeight()).hover(
function() {
$('header.main').css('top','0');
}
);
}
else {
// upscroll code
$('header.main').css('top','0');
};
lastScrollTop = st;
});
};
function unbindNavUp() {
$(window).unbind('scroll');
};
$(window).on('load resize', function() {
if ($(this).width() < 1600) {
bindNavUp();
}
else {
unbindNavUp();
};
});
I would comment but sadly am < 50 rep so I am not allowed to and am forced to write here. I am not sure if this will help you since I am not too familiar with JQuery, however when you are adding event listeneers in plain JavaScript you cannot use parentheses "()" while registering. You need to only name the function.
$('header.main').css('top',logoSocialHeight).hover(

section snap to window (firefox issue)

I have written a simple custom section snapping script, works great in chrome and safari, but after nothing happens in firefox...
What it is does:
When scrolling stops it checks the direction and location of each secrion... if the top of a section is within a certain range either go to the top of the page or bottom. (scroll directions is also checked). Also, it accounts for the height of a fixed header. Like I said works in Chrome and Safari. Any ideas what's wrong?
$( document ).ready(function() {
var animating = false;
var mainHeader = $('#main-header');
var items = $("section");
var lastOffset = 0;
var scrollDir = 'none';
$(window).scroll(function() {
var windowHeight = $(this).height();
var currOffset = $(this).scrollTop();
var headerHeight = mainHeader.outerHeight();
if (currOffset > lastOffset) {
scrollDir = 'down';
} else {
scrollDir = 'up';
}
lastOffset = currOffset;
clearTimeout($.data(this, 'scrollTimer'));
if (!animating) {
$.data(this, 'scrollTimer', setTimeout(function() {
items.each(function(key, value) {
var currentItem = $(value);
var sectionOffset = currentItem.offset().top;
var sectionDist = sectionOffset - currOffset;
if ( scrollDir === 'up' && sectionDist > windowHeight*0.15 && sectionDist < windowHeight ) {
animating = true;
$('body').animate( { scrollTop: sectionOffset-windowHeight + 'px' }, 250);
setTimeout(function() { animating = false; }, 300);
return false;
}
else if ( scrollDir === 'down' && sectionDist < windowHeight*0.85 && sectionDist > 0 ) {
animating = true;
$('body').animate( { scrollTop: sectionOffset-headerHeight + 'px' }, 250);
setTimeout(function() { animating = false; }, 300);
return false;
}
});
}, 200));
}
});
});
Found the answer here...
Animate scrollTop not working in firefox
Firefox places the overflow at the html level, unless specifically styled to behave differently.
To get it to work in Firefox, use
$('body,html').animate( ... );

Categories