Difference between revisions of "Template:British Columbia 2"
m |
m |
||
| Line 36: | Line 36: | ||
margin-top: 14px !important; | margin-top: 14px !important; | ||
} | } | ||
| + | |||
| + | .cover{ | ||
| + | position: relative; | ||
| + | overflow: hidden; | ||
| + | height: 50%; | ||
| + | background: url("http://www.indiamike.com/files/images/06/26/51/majestic-bird.jpg"); | ||
| + | background-size: cover; background-repeat: no-repeat; | ||
| + | } | ||
| + | |||
| + | .cover .container-fluid{ | ||
| + | position: absolute; | ||
| + | bottom: 0; | ||
| + | color: #E4F9F5; | ||
| + | font-size: 3em; | ||
| + | } | ||
| + | |||
| + | .transparent-nav{ | ||
| + | background-color: transparent; | ||
| + | border: transparent; | ||
| + | } | ||
| + | |||
</style> | </style> | ||
| + | <script> | ||
| + | // get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable | ||
| + | var mainbottom = $(".cover").offset().top + $(".cover").height(); | ||
| + | |||
| + | // on scroll, | ||
| + | $(window).on("scroll",function(){ | ||
| + | |||
| + | // we round here to reduce a little workload | ||
| + | stop = Math.round($(window).scrollTop()); | ||
| + | if (stop > mainbottom) { | ||
| + | $('.navbar-default').removeClass('transparent-nav'); | ||
| + | } else { | ||
| + | $('.navbar-default').addClass('transparent-nav'); | ||
| + | } | ||
| + | }); | ||
| + | </script> | ||
</head> | </head> | ||
<header> | <header> | ||
Revision as of 12:52, 3 October 2016
