We Keep Coding

Add/Remove Class of Nav Objects on Page Scroll

I am trying to change classes of objects in my navbar on scroll for a website I am developing. Basically, when I scroll to certain parts of a webpage I want the links to appear active and to remove the active class when they have been scrolled over.
I have managed to get the links to appear active but can't get it too remove the class. This is what I have so far but it isn't working:
$(document).on('scroll', function() {
if ($(this).scrollTop() >= $('#cards').position().top) {
$("#navcard").addClass("active");;
} else {
$("navcard").removeClass("active")
}
if ($(this).scrollTop() >= $('#projects').position().top) {
$("#navprojects").addClass("active");;
} else {
$("navprojects").removeClass("active")
}
if ($(this).scrollTop() >= $('#dave').position().top) {
$("#navdave").addClass("active");;
} else {
$("navdave").removeClass("active")
}
})
#cards,
#projects,
#dave {
height: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navacard">My navacard</div>
<div id="navprojects">My navprojects</div>
<div id="navdave">My navdave</div>
<br>
<div id="cards">My navacard</div>
<div id="projects">My navprojects</div>
<div id="dave">My navdave</div>
I hope someone can help.
Edit: this is what is now happening:

You forgot to add the # in the removeClass parts:
$(document).on('scroll', function() {
if ($(this).scrollTop() >= $('#cards').position().top) {
$("#navcard").addClass("active");;
} else {
$("#navcard").removeClass("active")
}
if ($(this).scrollTop() >= $('#projects').position().top) {
$("#navprojects").addClass("active");;
} else {
$("#navprojects").removeClass("active")
}
if ($(this).scrollTop() >= $('#dave').position().top) {
$("#navdave").addClass("active");;
} else {
$("#navdave").removeClass("active")
}
})
Update
Try changing your code to this and let me know what the results of each console.log is:
$(document).on('scroll', function() {
console.log($(this).scrollTop());
console.log($('#cards').position().top);
console.log($('#projects').position().top);
console.log($('#dave').position().top);
if ($(this).scrollTop() >= $('#cards').position().top) {
$("#navcard").addClass("active");;
} else {
$("#navcard").removeClass("active")
}
if ($(this).scrollTop() >= $('#projects').position().top) {
$("#navprojects").addClass("active");;
} else {
$("#navprojects").removeClass("active")
}
if ($(this).scrollTop() >= $('#dave').position().top) {
$("#navdave").addClass("active");;
} else {
$("#navdave").removeClass("active")
}
})

jquery window.scroll doesn't work properly

in this page I have 3 window.scroll functions but my events isn't working properly but if I remove another 2 window.scroll the very first window.scroll function works as expected.My jquery codes are in below
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.sizi-arayalim').fadeIn();
} else {
$('.sizi-arayalim').fadeOut();
}
});
$(document).scroll(function() {
if (!$("#aniStickyNav").length) {
return false; //Check if the element exist
}
var y = $(this).scrollTop();
if (y > $(".after-scroll-sticky").offset().top+$(".hotel-search-box").height()) {
$('#aniStickyNav').show();
} else {
$('#aniStickyNav').hide();
}
});
$(document).scroll(function(){
if(!$(".hotel-search-box").length){
return false;
}
var y = $(this).scrollTop();
if (y > $(".hotel-search-box").offset().top) {
$('.sticky-checkin').show();
} else {
$('.sticky-checkin').hide();
}
});

you can use if (!$("#aniStickyNav").length) {
return false;
without putting into scroll function,
and try to combine others into just one.

Detect touch scroll up or down

I need code same this for touch devices . help me please
$(window).on('DOMMouseScroll mousewheel', function (e) {
if (ScrollEnable) {
if (e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
console.log('Down');
} else {
console.log('Up');
}
}
return false;
});
and here is my touch code, But consul just take up i need find down for my website ! what can i do :|
$('body').on({
'touchmove': function(e) {
if (e.originalEvent.touches > 0 || e.originalEvent.touches > 0) {
console.log('Down');
} else {
console.log('Up');
}
}
});

var updated=0,st;
$('body').on({
'touchmove': function(e) {
st = $(this).scrollTop();
if(st > updated) {
console.log('down');
}
else {
console.log('up');
}
updated = st;
}
});

You can use scroll event
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
// downscroll code
} else {
// upscroll code
}
lastScrollTop = st;
});

I know my solution is a bit more generic - it is not dependend on any element, but it might help someone that has encountered the same problem as me.
var touchPos;
// store the touching position at the start of each touch
document.body.ontouchstart = function(e){
touchPos = e.changedTouches[0].clientY;
}
// detect wether the "old" touchPos is
// greater or smaller than the newTouchPos
document.body.ontouchmove = function(e){
let newTouchPos = e.changedTouches[0].clientY;
if(newTouchPos > touchPos) {
console.log("finger moving down");
}
if(newTouchPos < touchPos) {
console.log("finger moving up");
}
}

The only way that I could (and tested) detect scroll down/up on mobile devices (android & ios, touch devices):
(other events such as scroll, mousewheel, DOMMouseScroll, nmousewheel and wheel do not work on mobile devices)
jQuery:
let touchStartPosX = 0;
// Detect Scroll Down and Up in mobile(android|ios)
$(window).on('touchmove', (e) => {
// Different devices give different values with different decimal percentages.
const currentPageX = Math.round(e.originalEvent.touches[0].screenY);
if (touchStartPosX === currentPageX) return;
if (touchStartPosX - currentPageX > 0) {
console.log("down");
} else {
console.log("up");
}
touchStartPosX = currentPageX;
});
Vanilla:
let touchStartPosX = 0;
window.addEventListener('touchmove', (e) => {
// Different devices give different values with different decimal percentages.
const currentPageX = Math.round(e.changedTouches[0].screenY);
if (touchStartPosX === currentPageX) return;
if (touchStartPosX - currentPageX > 0) {
console.log("down");
} else {
console.log("up");
}
touchStartPosX = currentPageX;
});

This w3schools.com documentation would help you out http://www.w3schools.com/jquerymobile/jquerymobile_events_scroll.asp
$(document).on("scrollstop",function(){
alert("Stopped scrolling!");
});

scroll through "stack" of DOM objects

I have this fiddle:
https://jsfiddle.net/72p0rkqd/
html:
<section id="contact"></section>
<section id="works"></section>
<section id="about"></section>
<section id="home"></section>
css:
section {
display: flex;
position: fixed;
width: 100vw;
min-height: 100vh;
}
#home {
background-color: black;
}
#about {
background-color: red;
}
#works {
background-color: purple;
}
#contact {
background-color: blue;
}
which reflects my site
right now, the four sections lay on top of each other.
what I want is when we begin to scroll at the site, it will scroll through the stack of sections. When we scroll, it will first scroll through #home, so #home scrolls up, making #about visible, and when #home is not on the screen anymore, it will begin scrolling #about upwards, making #works visible and so on. When you then scroll up on the page, the sections should begin stacking themself again, reverting the downscroll process.
How can this be done?

Here a solution I found. Maybe it's not the best answer and it certainly have to be improved.
I got it using animate() to move up/down the sections and "DOMMouseScroll" & "mousewheel" to get wheel moves from jQuery.
I had to use some flags to prevent from long scrolls.
Here is the jQuery :
var homeAnimating = false;
var aboutAnimating = false;
var worksAnimating = false;
var contactAnimating = false;
$('#home').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
//scroll down
if(homeAnimating) {
return;
}
$('#home').animate({
'marginTop' : "-=100vh" //moves up
});
homeAnimating = true;
aboutAnimating = false;
}
//prevent page from scrolling
return false;
});
$('#about').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
//scroll down
if(aboutAnimating) {
return;
}
$('#about').animate({
'marginTop' : "-=100vh" //moves up
});
aboutAnimating = true;
worksAnimating = false;
} else {
//scroll up
if(aboutAnimating) {
return;
}
$('#home').animate({
'marginTop' : "+=100vh" //moves down
});
aboutAnimating = true;
homeAnimating = false;
}
//prevent page fom scrolling
return false;
});
$('#works').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
//scroll down
if(worksAnimating) {
return;
}
$('#works').animate({
'marginTop' : "-=100vh" //moves up
});
worksAnimating = true;
contactAnimating = false;
} else {
//scroll up
if(worksAnimating) {
return;
}
$('#about').animate({
'marginTop' : "+=100vh" //moves down
});
aboutAnimating = false;
worksAnimating = true;
}
//prevent page fom scrolling
return false;
});
$('#contact').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
} else {
//scroll up
if(contactAnimating) {
return;
}
$('#works').animate({
'marginTop' : "+=100vh" //moves down
});
contactAnimating = true;
worksAnimating = false;
}
//prevent page fom scrolling
return false;
});
And here is the fiddle : https://jsfiddle.net/fkahogqd/
Hope it helps.
EDIT
Ok, that was a little tricky but I assume that's what you're looking for :
Here is the new jQuery :
var winHeight = $(window).height();
$('section').on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
var homePos = parseInt($('#home').css('marginTop'),10);
var aboutPos = parseInt($('#about').css('marginTop'),10);
var worksPos = parseInt($('#works').css('marginTop'),10)
//scroll down
$('#home').animate({
'marginTop' : "-=5vh" //moves up
},2);
if (homePos <= - winHeight) {
$('#home').stop();
$('#about').animate({
'marginTop' : "-=5vh"
},2);
}
if (aboutPos <= - winHeight) {
$('#about').stop();
$('#works').animate({
'marginTop' : "-=5vh"
},2);
}
if (worksPos <= - winHeight) {
$('#works').stop();
}
} else {
var homePos = parseInt($('#home').css('marginTop'),10);
var aboutPos = parseInt($('#about').css('marginTop'),10);
var worksPos = parseInt($('#works').css('marginTop'),10)
$('#works').animate({
'marginTop' : "+=5vh" //moves up
},2);
if (worksPos >= 0) {
$('#works').stop();
$('#about').animate({
'marginTop' : "+=5vh"
},2);
}
if (aboutPos >= 0) {
$('#about').stop();
$('#home').animate({
'marginTop' : "+=5vh"
},2);
}
if (homePos >= 0) {
$('#home').stop();
}
}
});
And here is the fiddle : https://jsfiddle.net/fkahogqd/5/
Hope it helps.

Nav won't change size upon scrolling

So I found this jquery code to make my nav change its size when a user begins to scroll. It doesn't appear to be working, though...
$(function(){
$('.nav').data('size','big');
});
$(window).scroll(function(){
var $nav = $('.nav');
if ($('body').scrollTop() > 0) {
if ($nav.data('size') == 'big') {
$nav.data('size','small').stop().animate({
height:'60px'
}, 600);
}
} else {
if ($nav.data('size') == 'small') {
$nav.data('size','big').stop().animate({
height:'40px'
}, 600);
}
}
Here is all the code:
http://codepen.io/DerekDev/pen/Bydgpz
So if any of you have a solution, it would be greatly appreciated. Thanks :)

try this:
$(function() {
$(window).scroll(function() {
var nav = $('.nav');
if ($(window).scrollTop() >= 0) {
if(!nav.hasClass("smallNav")) {
nav.hide();
nav.removeClass('bigNav').addClass("smallNav").fadeIn( "slow");
}
} else {
if(!nav.hasClass("bigNav")) {
nav.hide();
nav.removeClass("sml-logo").addClass('bigNav').fadeIn( "slow");
}
}
});
});
and CSS rules:
.bigNav{
height:60px;
}
.smallNav{
height:40px;
}

Firstly, you want to check the window scrollTop, not the body
Secondly, you want to change the height of the UL, not the .nav element, and you seem to have the order mixed up, you probably want 40px when it's small, and 60px when it's big !
$(window).scroll(function(){
var $nav = $('.nav');
if ($(window).scrollTop() > 0) {
console.log($nav.data('size'))
if ($nav.data('size') == 'big') {
$nav.data('size','small').find('ul').stop().animate({
height:'40px'
}, 600);
}
} else {
if ($nav.data('size') == 'small') {
$nav.data('size','big').find('ul').stop().animate({
height:'60px'
}, 600);
}
}
});
PEN