sdfs sdfs - 2 months ago 6
CSS Question

How to make a <li> appear in navigation bar only on scroll

I want a < li > content appear only on scroll, i can better explain with the help of this fiddle

The fiddle is not looking good, but let me explain. I want the xaviers logo (on the white navigation bar) to appear only when the black parts gets over on scroll. At the point when the white navigation bar gets fixed.

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


<!--Navigation bar start -->

<div class="navbar1">
<ul class="navbar" id="mynavbar">
<li><img src="xavierslogo.png" alt="Xaviers logo" id="navlogo"></li>
<li><a href="#home">Home</a></li>
<li><a href="#news">Text one</a></li>
<li><a href="#news">Text two</a></li>

<li class="dropdown">
<a href="" class="dropbtn">Dropdown ▼</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>

<li class="icon">
<a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
</li>
</ul>
<div>
<!--Navigation bar end -->


<header class="topbg">
<img src="xavierslogo.png" alt="St. Xavier's college logo" class="xavierslogo">
<img src="xavierstext.png" alt="St. Xavier's college logo" class="xavierstext">

</header>

z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>z<br>


CSS:

body {
width: 100%;
height: 100%;
margin:0px;

}


/* Navigation bar logo start */


.navbar li #navlogo {

width: 40px;
height: auto;


}

/* Navigation bar logo end */

/* Navigation bar start */

.navbar1 {
position: absolute;
top: 0px;
width: 100%;

}

.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f2f2f2;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);


}




.navbar li {
float: left;
}




li a, .dropbtn{
display: inline-block;
color: #333;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}


.navbar li a:hover, .dropdown:hover .dropbtn {
background-color: #333;
color: #f2f2f2;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}


/* Navigation bar end */
/* Navigation bar fixed on scroll start */

.topNav {
position: fixed;
top: 0;
width: 100%;


}


/* top logo start */



.xavierslogo {
max-width: 1100px;
height: 909px;
padding: 100px;
position: relative;
width: 100%;
height: auto;
left: 50px;



}

.xavierstext {
max-width: 600px;
max-height: 45px;
width: 100%;
height: auto;
position: relative;
left: -18px;
top: 0px;

}



.topbg {

background-color: #333;
background-image: url('images/1.jpg');
position: 0px;
background-position: right;
background-size: auto 190px;


}
/* top logo end */
/* Navigation bar fixed on scroll end */


JS:

Answer

When you scroll the page, the ul#mynavbar gets the topNav class (and it's removed when you scroll back to top).

You can use this class to show/hide the logo:

.navbar #navlogo {
    display: none;
}
.navbar.topNav #navlogo {
    display: inline-block;
}

Check this example:
https://fiddle.jshell.net/8h4jkoq1/

Comments