We Keep Coding

Can't get my main nav to perform as a sticky nav

I've created a utility and main navigation bar for this self-project I'm working on, and I want the main nav to become sticky when I scroll 42px.
However, when I scroll the navigation bar doesn't stick at the top of the window. I tested it with the utility nav, and it worked perfectly. Here is my coding for the main nav bar...
$(window).on("scroll", function () {
var distanceScrolled = $(window).scrollTop();
console.log("The distance scrolled is: " + distanceScrolled);
if(distanceScrolled>42){
$("#main-nav").addClass("scrolled");
}
else{
$("#main-nav").removeClass("scrolled");
}
});
#main-nav {
position: relative;
width: 100%;
height: 100px;
background-color: #000000;
}
.main-nav-left {
list-style: none;
float: left;
padding-left: 28px;
height: 100px;
}
.main-nav-items {
position: absolute;
top: 40%;
left: 290px;
list-style: none;
text-decoration: none;
}
.main-nav-items li {
display: inline-block;
padding-right: 12px;
margin-right: 13px;
}
.main-nav-right li {
float: right;
padding-right: 12px;
margin-right: 26px;
margin-top: 40px;
list-style: none;
}
#main-nav a {
text-decoration: none;
color: #ffffff;
}
.scrolled {
position: fixed;
top: 0;
z-index: 1000;
}
<nav id="main-nav">
<ul class="main-nav-left">
<li><img src="images/thule_logo.png" height="100" width="auto"></li>
</ul>
<ul class="main-nav-items">
<li>CARRIERS & RACKS</li>
<li>ACTIVE WITH KIDS</li>
<li>LUGGAGE & BAGS</li>
<li>SLEEVES & CASES</li>
<li>EXPLORE THULE</li>
</ul>
<ul class="main-nav-right">
<li><i class="fas fa-search fa-lg"></i></li>
</ul>
</nav>
<script src="js/jquery-v3.3.1.js"></script>
<script src="js/main.js"></script>

First of all there is no 'nav' class defined for your html nav element. So in jQuery selector, you need to select by the id(main-nav) as you have defined or by HTML nav element itself. you can do this:
if(distanceScrolled>42){
$("nav").addClass("scrolled");
}
else{
$("nav").removeClass("scrolled");
}
or
if(distanceScrolled>42){
$("#main-nav").addClass("scrolled");
}
else{
$("#main-nav").removeClass("scrolled");
}
But add jQuery library file prior to your custom script.
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous">
</script>
second and the most important thing is that you are adding a class(scrolled) having {position:fixed}. Since Id has higher priority than Class so it won't allow class to overwrite the common CSS property, like in this case 'position'. So you can add !important to class selector's property:
.scrolled{
position:fixed!important;
top: 0;
z-index: 1000;
}
or
write deep CSS selection to make it's priority higher than Id. Like:
#main-nav.scrolled {
position:fixed;
top: 0;
z-index: 1000;
}
Both will work.

Sticky Navbar on scroll

I understand this seems to be a common request but after digging through several posts I can't find a solution and/or lack the knowledge to tailor the javascript to my needs.
I am looking for a way to have my Navbar stick to the top of the page once it reaches the top (scrolling far enough down). The issues I have is that my Navbar is currently positioned using flex, and not already at the top of the page.
CODEPEN
* {margin:0;padding:0;box-sizing:border-box}
html, body {text-align: center;}
#logo2 img {
margin: 0 auto;
margin-top: 3%;
}
.menu2 {
display: flex; /* displays children inline */
margin: 0;
width: 100%;
margin-top: 2%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
}
li {
flex: 1; /* each takes as much width as it can, i.e. 25% */
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 20px 0;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
.active {
background: linear-gradient(#2B2B2B, #232323);
}
<header id="logo2">
<img src="logo.png" alt="Logo"/>
</header>
<nav>
<ul id="navigation" class="menu2">
<li>HOME</li>
<li class="active">GALLERY</li>
<li>ART</li>
<li>CONTACT</li>
</ul>
</nav>
</body>

Well I eventually found an answer to my question. For those of you interested.
JS
var num = 240; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu2').addClass('fixed');
$('.main').addClass('main2');
} else {
$('.menu2').removeClass('fixed');
$('.main').removeClass('main2');
}
});

.menu2 {
width: 100%; height: 100%;
background-color: rgb(240, 240, 240);
position: sticky;
left: 0; top: 0;
}
.emptySpace {width: 100%; height: 1000000px;}
<span class="menu2">
Link 1
Link 2
Link 3
Link 4
Link 5
</span>
<!-- the div below is to allow you to scroll so you can see how it works (it's absolutely useless) -->
<div class="emptySpace"></div>
If I'm understanding your question correctly, you can use
HTML:
<span class="menu2">
Link 1
Link 2
Link 3
</span>
CSS:
.menu2 {position: sticky;}
This will cause the navigation bar to stick to the top of the screen as the user scrolls down.
You can read into this a bit more at W3Schools.
Also, check out my Weave at LiveWeave.

Hiding Nav on Scroll and reavaling it on logo hover?

I m developing a site and I m about to add a little bit of transition to the nav bar, but I have few bugs can anybody help.
The Objective is when you scroll down the nav elements gets hidden and the logo of the site will be at the fixed position, if you move hover logo the nav appears again.
I think it still needs to be fixed.
Reference Navigation bar: https://www.barackobama.com/
.logo{
position: fixed;
}
.navigation{
position: fixed;
margin: 50px 20px;
display: block;
}
ul li{
padding: 0 30px;
display: inline-block;
}
ul li a{
color: #646464;
text-transform: uppercase;
font-weight: 600;
}
ul li a:hover{
color: #BE9503;
text-decoration: none;
}
.main{
min-height: 1200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navig" id="navhome">
<div class="logo">
<img src="images/logo-4.png" width="70">
</div>
<nav id="navMain" class="navMain">
<ul class="navigation">
<li>Dr Ganesh</li>
<li>Connect</li>
<li>Achievers</li>
<li>News</li>
<li>Gallery</li>
</ul>
</nav>
</div>
<div class="main"></div>
<script type="text/javascript">
$(window).scroll(function(){
if($(this).scrollTop()>100)
{
$('.navMain').fadeOut();
}
else
{
$('.navMain').fadeIn();
}
$('.navig').mouseenter(function(){
$('.navMain').show();
});
$('.navig').mouseleave(function(){
$('.navMain').hide();
});
});
</script>
</div>

Nav menu moves down when .slideToggle is used on div above it

I am trying to make a nav menu for part of a practice website, and I made an animation that basically slides down a green div when one of the menu options are hovered over, but once that happens the whole nav menu slides down. which I do not want. I tried changing the nav menus position to absolute, but then it looses its position, and I can't re-position it. Any help would be appreciated, thank you!
Here is the JSfiddle version.
HTML:
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
</ul>
<ul id="navlist">
<li class="navlistitems" id="home">Home</li>
</ul>
CSS:
#nav_animations {
display:inline;
position:relative;
bottom:13px;
}
#greenHome {
display:none;
}
.nav_square {
background-color:green;
width:100px;
height:15px;
z-index:22;
position:relative;
}
#navlist {
display:inline;
font-family: 'Dhurjati', sans-serif;
font-size:45px;
position:relative;
}
.navlistitems {
display:inline;
padding:50px;
color:black;
}
JavaScript:
$(document).ready(function(){
$('#home').hover(function(){
$('#greenHome').slideToggle('fast');
});
});
PS: Yes I do have the JQuery library linked in my actual code.

The quick and dirty solution using your work is as follows below. If you wanted the green dropdown to be below the parent nav item, you should add ul#nav_animations inside the li.navlistitems. That's what I've done below. I also modified your CSS a little to take this into consideration.
And here is a JSFiddle I threw together for you: http://jsfiddle.net/84amnjz7/1/
CSS:
#navlist {
margin: 0;
padding: 0;
list-style-type: none;
font-family: 'Dhurjati', sans-serif;
font-size: 45px;
position: relative;
}
.navlistitems {
position: relative;
padding: 25px 0 0;
display:block;
float: left;
color: #000;
}
#nav_animations {
display: block;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
}
#greenHome {
display: none;
}
.nav_square {
background-color: green;
width: 100%;
height: 15px;
z-index: 22;
position: relative;
}
jQuery:
$(document).ready(function(){
$('#home').hover(function(){
$('#greenHome').stop(true, true).slideToggle('fast'); /* ADDED .stop(true, true) */
});
});
Modified HTML:
<ul id="navlist">
<li class="navlistitems" id="home">Home
<ul id="nav_animations">
<li class="nav_square home_square" id="greenHome"></li>
</ul>
</li>
</ul>

How do I scroll in a <div> - within a fixed <div>

I have a div which has to scroll. The problem is that it's within a fixed div.
I tried to fix this in different ways, I went through these posts:
Div with scrollbar inside div with position:fixed
Have a fixed position div that needs to scroll if content overflows
but none of them worked for me.
I'd like to test it with you guys and find out what's the problem.
I am working on a mobile responsive website.
It has a nav menu button that opens .list div up - when clicking the menu button.
I inserted the div of the .list right after the nav bar.
When the menu opens it doesn't show all list items in my tag.
I have to give my main div .list different height sizes and I find it not so efficient.
I will paste my relevant code part of the nav bar, and the relevant CSS parts.
HTML:
<div class="list">
<h2 id="cat-header"> ALL CATEGORIES</h2>
<ul class="sports">
<li class="mainli"></li>
<li class="mainli"></li>
<li class="mainli"></li>
</ul>
</div>
CSS:
.sports{
/*display: none;*/
padding: 0 ;
background-color: #fff;
margin: 0;
width:100%;
/*height: 210%*/
-webkit-overflow-scrolling: touch;
}
.list{
width: 99.9%;
/* overflow: hidden; */
/* overflow-y: scroll; */
/* top: 65%; */
overflow-x: hidden;
/*overflow-y: scroll;*/
height: 75%;
display: none;
-webkit-overflow-scrolling: touch;
}
when clicking #mob-menu-btn it opens .list and makes my whole tag fixed:
$('#mob-menu-btn').click(function(){
var isHidden = $('.sports').is(':visible');
if (isHidden){
$( "body" ).removeClass( "makeFixed" );
} else {
$( "body" ).addClass( "makeFixed" );
}
$('.list').slideToggle("fast");
})
my .makeFixed looks like this:
.makeFixed{
position: fixed;
}
I tested this last, and it didn't solve my problem:
.makeFixed{
position: fixed;
top: 0;
bottom:0;
overflow-y:scroll;
overflow-x:hidden;
}
and changed height: auto; and overflow-y: scroll; within .sports and .list.
What might be the problem?

I have a problem with the following:
if (isHidden){
$( "body" ).removeClass( "makeFixed" );
} else {
$( "body" ).addClass( "makeFixed" );
}
having the following CSS:
.makeFixed{
position: fixed;
}
Which means you are fixing the body to... the body? Here is my suggestion:
// I'll keep your HTML intact
<div class="list">
<h2 id="cat-header"> ALL CATEGORIES</h2>
<ul class="sports">
<li class="mainli"></li>
<li class="mainli"></li>
<li class="mainli"></li>
</ul>
</div>
// Your list will be your fixed element. It might be better to call this your nav.
.list {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
transition: height 500ms;
overflow-x: hidden;
}
// I add an active state for it. It will also nicely animate thanks to the previously named transition.
.list.active {
height: 99%;
}
// I only toggle the .active class on the click of the mobile button
$('#mob-menu-btn').click(function(){ $(".list").toggleClass("active"); });
This way you simplify your menu quite a bit. You animate with CSS, you have a simple wrapper that determines where your menu will be positioned and how, and the contents will push the overflow to be scrollable if they are larger.
Also, 'overflow: auto' is unnecessary, I have not come across a need for this. Heres an example where the yellow area is fixed to be very heigh so the scrolling will work, but the gist is the same (actually, I've adjusted all values to make the example more visually obvious):
window.onload = function(){
document.getElementById("button").addEventListener("click", function(){
if(document.getElementById("list").className == "active"){
document.getElementById("list").className = "";
} else {
document.getElementById("list").className = "active";
}
});
}
#list {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 0;
transition: height 500ms;
overflow-x: hidden;
background: blue;
}
#list.active {
height: 80%;
}
#list ul {
height: 3000px;
background: yellow;
}
#button {
z-index: 4;
position: absolute;
top: 10px;
left: 10px;
background: #fff;
}
<div id="button">click me</div>
<div id="list">
<h2 id="cat-header"> ALL CATEGORIES</h2>
<ul class="sports">
<li class="mainli"></li>
<li class="mainli"></li>
<li class="mainli"></li>
</ul>
</div>

Use overflow: auto; on the div that you want to scroll, if the div have right height this will work

Give the height to the div with overflow-y:scroll !important and
like
write your div like this..
<div style="overflow-y:scroll !important;height:80px;">
/*your scrollable content
</div>

Try position the list by using
.list{
width: 99.9%;
/* overflow: hidden; */
/* overflow-y: scroll; */
/* top: 65%; */
overflow-x: hidden;
/*overflow-y: scroll;*/
height: 75%;
display: none;
-webkit-overflow-scrolling: touch;
position: fixed;
z-index:99999;
}

Try this..
<h2 id="cat-header">ALL CATEGORIES</h2> <div style="overflow-y:scroll ;height:80px;border:1px solid #000"> <ul class="sports"> <li class="mainli">hello</li> <li class="mainli">hello</li> <li class="mainli">hello</li> </ul> </div>