In the members-only forum a user asked
Hi Sridhar, I am trying to get my head round this.
I would like to make the background of the Minimum Pro header transparent like this:
(And clearly I took that screenshot with site-header transparent and a negative top margin on the background image)
But the header would then become opaque when the page is scrolled down:
This isn’t unusual design pattern but I am not sure how best to achieve it here.
Any ideas gratefully received.
In this tutorial we shall
- set the site header to be transparent (for screen widths 1024px and above)
- add a custom
scrolledclass to site header when the user has scrolled down to the tagline section (again, for 1024px and above)
- write CSS to set white background to site header when it gets the scrolled class i.e., when the front page has been scrolled to the tagline
on Minimum Pro's front page.
In js/backstretch-set.js below
To view the full content, please sign up for the membership.
Already a member? Log in below or here.