I want to run the following function when screen width is equal or above 1024px
//Fade elements on Scroll
var divs = $('.fader');
$(window).on('scroll', function() {
var st = $(this).scrollTop();
divs.css({ 'opacity' : (1 - st/300) });
});
I tried to add if($(window).width() >= 1024){
So its now looks like this:
var divs = $('.fader');
if($(window).width() >= 1024){
$(window).on('scroll', function() {
var st = $(this).scrollTop();
divs.css({ 'opacity' : (1 - st/300) });
});
}
But it did not work, what I am doing wrong?
I am not sure but you can try. I think You have use resize event
$(window).on('resize', function () {
var divs = $('.fader');
if ($(window).width() >= 1024) {
$(window).on('scroll', function () {
var st = $(this).scrollTop();
divs.css({
'opacity': (1 - st / 300)
});
});
} else {
$(window).off('scroll');
}
}).trigger('resize');
Related
I ran into a problem when creating a scroll for headlines.
I looked at the element code, the code swears at the element "..offset().top"
$(function() {
var header = $("header"),
introH = $("#intro").innerHeight(),
scrollOffset = $(window).scrollTop()
// scroll
checkScroll(scrollOffset)
$(window).on("scroll", function() {
scrollOffset = $(this).scrollTop()
checkScroll(scrollOffset)
})
function checkScroll() {
if (scrollOffset >= introH) {
header.addClass("fixed")
} else {
header.removeClass("fixed")
}
}
// scroll keys
$("[data-scroll]").on("click", function(event) {
event.preventDefault();
var
blockId = $(this).data("scroll"),
blockOffset = $(blockId).offset().top /* This line */
$("html, body").animate({
scrollTop: blockOffset
}, 500)
})
})
enter image description here
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
});
}
}
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");
}
});
Im new in Javascript, Im sorry for the armature questions
i have a fadein code only for one class that works perfect, here is the code:
jQuery(document).ready(function($) {
var fadeinbig = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.fadeinbig').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('fadeinbig')) {
$(this).removeClass('fadeinbig');
}
});
}
fadeinbig();
$(window).on('scroll resize', fadeinbig);
I would like to add some more classes like, fadeinleft, fadeinright, etc.
like this:
jQuery(document).ready(function($) {
var fadeinbig = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.fadeinbig').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('fadeinbig')) {
$(this).removeClass('fadeinbig');
}
});
}
fadeinbig();
$(window).on('scroll resize', fadeinbig);
});
jQuery(document).ready(function($) {
var faidinbottom = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.faidinbottom').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('faidinbottom')) {
$(this).removeClass('faidinbottom');
}
});
}
faidinbottom();
$(window).on('scroll resize', faidinbottom);
});
jQuery(document).ready(function($) {
var faidintop = function() {
var scroll = $(window).scrollTop() + $(window).height(),
offset = $(window).height() / 2;
$('.faidintop').each(function(){
if (scroll-offset > $(this).position().top && $(this).hasClass('faidintop')) {
$(this).removeClass('faidintop');
}
});
}
faidintop();
$(window).on('scroll resize', faidintop);
If you ask me why my code is with removeClass, not with addClass, it is becouse it is easer for me to manipulate whit my content, without changing the base css styles of my website. I just add some classes "faidintop, faidinbottom etc." to the style sheet, then to the class of a div, and the magic happens.
I will be very grateful if some one could help me whit this, or at least give me some directions, how to do it the right way.
How to make this function add the class after scrolling 100vh?
Currently it adds the class after 850px.
$("document").ready(function($){
var nav = $('#verschwinden');
$(window).scroll(function () {
if ($(this).scrollTop() > 850) {
nav.addClass("doch");
} else {
nav.removeClass("doch");
}
});
});
100vh in jQuery is simple as $(window).height() while in pure JavaScript is window.innerHeight or a bit more longer.
jsFiddle demo
jQuery(function($) {
var $nav = $('#verschwinden');
var $win = $(window);
var winH = $win.height(); // Get the window height.
$win.on("scroll", function () {
if ($(this).scrollTop() > winH ) {
$nav.addClass("doch");
} else {
$nav.removeClass("doch");
}
}).on("resize", function(){ // If the user resizes the window
winH = $(this).height(); // you'll need the new height value
});
});
you can also make the if part a bit shorter by simply using:
$nav.toggleClass("doch", $(this).scrollTop() > winH );
demo