I want to add a background to the top nav of the page on scroll, anybody could help me! | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

I want to add a background to the top nav of the page on scroll, anybody could help me!

https://code.sololearn.com/WwWnM0UH4jdG/?ref=app

11th Jun 2021, 7:13 AM
Samuel Mathew
Samuel Mathew - avatar
10 Answers
+ 2
window.onscroll = function(){ if (window.scrollY > 80) { document.querySelector("header").style.background = "red"; }else{ document.querySelector("header").style.background = "none"; } } This might help you you can replace 80 with height of your header tag
11th Jun 2021, 7:31 AM
Divya Mohan
Divya Mohan - avatar
+ 3
Hi! If you have created such a beautiful website, then you should be able to do it
11th Jun 2021, 7:23 AM
Yaroslav Vernigora
Yaroslav Vernigora - avatar
+ 2
are you having trouble saving and displaying the picture? or something else?
11th Jun 2021, 7:29 AM
Yaroslav Vernigora
Yaroslav Vernigora - avatar
+ 2
very cool site! did you make it yourself?
13th Jun 2021, 7:22 AM
Yaroslav Vernigora
Yaroslav Vernigora - avatar
+ 1
Yeah! I created it myself, just help if you can, long story short bro!
11th Jun 2021, 7:27 AM
Samuel Mathew
Samuel Mathew - avatar
+ 1
Nope! just the top nav background on scroll...
11th Jun 2021, 7:30 AM
Samuel Mathew
Samuel Mathew - avatar
+ 1
Thanks bro! It works fine now.
11th Jun 2021, 7:40 AM
Samuel Mathew
Samuel Mathew - avatar
+ 1
you could make it smoother by adding in css: header { transition:background-color 0.7s; }
11th Jun 2021, 12:35 PM
visph
visph - avatar
+ 1
Yeah! I created it myself, and I am still working on it... Please like my code.
13th Jun 2021, 9:06 AM
Samuel Mathew
Samuel Mathew - avatar
0
bookmark
12th Jun 2021, 11:27 PM
loop
loop - avatar