We Keep Coding

How to remove or add class in nav when the browser window goes down or up

I have nav with four elements. I try add class (eg. with underline in css) in this element witch user is on. But when user scroll up or down I want remove that class and add in diffrent element in nav depending on where the user stayed.
Here is my code:
let currentPosition = window.scrollY;
let basicFunctionPosition = document.querySelector("#basic-function").offsetTop;
let moreFunctionsPosition = document.querySelector("#more-functions").offsetTop;
let signUpPosition = document.querySelector("#sign-up").offsetTop;
let teamPosition = document.querySelector('#team').offsetTop;
let dataSectionInNav = "";
let dataSectionInNavTeam = "";
if (currentPosition > basicFunctionPosition && currentPosition < moreFunctionsPosition) {
dataSectionInNav = document.querySelector(".data-section-basic-func");
dataSectionInNav.classList.add("sectionPositionInNav");
} else if (currentPosition > moreFunctionsPosition && currentPosition < signUpPosition) {
dataSectionInNav = document.querySelector(".data-section-more-func");
dataSectionInNav.classList.add("sectionPositionInNav");
} else if (currentPosition > signUpPosition && currentPosition < teamPosition) {
dataSectionInNav = document.querySelector(".data-section-sign-up");
dataSectionInNav.classList.add("sectionPositionInNav");
dataSectionInNavTeam = document.querySelector(".data-section-team");
dataSectionInNavTeam.classList.add("sectionPositionInNav");
}
});

You need to loop over your conditionals when the user scrolls:
// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/
let last_known_scroll_position = 0;
let ticking = false;
function doSomething(scroll_pos) {
// Do something with the scroll position
}
window.addEventListener('scroll', function(e) {
last_known_scroll_position = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
doSomething(last_known_scroll_position);
ticking = false;
});
ticking = true;
}
});
The example above uses requestAnimationFrame to ease the rate at which your function runs.
Check the Docs for more information.

Afterwards I use this code,
document.addEventListener("scroll", function () {
let currentPosition = window.scrollY;
let basicFunctionPosition = document.querySelector("#basic-function").offsetTop;
let moreFunctionsPosition = document.querySelector("#more-functions").offsetTop;
let signUpPosition = document.querySelector("#sign-up").offsetTop;
let teamPosition = document.querySelector("#team").offsetTop;
let addClass = "";
let delateClass = "";
if (currentPosition < basicFunctionPosition) {
delateClass = document.querySelectorAll(".data-section-basic-func, .data-section-more-func, .data-section-sign-up, .data-section-team");
delateClass.forEach((item) => {
item.classList.remove("highlightNav");
});
} else if (currentPosition > basicFunctionPosition && currentPosition < moreFunctionsPosition) {
delateClass = document.querySelectorAll(".data-section-more-func, .data-section-sign-up, .data-section-team");
delateClass.forEach((item) => {
item.classList.remove("highlightNav");
});
addClass = document.querySelector(".data-section-basic-func");
addClass.classList.add("highlightNav");
} else if (currentPosition > moreFunctionsPosition && currentPosition < signUpPosition) {
delateClass = document.querySelectorAll(".data-section-basic-func, .data-section-sign-up, .data-section-team");
delateClass.forEach((item) => {
item.classList.remove("highlightNav");
});
addClass = document.querySelector(".data-section-more-func");
addClass.classList.add("highlightNav");
} else if (currentPosition > signUpPosition && currentPosition < teamPosition) {
delateClass = document.querySelectorAll(".data-section-basic-func, .data-section-more-func, .data-section-team");
delateClass.forEach((item) => {
item.classList.remove("highlightNav");
});
addClass = document.querySelector(".data-section-sign-up");
addClass.classList.add("highlightNav");
} else if (currentPosition > teamPosition) {
delateClass = document.querySelectorAll(".data-section-basic-func, .data-section-more-func, .data-section-sign-up");
delateClass.forEach((item) => {
item.classList.remove("highlightNav");
});
addClass = document.querySelector(".data-section-team");
addClass.classList.add("highlightNav");
}
});
Can you write the code more simply?

Complex jquery scroll

I need to trigger a function specifically after an user scroll almost at the bottom of the page then up until certain point. How do I do it properly?
advertisement.refreshAd = function() {
$(window).scroll(function(event) {
if('almost at the end then scroll up to certain point')
{console.log('trigger refresh!');}
});
}

What you are looking for is the jQuery function scrollTop(). The code would look something like this:
var atEnd = false;
advertisement.refreshAd = function() {
$(window).scroll(function(event) {
if($(document).scrollTop() > $(document).height()-500) { //point1
atEnd = true;
} if (($(document).scrollTop() < point2) && atEnd){
console.log('trigger refresh!');
}
});
}

Try below code
<script>
var touchedBottom = 0;
jQuery(window).scroll(function(event) {
if(jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
touchedBottom = 1;
console.log("touched Bottom");
}
if(touchedBottom){
if(jQuery(window).scrollTop() < jQuery("#point_2").offset().top){
touchedBottom = 0;
console.log("touched point 1");
}
}
});
</script>

advertisements.refreshAd = function() {
var furthestPoint = false;
var point2 = 1700 //will be dynamic;
var lastScrollTop = 0;
var scrolledToPosition = false;
$(window).scroll(function() {
var st = $(this).scrollTop();
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
furthestPoint = true;
}
if (st < lastScrollTop && st < point2 && furthestPoint){
if (!scrolledToPosition) {
console.log('TRIGGER! - once only!');
scrolledToPosition = true;
}
}
lastScrollTop = st;
});
};
advertisements.refreshAd();

Add class after scroll to section, when feel and animation to id

I search scripts, which will be behaviour during scroll: http://www.dishoom.com/.
I have three sections of the site and would like to scrollowaniu to the middle of the section equalized it to the upper position. The example is above
Regards

<script>
jQuery(document).ready(function ($) {
$(window).scroll(function () {
scroll = $(window).scrollTop();
var height_check = jQuery(window).height() ;
$(document).mousewheel(function (event) {
if (event.deltaY) {
$(window).scroll(function () {
if(scroll >= $("section#home_bg").offset().top)
{
$('section#barman').removeClass('snaps-active');
$('section#galeria').removeClass('snaps-active');
$('section#home_bg').addClass('snaps-active');
if(scroll >= ($("section#home_bg").offset().top + (0.5*height_check)))
{
$('section#home_bg').removeClass('snaps-active');
}
}
if (scroll >= $("section#barman").offset().top) {
$('section#barman').addClass('snaps-active');
$('section#galeria').removeClass('snaps-active');
$('section#home_bg').removeClass('snaps-active');
if(scroll >= ($("section#barman").offset().top + (0.5*height_check)))
{
$('section#barman').removeClass('snaps-active');
}
}
if(scroll >= ($("section#galeria").offset().top)) {
$('section#home_bg').removeClass('snaps-active');
$('section#barman').removeClass('snaps-active');
$('section#galeria').addClass('snaps-active');
if (scroll >= ($("section#galeria").offset().top + (0.5 * height_check))) {
$('section#galeria').removeClass('snaps-active');
}
}
});
}
});
});
});
</script>

Javascript scroll issue in Opencart theme

I'm working on a project based on Opencart with the theme Tranda Social (I think it's deprecated). The problem I'm facing is that at Home page ONLY I can't get the scroll-effects (eg. When scrolling-down keep the navbar in fixed position, or getting to the TOP by just clicking the button with the UP-arrow). After some research I've concluded that for some reason a Javascript function isn't get called correctly.
setTimeout(function () {
/* Menu */
$('#menu ul > li > a + div').each(function (index, element) {
var menu = $('#menu').offset();
var dropdown = $(this).parent().offset();
i = (dropdown.left + $(this).outerWidth()) - (menu.left + $('#menu').outerWidth());
if (i > 0) {
$(this).css('margin-left', '-' + (i + 5) + 'px');
}
});
/* Fixed Menu */
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#bottomh').addClass('bottomfixed');
} else {
$('#bottomh').removeClass('bottomfixed');
}
});
}
});
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#bottomh').addClass('bottomfixed');
} else {
$('#bottomh').removeClass('bottomfixed');
}
});
}
});
/* Margin Menu */
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#container').addClass(' topmargin');
} else {
$('#container').removeClass(' topmargin');
}
});
}
});
$(function () {
var msie6 = $.browser == 'msie' && $.browser.version < 7;
if (!msie6) {
var top = $('#bottomh').offset().top;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= top) {
$('#container').addClass(' topmargin');
} else {
$('#container').removeClass(' topmargin');
}
});
}
});
}, 500);
The functions after fixed-menu and margin-menu comments are NOT working when I'm navigating in Home page. Also if you notice, there is a duplicate of each function (don't know for what reason). Have you any ideas? Any help will be greatly appreciated.

It was a problem caused by Slidesshow module (Nivo Slider) because of a JS error related to it. Uninstall-reinstall the module fixes the problem.

prototype: show a element when scroll page pased 800px

If user up, then hide the element. A div.
i have something:
<script>
window.onscroll = function()
{
if (document.documentElement.scrollTop > 900 || self.pageYOffset > 900) {
$('#divId').css('display','block');
} else if (document.documentElement.scrollTop < 900 || self.pageYOffset < 900) {
$('#divId').css('display','none');
}
}
</script>
But not work.

Something like this:
$(window).scroll(function () {
var $someDiv = $("#someDiv"),
top = $(this).scrollTop();
if (top > 200) {
$someDiv.show();
} else {
$someDiv.hide();
}
});​
See this Fiddle.