Im trying to create to nav bar that goes pops up when the users scrolls up and when they reach the end of the page. reference can be the nav bar in Nike website. I wrote the JScript for this, but that doesn't do the work.
const nav = document.querySelector('#navbar');
let topOfNav = nav.offsetTop;
function fixNav() {
if (window.scrollY >= topOfNav) {
document.body.style.paddingTop = nav.offsetHeight + 'px';
document.body.classList.add('fixed-nav');
} else {
document.body.style.paddingTop = 0;
document.body.classList.remove('fixed-nav');
}
}
window.addEventListener('scroll', fixNav);
// show nav bar when at the end of the page
window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
nav.classList.add('show-nav');
} else {
nav.classList.remove('show-nav');
}
};
.sub-menu {
visibility: hidden;
}
<nav>
<ul class="nav-list" id="navbar">
<li>
Test
<ul class="sub-menu">
<li>
1
</li>
</ul>
</li>
</ul>
</nav>
w3schools has an example on this, check if it works for you: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
I can see some problems
Use of querySelector returns a static node, which means the position stays fixed all the time and you're running fixNav each time with the same topOfNav which means you'll always get the same result, instead, you either query your navbar inside the fixNav or use getElementsById which returns live node.
Use of paddingTop instead of marignTop, you're resizing your navbar instead of moving it
Your classes do not exist in the css as well, you need to include them if you want me to provide a solution instead of hints, but mostly likely, you didn't position your navbar bar, which means it's static and positioning properties like top and bottom won't work on it. Instead, you need to make it relative for this to work.
Or just use position: sticky; top: 0; left: 0 and it should stick while scrolling
Related
I'm trying to make it so that when you scroll on my HTML page when you reach a certain section, that respective section should become active,
for example:
<nav class="scrollmenu">
<ul>
<li class="starters">STARTERS</li>
<li class="ramen">RAMEN</li>
</ul>
</nav>
starters should become active when you reach this section on the page:
<section id="starters" class="foodgrid">...</section>
I'm trying to do this with this JS code:
const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll("nav ul li");
window.addEventListener("scroll", () => {
let current = " ";
sections.forEach((section) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (scrollY >= sectionTop) {
current = section.getAttribute("id");
}
});
navLi.forEach((li) => {
li.classList.remove("active");
if (li.classList.contains(current)) {
li.classList.add("active");
}
});
});
I'm still going to expand on this JS code to make it work better but if I'm not mistaken it should already make the class visually active when I'm on the right section.
In case you are wondering my CSS looks like this for the time being:
nav ul li:active {
background-color: blue;
}
what happens here is that you are attaching a class name which is active and you are not declaring that class, you just have the event :active that is triggered when you click on the element, so you must do this
.active {
background-color: blue;
}
and that will work when you set the class and remove it, also leaving the css code as you have it will make that when the html li element is clicked it changes it background and then changes to the normal color, try it and let me know if it works, if it doesn't is something about your js and then ill check it
I want remove .bg-light from nav element at 400px and more scrolls
<nav id="my-nav" class="bg-light navbar text-info"> change my background color</nav>
I know it's an easy task with jQuery but is it possible to do it with vanilla js?
Thanks for spending time on my question I will be glad to see opinion
First, we start by grabbing the "nav" element using the ID.
Then setting our Y-axis's offset.
Attach a listener to the window object.
On scroll, compare the current position to our desired offset.
const navBar = document.getElementById("my-nav");
const offset = 400;
window.addEventListener("scroll", () => {
if (window.scrollY >= offset){
navBar.classList.remove("bg-light")
} else {
navBar.classList.add("bg-light")
}
})
Yes, its possible with Vanilla JavaScript, use the "scroll" event handler to get the info. As the users moves through the site it will return the Y axis position in pixels. By using an if statement remove or add the bg-light class, like so:
let nav = document.getElementById("my-nav");
window.addEventListener("scroll", (e) => {
if(this.scrollY > 400){ nav.classList.remove('bg-light') }
else{
nav.classList.add('bg-light')
}
});
*{padding:5px}
html{height:3000px;font-size:20px}
.bg-light{background-color: #F8F8F8!important; color:black!important;}
.navbar{position:fixed;background-color:blue; color:white;}
<nav id="my-nav" class="bg-light navbar text-info"> Change my background color at scrollY 400px</nav>
I've got two navbars, the second becomes sticky once it hits the top of the viewport, the problem I'm having is getting it to 'unstick' when the div above which contains the original navbar comes back into the viewport so the first navbar can be seen again .
Sorry for the terrible explanation and vague title, had trouble trying to thing of how to describe it.
Here's a jsfiddle which will give you a much better idea of what I mean, any help would be appreciate as I'm pretty poor when it comes to javascript, thanks.
(HTML and CSS in jfiddle)
$('#nav2').attr("attop", false);
var lastScrollTop = 0;
$(window).on('scroll', function() {
var windowScrollTop = $(this).scrollTop();
if (windowScrollTop > lastScrollTop) {
var header = $('#nav2[attop="false"]:first');
if (header && header.length > 0) {
if (windowScrollTop >= header.offset().top) {
header.attr('attop', true);
$('#nav2').addClass('sticky');
}
}
}
lastScrollTop = windowScrollTop;
});
});
````
There is a nice solution in Bootstrap 4 and I use it on a few sites. The only thing you need to do is to add this class to the navbar. Check out the snippet below.
Notice that in order for position sticky to work correctly this class can't be added to an element inside a container, you must add this class to the container itself.
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sticky-top {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1020;
}
}
/*DEMO PURPOSE*/
nav{background:red;padding-top:1rem;padding-bottom:1rem}
.section-1{height:300px}
.section-2{height:1000px}
<div class="section-1">Section 1</div>
<nav class="sticky-top">Lorem Ipsum</nav>
<div class="section-2">Section 1</div>
Im creating a fixed header where on load, the logo is flat white. On scroll, it changes to the full color logo.
However, when scrolling back to the top, it stays the same colored logo instead of going back to white.
Here's the code (and a pen)
$(function() {
$(window).scroll(function() {
var navlogo = $('.nav-logo-before');
var scroll = $(window).scrollTop();
if (scroll >= 1) {
navlogo.removeClass('.nav-logo-before').addClass('nav-logo-after');
} else {
navlogo.removeClass('.nav-logo-after').addClass('nav-logo-before');
}
});
});
http://codepen.io/bradpaulp/pen/gmXOjG
There's a couple of things here:
1) You start with a .nav-logo-before class but when the logo becomes black you remove that class and then try to get the same element using a class selector that doesn't exist anymore
2) removeClass('.nav-logo-before') is different than removeClass('nev-logo-before), notice the "." in the first selector.
3) You get the element using the $('.selector')in every scroll event, this can be a performance issue, it's better to cache them on page load and then use the element stored in memory
4) It's not a good practice to listen to scroll events as this can be too performance demanding, it's usually better to use the requestAnimationFrame and then check if the scroll position has changed. Using the scroll event it could happen that you scroll up really fast and the scroll event doesn't happen at 0, so your logo won't change. With requestAnimationFrame this can't happen
$(function() {
var navlogo = $('.nav-logo');
var $window = $(window);
var oldScroll = 0;
function loop() {
var scroll = $window.scrollTop();
if (oldScroll != scroll) {
oldScroll = scroll;
if (scroll >= 1) {
navlogo.removeClass('nav-logo-before').addClass('nav-logo-after');
} else {
navlogo.removeClass('nav-logo-after').addClass('nav-logo-before');
}
}
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
});
body {
background-color: rgba(0,0,0,.2);
}
.space {
padding: 300px;
}
.nav-logo-before {
content: url(https://image.ibb.co/kYANyv/logo_test_before.png)
}
.nav-logo-after {
content: url(https://image.ibb.co/jYzFJv/logo_test_after.png)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img class="nav-logo nav-logo-before">
</div>
<div class="space">
</div>
Dont need to add the dot . in front of the class name in removeClass and addClass:
Use this:
navlogo.removeClass('nav-logo-before')
Secondly, you are removing the class that you are using to get the element in the first place.
I have an updated codepen, see if this suits your needs: http://codepen.io/anon/pen/ZeaYRO
You are removing the class nav-logo-before, so the second time the function runs, it can't find any element with nav-logo-before.
Just give a second class to your navlogo element and use that on line 3.
Like this:
var navlogo = $('.second-class');
working example:
http://codepen.io/anon/pen/ryYajx
You are getting the navlogo variable using
var navlogo = $('.nav-logo-before');
but then you change the class to be 'nav-logo-after', so next time the function gets called you won't be able to select the logo using jquery as it won't have the '.nav-logo-before'class anymore.
You could add an id to the logo and use that to select it, for example.
Apart from that, removeClass('.nav-logo-before') should be removeClass('nav-logo-before') without the dot before the class name.
The problem is that you removes nav-logo-before and then you want to select element with such class but it doesn't exist.
I've rafactored you code to avert it.
Another problem is that you uses dot in removeClass('.before') while it should be removeClass('before') - without dot
$(function() {
var navlogo = $('.nav-logo');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1) {
navlogo.removeClass('before').addClass('after');
} else {
navlogo.removeClass('after').addClass('before');
}
});
});
body {
background-color: rgba(0,0,0,.2);
}
.space {
padding: 300px;
}
.before {
content: url(https://image.ibb.co/kYANyv/logo_test_before.png)
}
.after {
content: url(https://image.ibb.co/jYzFJv/logo_test_after.png)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img class="nav-logo before">
</div>
<div class="space">
</div>
I've found a great tutorial to detach a navigation from the page to keep it static when you scroll using Javascript (http://code.stephenmorley.org/javascript/detachable-navigation/).
However, I'd like to implement this on more than one nav div.
I assume it's adding another class name to document.getElementById('navigation').className but I can't get the right syntax
Here is the code:
/* Handles the page being scrolled by ensuring the navigation is always in
* view.*/
function handleScroll(){
// check that this is a relatively modern browser
if (window.XMLHttpRequest){
// determine the distance scrolled down the page
var offset = window.pageYOffset
? window.pageYOffset
: document.documentElement.scrollTop;
// set the appropriate class on the navigation
document.getElementById('navigation').className =
(offset > 104 ? 'fixed' : '');
}
}
// add the scroll event listener
if (window.addEventListener){
window.addEventListener('scroll', handleScroll, false);
}else{
window.attachEvent('onscroll', handleScroll);
}
You will have to call getElementById() for each ID. The Method is only designed to get exactly one element (or zero, if the ID isn't found).
Assuming, you have two navigation divs, left and right, like this:
<div id="navigationLeft">
<ul>
<!-- Navigation entries -->
</ul>
</div>
<!-- Maybe some content or whatever? -->
<div id="navigationRight">
<ul>
<!-- Navigation entries -->
</ul>
</div>
Then your Javascript line in question would look like this:
// set the appropriate class on the navigation
document.getElementById('navigationLeft').className = (offset > 104 ? 'fixed' : '');
document.getElementById('navigationRight').className = (offset > 104 ? 'fixed' : '');
// or, shorter but less readable (i think)
document.getElementById('navigationLeft').className
= document.getElementById('navigationRight').className
= (offset > 104 ? 'fixed' : '');
If this does not yet answer your question, please feel free to add some relevant HTML-Code to your question.
[Update: Example]
This is not recommended you should replace id with classes and use that in a loop to set the value:
HTML:
<div class="navigation">
<p>test 1</p>
</div>
<div class="navigation">
<p>test 2</p>
</div>
Javascript:
divs = document.getElementsByClassName('navigation');
for(i = 0; i < divs.length; i++) {
var div = divs[i];
var divClassName = div.className;
if(divClassName.indexOf('fixed') != -1 && offset > 104) {
divClassName.replace(' fixed','');
} else {
divClassName += ' fixed';
}
}
I think that will do the trick :-)
Greetings!
Gonzalo G.
you shouldnt have multiple items on a page with the same ID, ID's are meant to be unique...if you want to capture multiple items you should use:
<div class="navigation"></div>
var nodes = document.getElementsByClassName('navigation')
...if not using jquery, otherwise do something like
var nodes = $('.navigation')
which will get you yor nav bars, then check to see if that node is also "fixed" ( a node can have more than one css class )
(nodes[i].indexOf("navigation") >= 0)
if using jquery, you can use .hasClass('fixed') )
nodes[i].hasClass('fixed')
...your current problem is that it cant add className to navigation because there are two of them and youre not specifying which one you'd like to use.
If you want this to happen in two navigation div's, consider putting them both into one div and call it nav and set a style on it (this depends on your design)
All id's on an element must be unique.
One solution so that you can do a simple change would be to change the CSS file to something like this:
.navigation{
position:absolute;
top:120px;
left:0;
}
.navigationFixed{
position:fixed;
top:16px;
}
And define the Div's vis this:
<div class="navigation">
<!-- your navigation code -->
</div>
And then edit the JavaScript to something along the lines of this:
/* Handles the page being scrolled by ensuring the navigation is always in
* view.
*/
function handleScroll(){
// check that this is a relatively modern browser
if (window.XMLHttpRequest){
divs = document.getElementsByClassName('navigation');
for(i = 0; i < divs.length; i++) {
// determine the distance scrolled down the page
var offset = window.pageYOffset
? window.pageYOffset
: document.documentElement.scrollTop;
divs[i].className =
(offset > 104 ? 'navigationFixed' : 'navigation');
}
}
}
// add the scroll event listener
if (window.addEventListener){
window.addEventListener('scroll', handleScroll, false);
}else{
window.attachEvent('onscroll', handleScroll);
}