|
#1
Jan 13, 2018, 09:06 AM
|
|
Hi Atahualpa community,
I need help on something that I haven't found the solution to. I have a header that includes a logo and a menu bar and is fixed in its position at the top. I would like the header to be transparent when I'm at the very top of the page so that the beautiful background image can show through, but turn solid white upon scrolling. I can't figure out what CSS code I should insert in order to accomplish this. Your help will be greatly appreciated.
Thank you.
Daniel
|
#2
Jan 14, 2018, 05:07 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Can you provide the URL of the site?
To change the property of the image 'on the fly' you are going to need a script to do it. You might want to look at the Jscript tutorials at https://www.w3schools.com/js/default.asp
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
Last edited by juggledad; Jan 14, 2018 at 05:11 AM.
|
#3
Jan 16, 2018, 11:42 AM
|
|
It's test.dlimconsulting.com.
It's a draft website in progress.
|
#4
Jan 16, 2018, 03:16 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Why don't you change the image by adding the whitespace to the top of it. Then make the logo/menu bar have a transparent background.
That way, when you scroll, the white - which is part of the image - will scroll up and the image will show thru the logo/menu.
of course since threr is text scrolling wth the image. that will show behind the logo/menu when it scrolls far enough...
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#5
Jan 16, 2018, 03:28 PM
|
|
That would actually do the opposite of what I want. I want the header to be transparent when the page is at the very top and then turn white when I'm scrolling. I hope this makes sense.
|
#6
Jan 16, 2018, 07:34 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Ok, this isn't really an Atahualpa question, but a javascript question because you will need a javascript to do what you want. ut being intrigued, I thought I'd do some searching and see what I could find.
So I did a little googling and looked at w3schols.com and came up with this that would solve the case I first assumd it would be. This should be added to ATO->Add HTML/CSS Inserts->HTML Inserts: Body Bottom
HTML Code:
<script>
onscroll = function() {myFunction()};
function myFunction() {
document.getElementById("header").style.backgroundColor = "transparent";}
</script>
but you will have to do it a bit differently because you need to change the header to transparent to start and then change the color here. And you may have more to do, but I'll let you play with it and see where you get.
Feel free to ask for hints if you get stuck.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#7
Jan 17, 2018, 08:52 AM
|
|
Okay thanks. As I was trying out the javascript you shared, my first obstacle seems to be that the menu bar cannot have a transparent background. So I'll have to figure out how to fix that first.
|
#8
Jan 17, 2018, 09:22 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
hint: CSS inserts override what the theme options do....
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#9
Jan 17, 2018, 10:52 AM
|
|
Haha I know. I tried but adding this code in the HTML/CSS Inserts and it did not work.
Code:
#menu1 {
background: rgba(200, 200, 200, 0.0);
}
This was meant to make the menu background completely transparent, but it did not work.
|
#10
Jan 17, 2018, 11:28 AM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
that would work if that was the correct element. Try:
HTML Code:
div#menu1 ul.rMenu {background-color: transparent;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#11
Jan 17, 2018, 11:40 AM
|
|
That did work to make the menu bar transparent, but the individual menu items still have a white background. You can look at the website to see what it currently looks like.
|
#12
Jan 17, 2018, 11:44 AM
|
|
Using what I know about using CSS to modify lists, I added this but still no luck.
Code:
div#menu1 li {
background-color: transparent;
}
|
#13
Jan 17, 2018, 12:03 PM
|
|
NVM. I figured it out. This is the correct code to make the menu items transparent as well.
Code:
div#menu1 ul.rMenu li {
background: rgba(255, 255, 255, 0.0);
}
I will now try the javascript code and see how it goes.
|
#14
Jan 17, 2018, 02:28 PM
|
|
I tried the javascript and it works, but once the header turns white upon scrolling, it stays white even when I return to the top of the page. I'm missing a step in the script that tells it to go back to transparent when I'm at the very top. Your help would be appreciated. Thanks.
|
#15
Jan 17, 2018, 02:36 PM
|
|
If possible, I would like the transition from transparent to white and back to transparent be on a gradient rather than abrupt, if that makes sense.
|
#16
Jan 17, 2018, 03:05 PM
|
|
I used a different jscript and it seemed to do the trick. I didn't get the gradient transition I was looking for, but it's a minor detail at this point.
Code:
<script>
$(window).on("scroll", function(){
if($(window).scrollTop() > 0){
$("#header").css("background", "rgba(255, 255, 255, 0.9)");
}
else if($(window).scrollTop() == 0){
$("#header").css("background-color", "transparent");
}
});
</script>
|
#17
Jan 17, 2018, 05:30 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
I'm not seeing it on the site, you should disable your caching plugin when doing Development so you can see the changes as you make them.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
#18
Jan 18, 2018, 11:31 AM
|
|
Wow I did not know a cache plugin existed. I disabled and deleted them. Hopefully you can see it now.
I also figured out the gradient transition detail I wanted.
Thanks for your help by the way.
|
#19
Jan 18, 2018, 03:01 PM
|
|
|
|
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
|
|
Glad I could help you learn something (grin)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
|
|