We Keep Coding

My Javascript scroll function is not working?

const hamburger = document.querySelector(
".header .nav-bar .nav-list .hamburger"
);
const mobile_menu = document.querySelector(".header .nav-bar .nav-list ul");
const menu_item = document.querySelectorAll(
".header .nav-bar .nav-list ul li a"
);
const header = document.querySelector(".header .container");
document.addEventListener("scroll", () => {
var scroll_position = window.scrollY;
if (scroll_position > 250) {
header.style.backgroundColor = "#29323c";
} else {
header.style.backgroundColor = "transparent";
}
});
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#hero">
<h1>ELITE.</h1>
</a>
</div>
<div class="nav-list">
<div class="hamburger"><div class="bar"></div></div>
<ul>
<li>Home</li>
<li>Services</li>
<li>Projects</li>
<li>Our CEO</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</section>
When I scroll past 250 the background color is not changing from transparent to the expected color in the JS code. How can I make MY JS respond on browser?

You used .header .container instead of #header .container
const hamburger = document.querySelector(
".header .nav-bar .nav-list .hamburger"
);
const mobile_menu = document.querySelector(".header .nav-bar .nav-list ul");
const menu_item = document.querySelectorAll(
".header .nav-bar .nav-list ul li a"
);
const header = document.querySelector("#header .container");
document.addEventListener("scroll", () => {
var scroll_position = window.scrollY;
if (scroll_position > 250) {
header.style.backgroundColor = "#29323c";
} else {
header.style.backgroundColor = "transparent";
}
});
#header {
position:fixed;
}
<section id="header">
<div class="header container">
<div class="nav-bar">
<div class="brand">
<a href="#hero">
<h1>ELITE.</h1>
</a>
</div>
<div class="nav-list">
<div class="hamburger"><div class="bar"></div></div>
<ul>
<li>Home</li>
<li>Services</li>
<li>Projects</li>
<li>Our CEO</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</div>
</section>
<div style="height:500vh"></div>

how to dynamically change active class in navbar using javascript

I'm trying to set the navbar to dynamically change class to 'active' in the current page when the user click on the <li> tag. Where did I go wrong?
dynamicNavbar();
function dynamicNavbar() {
$('.nav_w3ls .menu a').on('click', function() {
$('.nav_w3ls .menu').find('a.active').removeClass('active');
$(this).parent('a').addClass('active');
});
}
<div class="nav_w3ls ml-lg-5">
<nav>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Why Us</li>
<li>Pricing</li>
<li>Contact</li>
<li class="nav-right-sty mt-lg-0 mt-sm-4 mt-3">
Login
Register
</li>
</ul>
</nav>
</div>
I expect the navbar to be active for the current page

First you need to get you page name. Then you add the class to the a element that has this page name as href attribute.
$(document).ready(function() {
$('.nav_w3ls .menu').find('a.active').removeClass('active');
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
$('.nav_w3ls .menu').find('a[href=' + sPage + ']').addClass('active');
});

dynamicNavbar();
function dynamicNavbar() {
$('.nav_w3ls .menu a').on('click', function() {
$('.nav_w3ls .menu').find('a.active').removeClass('active');
$(this).addClass('active');
});
}
<div class="nav_w3ls ml-lg-5">
<nav>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Why Us</li>
<li>Pricing</li>
<li>Contact</li>
<li class="nav-right-sty mt-lg-0 mt-sm-4 mt-3">
Login
Register
</li>
</ul>
</nav>
</div>
Your code worked just fine, the only issue was on the last line. You didn't have to call the "parent method" on the 'this'.
$(this).addClass('active');

Menu is initially open on page load, should be closed until clicked

This may be a silly question but I cannot figure out why my menu displays when the page is loaded. I would like to have it closed and then opened when it is clicked but it is the other way around and I can't seem to fix it.
<html>
<head>
<script>
$(document).ready(function () {
$('#nav p')
.css({ cursor: "pointer" })
.on('click', function () {
var txt = $(this).text() == "MENU" ? "CLOSE" : "MENU";
$(this).text(txt);
$(this).next('ul').toggle();
})
});
</script>
</head>
<body>
<div class="left" id="nav">
<p>CLOSE</p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active" href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li>
</ul>
</div>
</body>
</html>

$(document).ready(function(){
$('#nav p')
.css({cursor: "pointer"})
.on('click', function(){
var txt = $(this).text() === "MENU"?"CLOSE":"MENU"; // 3 egals verification
$(this).text(txt);
$(this).next('ul').toggle();
})
});
ul{
display: none; /* ADD this */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="left" id="nav">
<p>CLOSE</p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active"href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li></ul>
</div>
</body>
</html>

You can do most of the stuff from CSS. Create .closed class and assign it to #nav.
#nav.closed > ul{
display: none;
}
That's it. You are done with minor changes in jQuery click event!
See the snippet below.
$(document).ready(function(){
$('#nav p').on('click', function(){
$(this).parent().toggleClass("closed");
});
});
#nav{
cursor: pointer;
}
#nav.closed p::after{
content : "CLOSE";
}
#nav p::after {
content: "MENU";
}
#nav.closed > ul{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="left closed" id="nav">
<p></p>
<ul>
<li id="light">
Lighting + Video
</li>
<li id="photo">
<a class="active"href="photograms.html">Photograms</a>
</li>
<li id="about">
About
</li>
</ul>
</div>
</body>
</html>

jQuery Animate inline style issue

I cant fix one bug in my code. I create on click slide up/down div, but yet when i click it 4 times very fast my css top value is to height and function stop working. Can you please suggest me some solution or another way to handle this ?
Here is code:
$(function() {
$(".nav li a").click(function(event) {
var page = $(this).attr("href")
var topVal = $("#about").css("top")
if (topVal != "-500px") {
$(page).animate({
top: "-=500"
}, 500).css("top", "-500px")
} else {
$(page).animate({
top: "+=500"
}, 500)
event.preventDefault()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
</ul>
<!-- About Page-->
<section id="about" class="container-fluid col-md-9" style="top: -500px;">About
</section>

Is this what you want?
$(function() {
$(".nav li a").click(function(event) {
var page = $(this).attr("href")
var topVal = $("#about").css("top")
if (topVal != "-500px") {
$(page).animate({
top: "-=500"
}, 500).css("top", "-500px")
} else {
$(page).animate({
top: "+=500"
}, 500)
event.preventDefault()
}
});
});
section { position: relative; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
</ul>
<!-- About Page-->
<section id="about" class="container-fluid col-md-9" style="top: -500px;">About
</section>
I think this is better:
$(function() {
$(".nav li a").click(function(event) {
var href=$(this).attr('href');
$(href).toggleClass('offscreen');
event.preventDefault()
});
});
section { position: relative; transition: 0.5s all; top:0 }
.offscreen { top: -500px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav pull-right">
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
<li>Start
</li>
</ul>
<!-- About Page-->
<section id="about" class="container-fluid col-md-9 offscreen">About
</section>

How to load the content onclick menu?

I have vertical menu. when I click on each menu it should load the content and should display..
here I have my code
<ul id="menu">
<li class="selected">Home</li>
<li>About</li>
<li>Technologies</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
<div id="menu1">
<div class="display" id="menu_home" >
<h3>home page</h3>
</div>
<div class="display" id="menu_about">
<h3>details about the page</h3>
</div>
</div>
so if i click on home menu in div it should show the home page..first function is to highlight the selected menu
and here my jquery
function highlightTab(link_id){
$("a[id^='menu_']").parent().removeClass('selected');
$("#menu_"+link_id).parent().addClass('selected');
}
$(document).ready(function()
{
$('#selected').on('click','a',function()
{
$('.display:visible').fadeOut();
$('.display[id='+$(this).attr('id')+']').fadeIn();
});
});
this is my css code
ul#menu li.selected{
background-color:black;
color:white;
}
.display
{
left: 734px;
position: relative;
}
How to do it?

There were some thing wrong with your code:
You've 2 the same ID's (the A and the DIV), updated with data-target.
You were searching for "#selected" instead of ".selected", updated this to #menu.
In JSFiddle the highlightTab function isn't being found. Why not mixing those two like here?
HTML:
<ul id="menu">
<li class="selected">Home
</li>
<li>About
</li>
<li>Technologies
</li>
<li>Services
</li>
<li>Contact Us
</li>
</ul>
<div id="menu1">
<div class="display" id="menu_home">
<h3>home page</h3>
</div>
<div class="display" id="menu_about">
<h3>details about the page</h3>
</div>
</div>
JS:
function highlightTab(link_id) {
$("a[id^='menu_']").parent().removeClass('selected');
$("#menu_" + link_id).parent().addClass('selected');
}
$(document).ready(function () {
$('#menu').on('click', 'a', function () {
$('.display:visible').fadeOut();
$('.display[id="' + $(this).data('target') + '"]').fadeIn();
});
});
CSS:
ul#menu li.selected {
background-color:black;
color:white;
}
.display {
display: none;
}