We Keep Coding

Hide Menu After ScrollTop with JQuery/JS

I have a simple menu and when i click the "li" items the page automatically scrolls to that section. What I want to do is close my "dropMenu-nav" after scrolling finishes. I searched asked questions but I couldn't make it work. Here is my HTML :
<div class="dropMenu-nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>RESUME</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
And my JS code :
$(document).ready(function(){
let scrollNav = $('.scroll');
scrollNav.click(function(e){
e.preventDefault();
$('body, html').animate({
scrollTop: $(this.hash).offset().top
}, 1000);
*$('.dropMenu-nav').animate({
opacity: 0;
}, 2000);*
});
$(window).scroll(function() {
let scrollBarLocation = $(this).scrollTop();
scrollLink.each(function(){
let sectionOffset = $(this.hash).offset().top;
if (sectionOffset <= scrollBarLocation){
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
}
});
})
});
Scrolling part works perfectly but i cant find a way to hide my menu after scrolling. I don't see any error on my console also and I don't know where I am doing wrong to be honest. I would appreciate any help, thanks in advance for all your help.

The trick is to do the menu collapsing logic in the complete callback of jQuery.animate:
$('body, html').animate({
scrollTop: $(this.hash).offset().top
}, {
duration: 1000,
complete: function() {
document.body.classList.remove('nav-is-open');
}
});

If you want to close the menu after scroll then you will want to evaluate that code after the scroll completes. See the complete parameter in the jQuery.animate docs.
$('html,body').animate({
scrollTop: scrollTop: $(this.hash).offset().top
}, 1000, function () {
$('body').removeClass('nav-is-open')
})

Modify existing jQuery to change URL on Scroll

I have a jQuery code obtained from w3schools.com which ON CLICK (clicking an ) changes URL's #id and also allows smooth scrolling to a particular DIV section. But its not working on scroll. I want the same with an scrolling effect. When I scroll down or up to a particular section the URL's #id should change.
Current jQuery Code:
$(document).ready(function(){
$("#navlist a").on('click', function(event) {
if(this.hash !== ""){
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
I searched on stackoverflow and I got something like this:
$(document).bind('scroll',function(e){
$('div').each(function(){
if ($(this).offset().top < window.pageYOffset + 10 && $(this).offset().top + $(this).height() > window.pageYOffset + 10){
window.location.hash = $(this).attr('id');
}
});
});
This seems to work but when I place both the code either one of them is stopping the other one from executing. I thought of combining both the codes into one to achieve both onclick and scroll effect but I am not being able to do so (weak hands on jquery yet).
Example URL with ID: http://localhost/sites/fh/index.php#first
Please help me devs.

Instead of setting the location hash, you should change the history state. That way you will avoid forced page scrolling by browser. Check it below:
navlist = [];
$("#navlist a").each(function(i) {
var thisLink = $(this);
var thisId = thisLink.attr('href');
var thisTarget = $(thisId);
navlist.push({
'anchor': thisLink,
'id': thisId,
'target': thisTarget
});
thisLink.on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: thisTarget.offset().top
}, 800);
});
});
$(window).on('scroll resize', function(e) {
$.each(navlist, function(e, elem) {
var placement = elem.target[0].getBoundingClientRect();
if( placement.top<window.innerHeight && placement.bottom>0 ) {
history.pushState({}, '', elem.id);
console.log('Hash: ' + elem.id);
return false; /* Exit $.each loop */
};
});
});
nav a {
display: block;
}
section {
height: 600px;
border-top: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navlist">
Go to Section 1
Go to Section 2
Go to Section 3
</nav>
<section id="s1">Section 1 Content</section>
<section id="s2">Section 2 Content</section>
<section id="s3">Section 3 Content</section>
Also on JSFiddle.
Please note, if you are using Foundation framework, than you already have Magellan.
For Bootstrap it is called ScrollSpy.

Questions regarding changing active navigation item while scrolling with Javascript

I am completely new to Javascript and have been having trouble following the answers in this thread: Change navigation active class on window scroll
I edited the jsFiddle example with the classes of my navigation bar, and got that to work, but when I try to bring the script over to my actual website, it doesn't work anymore. Perhaps it has something to do with the "currLink" variable? I see that in the example they used the class "active" on the link, but in my site, which is based on Bootstrap, the active class is added to the list item tag.
Regardless, I have been unable to get it working, I was wondering if I'm overlooking something obvious.
Here is the HTML for my navbar:
<div id="navigation-bar" class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">home</li>
<li>philosophy</li>
<li>yoga works</li>
<li>start your journey</li>
<li>careers</li>
<li>contact</li>
</ul>
</div>
And the Javascript I'm attempting to use:
<script type='text/javascript'>/
$(window).load(function(){
$(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,
wrap = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('#navigation-bar a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
currLink.addClass("active");
}
else{
currLink.removeClass("active");
}
});
}
});
</script>
Obviously I need to learn Javascript so I can troubleshoot basic things like this on my own, but in the meantime, I need to finish this project. Thanks a bunch!

Menu Open & Close on menu button - Jquery

I'm trying to create a slide out menu, that open an closes on the same a tag. I've put something together but, it runs through the whole animation instead of pausing after opening.
HTML
<header>
<nav>
<ul class="slide-menu">
<li class="menu-element">How tall?</li>
<li class="menu-element">Books</li>
<li class="menu-element">Journal</li>
<li class="menu-element">Contact</li>
</ul>
<a id="puller" href="#">Menu</a>
</nav>
</header>
Jquery
$(document).ready(function()
{
$("#puller").click(function(){
$(".slide-menu").animate({
marginLeft: '+=360px'
}, 500);
});
$("#puller").click(function(){
$(".slide-menu").animate({
marginLeft: '-=360px'
}, 500);
});
});
Can anyone help with this?

Using jQuery toggle is a good idea. You can also simply maintain the state of the menu as to slided out already or not and take action like this
$(document).ready(function(){
var slide = false;
$("#puller").click(function(){
if(slide){
$(".slide-menu").animate({marginLeft: '-=360x'}, 500);
slide = false;
}else{
$(".slide-menu").animate({marginLeft: '+=360px'}, 500);
slide = true
}
});
});

Use jQuery Toggle, like so. Simple.
$(document).ready(function() {
var menu = $('.slide-menu');
var speed = 500; // set animation speed
$('#puller').toggle(
function(){
menu.animate({
marginLeft: '+=360px'
}, speed);
},
function(){
menu.animate({
marginLeft: '-=360px'
}, speed);
}
);
)};

I'm styling a drop down menu that onclick will appear and on blur will disappear

Unfortunately I am having issues with the disappearing of the drop down. I'm currently using toggleClass to add/remove the class on click but I also need this process undone when the menu is blurred ie: clicking anywhere else on the page etc. Here is my jquery code:
$(function() {$('#srt-btn').click(function() {$('ul.toggle-off').toggleClass('toggle-on')});});
<ul id="sort">
<li><a id="srt-btn" class="srt-title">Sort ▾</a>
<ul class="sort-menu toggle-off">
<div class="droid"></div>
<li class="top">Notes</li>
<li>Photos</li>
<li>Videos</li>
<li class="divider"></li>
<li class="btm">Make List</li>
</ul>
</li>

function toggleMenu()
{
$('ul.toggle-off').toggleClass('toggle-on');
}
$(function() {
$('#srt-btn').click(toggleMenu);
$('#srt-btn').blur(toggleMenu);
});
Working example.

you could also use stopPropagation to cancel click events
$(function() {
$('#srt-btn').click(
function(e) {
$('ul.sort-menu').slideToggle();
e.stopPropagation();
}
);
$('.sort-menu li').click(
function(e) {
$('ul.sort-menu').slideUp();
e.stopPropagation();
}
);
$(document).click(
function(){
$('ul.sort-menu').slideUp();
}
);
});
And don't forget about setting your menu options ul to position:absolute else your elements will shift
Here is a jsFiddle

You could try something like this:
var IsInside = false,
$sortMenu = $('#sort'),
$toggleOn = $('.toggle-off');
$sortMenu.on('mouseenter', '#srt-btn', function(){
IsInside = true;
}).on('mouseleave', '#srt-btn', function(){
IsInside = false;
});
$sortMenu.on('click', '#srt-btn', function(){
$toggleOn.toggleClass('toggle-on');
});
$(document).on('click', 'body', function(){
if(!IsInside) {
$toggleOn.removeClass('toggle-on');
}
});
Here a jsFiddle.