Develop Reference

How to scroll from section to section on one mwheeldown

I have been making a navigation menu for a small project I'm making but because of my lack of knowledge in codeing, I got stuck.
I have attached a link to the navigation code and I can't seem to make it scroll from section to section on one mwheeldown.
In simple words: I want to skip to the next section each time I scroll down.
https://codepen.io/tonyexe/pen/NVrjJp
$(".navigation-container-versia a[href^='#']").on('click', function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top}, 500);
}
});
function getTargetTop(elem){
var id = elem.attr("href");
var offset = 60;
return $(id).offset().top - offset;
}
$(window).on("load scroll", function(e){
isSelected($(window).scrollTop())
});
var sections = $(".navigation-container-versia a[href^='#']");
function isSelected(scrolledTo){
var threshold = 100;
var i;
for (i = 0; i < sections.length; i++) {
var section = $(sections[i]);
var target = getTargetTop(section);
if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
sections.removeClass("active");
section.addClass("active");
}
};

Change scrollTop offset when scrolling up, and different offset on scrollDown

I got an issue, where I have an dynamic header that gets bigger when scrolling up and smaller when scrolling down and therefore needs to change scrollTop offsets.
So i've been looking around and tried with my no existent java skills with no success.
This jquery code:
$(document).on('click', 'a[href^="#"]', function(e) {
var id = $(this).attr('href');
var $id = $(id);
if ($id.length === 0) {
return;
}
e.preventDefault();
// top position relative to the document
var pos = $(id).offset().top-500; // move this one
$('body, html').animate({scrollTop: pos});
});
var iScrollPos = 0;
$(window).scroll(function () {
var iCurScrollPos = $(this).scrollTop();
if (iCurScrollPos > iScrollPos) {
var pos = $(id).offset().top-500; //here when scrolling down
} else {
var pos = $(id).offset().top-100; // Here when scrolling up
}
iScrollPos = iCurScrollPos;
});
I made a JS fiddle to show what I'm trying to achieve: https://jsfiddle.net/zq9y7nge/1/
So, Is it possible to change offset depending on scrolling up and down?

Strange behavior with window.scroll function and removing classes

I do have a strange problem with my jquery script on the following site: http://www.zugestellt.com
When I scroll down or up, the current area is highlighted correctly in menu (added class "current-menu-item").
Now the strange thing:
If I choose a menu item by click the class "current-menu-item" isn't deleted anymore from the menu item that I clicked.
Here is my code:
(function($){
var lastId,
topMenu = $("#header #menu"),
topMenuHeight = topMenu.outerHeight() + 15,
menuItems = topMenu.find("a"),
scrollItems = menuItems.map(function(){
var href = $(this).attr("href");
href = '.scroll-' + href.replace('/#','').toLowerCase();
var item = $( $(href) );
if (item.length) { return item; }
});
menuItems.parents('li').removeClass("current-menu-item");
$(document).on('click', "#header #menu a" ,function(e) {
var href = $(this).attr("href");
href = '.scroll-' + href.replace('/#','').toLowerCase();
var offsetTop = href === "#" ? 0 : $(href).offset().top - topMenuHeight + 1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
$(window).scroll(function(){
var fromTop = $(this).scrollTop() + topMenuHeight;
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
cur = cur[cur.length-1];
var id = '';
if(cur && cur.length) {
id = $.grep(cur[0].className.split(" "), function(v, i){
return v.indexOf('scroll-') === 0;
}).join();
}
if (lastId !== id) {
lastId = id;
var new_url = id.replace('scroll-','/#');
menuItems
.parents('li')
.removeClass("current-menu-item")
.end()
.filter('a[href*="' + new_url + '"]')
.parents('li')
.addClass("current-menu-item");
}
});
})(jQuery);
Now,if you are wondering why I don't work with hashes to choose the right section, this is a template from themeforest and the sitebuilder from this theme doesn't allow to add ids but classes.
Hope anyone can help me.

when you click again on menu it add .sfHover class .. So you need to remove it as well .. try this
menuItems
.parents('li')
.removeClass("current-menu-item")
.removeClass("sfHover")
.end()
.filter('a[href*="' + new_url + '"]')
.parents('li')
.addClass("current-menu-item");

use jquery to add class both on click of nav item AND scroll past div

I am looking to use jquery to add a class of "selected" both on clicking of a nav item as well as scrolling past that section div.
So far I have got the class added on clicking of the nav item but I am unsure how to neatly add the same affect when scrolling past each section div.
Here's my script for adding the class on click (which is pretty straightforward and standard):
$('#fixednav li').click(function(){
$('#fixednav li').removeClass("selected");
$(this).addClass("selected");
});
...It all works great when user clicks the items in the fixed menu. But how do I add the selected class when user just scrolls down the page without using the fixed menu? Each section has a div id so I would think it would be easy to add something in to add the class on scroll past the div id....
Here's my fiddle
Scroll down a bit to see the fixed nav pop in....

i had the same issue and i used scrollspy to fix it here is the link and demo on bootstrap :
scrollspy
if you get some pb please let me know.

Check if this helps you fiddle
This is the js used, check the fiddle for html and css.
var hei = $("#header").height();
$(window).scroll(function(){
if($(window).scrollTop() > hei){
$("#header").addClass('fixed');
$('.body-wrapper').css('margin-top',hei);
}else{
$("#header").removeClass('fixed');
$('.body-wrapper').css('margin-top','0');
}
});
$("#header li a").on('click', function(event){
event.preventDefault();
var header_height = $("#header").height();
var target = $(this).attr('href');
$('html, body').animate({
scrollTop: $(target).offset().top-header_height
}, 1000);
});
var aChildren = $("#header li").children(); // find the a children of the list items
var aArray = []; // create the empty aArray
for (var i=0; i < aChildren.length; i++) {
var aChild = aChildren[i];
var ahref = $(aChild).attr('href');
aArray.push(ahref);
} // this for loop fills the aArray with attribute href values
$(window).scroll(function(){
var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
var windowHeight = $(window).height(); // get the height of the window
var docHeight = $(document).height();
for (var i=0; i < aArray.length; i++) {
var theID = aArray[i];
var divPos = $(theID).offset().top-hei-30; // get the offset of the div from the top of page
var divHeight = $(theID).height(); // get the height of the div in question
if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
$("a[href='" + theID + "']").addClass("nav-active");
} else {
$("a[href='" + theID + "']").removeClass("nav-active");
}
}
});

Scrollspy not working due to href link

The scrollspy effect was working fine, but suddenly it stopped working.
This is my code:
/ Cache selectors
var lastId,
topMenu = $("#timenav"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});
When I checked above code not working when.
"/home#id" is used instead of "#id" in the href attributes
can someone help me with this
http://www.drkeenly.com/
Any help would be great. Thanks in advance !