Develop Reference

How to add active class in the <li> every time the user scroll on a certain section using jQuery

I have a code that will active the anchored link everytime I scroll but instead of the a href to be active I want the li before the link here is my code
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.left-nav a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.left-nav a li').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Any one can help me solve this problem?

Within $('.left-nav a').each(function () { you need to traverse up to the li
Store the parent li
var currLink = $(this);
var currParent = $(this).closest('li');
and replace currLink.addClass and currLink.removeClass with currParent.addClass and currParent.removeClass

Menu links highlight on one-page webiste, when standing on a current sector (id).

So I made an option to highlight the active menu link, when scrolling to the appropriate sector (id) of the one-page website. However, it is not working perfectly, as when I click on one opf the menu links in the navbar, sometimes it just jumps over to another one.
Can anybody help me resolve this?
JS:
$(document).ready(function () {
$(document).on("scroll", onScroll);
//Smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#myNavbar a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top +
refElement.height() > scrollPos) {
$('#myNavbar ul li a').removeClass("active");
currLink.addClass("active");
}else{
currLink.removeClass("active");
}
});
}
Sorry for an ugly code, as I just copy-paste-ed it here, without fixing it.
To see what am I talking/thinking about, you can look at my website on vlad095.github.io
Thank you!

Change :
if (refElement.position().top <= scrollPos && refElement.position().top +
refElement.height() > scrollPos)
to
if (refElement.position().top + 20 <= scrollPos && refElement.position().top +
refElement.height() - 20 > scrollPos)
you can play with that 20 and change it to what ever is best for you.

jQuery jQuery-min conflict

and let me tell you in advance that the no-conflict script didnt work either, my issue is this:
I have a site that i made, i made some animations for it, using the animate library and some other animations
$(document).ready(function ($) {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 1000, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.nav-ul-home a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.navbar-home ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 100) {
$(".navbar-home").addClass("navbar-section");
$(".nav-ul-home").addClass("nav-ul-section");
}
else{
$(".navbar-home").removeClass("navbar-section");
$(".nav-ul-home").removeClass("nav-ul-section");
}
});
$(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
// more then one submenu open?
this.multiple = multiple || false;
var dropdownlink = this.el.find('.dropdownlink');
dropdownlink.on('click',
{ el: this.el, multiple: this.multiple },
this.dropdown);
};
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el,
$this = $(this),
//this is the ul.submenuItems
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if(!e.data.multiple) {
//show only one menu at the same time
$el.find('.submenuItems').not($next).slideUp().parent().removeClass('open');
}
}
var accordion = new Accordion($('.accordion-menu'), false);
})
and this is my animations script
$(window).on('scroll', function (e) {
var top = $(window).scrollTop() + $(window).height(),
isVisible = top > $('#texto p').offset().top;
$('#texto p').toggleClass('animated fadeInUp', isVisible);
});
$(window).on('scroll', function ($) {
var top = $(window).scrollTop() + $(window).height(),
isVisible = top > $('in img').offset().top;
$('in img').toggleClass('magictime tinRightIn', isVisible);
});
$(window).on('scroll', function ($) {
var top = $(window).scrollTop() + $(window).height(),
isVisible = top > $('in p').offset().top;
$('in p').toggleClass('magictime puffIn', isVisible);
});
I only put some of it cause it basically repeats its self for every case....
now... I have links to both jquery and jquery-min i need the jquery for this code and the jquery-min for the contact form, the problem is that when i have both links the animations dont work...
if i remove the jquery-min link everything is fine but the contact form doesnt work...
maybe if someone has a contact form template that has JS but doesnt need jquery-min the problem is solve..
sorry for my aqward way to post im prety new here.
thanks!

Url won't change on scroll

As a beginner developer I'm trying to make a portfolio. I've added a little bit of code so that url changes on scroll. Active class also depends on this. Now while my code works fine on localhost, it stopped working after I uploaded it. I'd really appreciate some help. Code is like this:
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
$(document).bind('scroll',function(e){
$('section').each(function(){
if (
$(this).offset().top < window.pageYOffset + 10
&& $(this).offset().top + $(this).height() > window.pageYOffset + 10
) {
window.location.hash = $(this).attr('id');
}
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.sidebar a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.sidebar ul li a').removeClass("active");
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
and this is the website:

Separating two scripts for "scroll to div"

I've tried to do this myself but I guess I'm not skilled enough, I quit trying and came to ask for help.
I got this script for my menu on a one page website.
$(document).ready(function () {
$(document).on("scroll", onScroll);
//MENU
$('.menu ul li a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).attr('id', '');
})
$(this).attr('id', 'active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 1000, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('.menu ul li a').attr("id", "");
currentLink.attr("id", "active");
}
else{
currentLink.attr("id", "");
}
});
}
And it works perfectly as I want BUT I also have links throughout my website that I want them to do the same.
I did that myself but the 2 scripts were coliding with each other, it was applying the class active to the link as well. When I tried to reverse the situation, it was working but it wasn't applying the class active on the menu...
I was really confused and I also am not that much of a js/jquery programmer.
Could anyone have a suggestion for how to separate the scripts? For example here: <span>SOLICITE A NOSSA VISITA</span>. This sends the user to the div contactos but it doesn't animate and I want it to do so.
Any ideas?
EDIT: for this second script I don't want to apply any active class. Just slide to the desired div.
EDIT 2: I believe I wasn't clear. I want something like this
$(document).ready(function () {
$(document).on("scroll", onScroll);
//MENU
$('.menu ul li a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).attr('id', '');
})
$(this).attr('id', 'active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 1000, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
//OTHER LINKS
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 1000, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('.menu ul li a').attr("id", "");
currentLink.attr("id", "active");
}
else{
currentLink.attr("id", "");
}
});
}
BUT the "OTHER LINKS" script will interfere with the menu script. I don't know if I'm doing things right, what I know is that the way I do, it is not working.

You can use addClass and removeClass instead of attr.
$(document).ready(function () {
$(document).on("scroll", onScroll);
//MENU
$('.menu ul li a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');
var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 1000, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('.menu ul li a').removeClass("active");
currentLink.addClass("active");
}
else{
currentLink.removeClass("active");
}
});
}