Closed thdoan closed 7 years ago
Hello @thdoan, I'm looking at your example and it seems to work correctly, except a few things. The styles for the menu are targeted through an id
as #menu
and because ids are unique on a page, clipthru strips that id from the clones and the fixed position isn't applied (there is a removeAttrOnClone
option to not strip them but I don't suggest you depend on duplicate IDs anyway). If you use a .menu
class instead, it will work. Secondly, the alternate menus for banner1
banner2
and banner3
hitboxes are unstyled. The clones are correctly being created, but they are not styled in any different way from the original menu, so it's black text on black rectangles. You can target a special style for the bannerX
collision by styling it as .jq-clipthru-clone.bannerX
.
I've forked your pen and fixed the issues mentioned above as a sample solution: https://codepen.io/salsita/pen/YQqmvV
edit: I noticed that the README mentions basic usage by targeting an id, which is confusing. Will change.
@mystrdat Great, thanks so much for your help!
While waiting for your reply yesterday, I went ahead and created my own jQuery plugin that pretty much did what I needed, but I think I'm going to rewrite it because it doesn't support IE 11 and below:
https://codepen.io/thdoan/pen/pwgPOP
Instead of creating an SVG mask and updating the clip-path
CSS property, my plan is to write out the clip
styles ahead of time and simply updating the class on scroll.
Sorry for reopening this. When I copied over your changes, it worked fine, but as soon as I converted the nav text into links, it broke again. Is there something extra we need to do with <a>
tags?
This isn't related to clipthru anymore, but anchor a
elements do not inherit color from parents by default, you have to explicitly target them for color changes. Changing line #6 to color: inherit;
would do the trick, or any alternate styling where you specifically target the anchor and change its color.
Thanks, that fixed it!
I spent the last 15 minutes trying to make this work, but have failed miserably:
https://codepen.io/thdoan/pen/GEoZzg
Could you please advise on how to make the menu text change to white when the banners scroll over it?