can t connect metamask to opensea : rMetamask - Reddit Just figured it out In opensea, click on the MetaMask extension and click on the three dots next to Account Connected Sites Manually connect to current site . You re welcome lads! AutoModerator • 1 yr. ago. Learn more about using MetaMask with NFT . I am a bot, and this action was performed automatically. Ripple’s XRP: What It Is, What It’s Worth and Should You Be Sep 26, · Ripple and XRP have both positive and negative sides. The Good. Ripple has been in the crypto game long enough to have gained the trust of several prominent financial institutions and governments ce chainlink beach pants You probably want position: sticky instead of fixed
hi there my front end friends people often use position fixed instead of position sticky when sticky would actually solve some of the problems that theyre running into and it also opens up fun effects like this one right here let me just make things magically appear well be looking at some of those things that position sticky is actually better at that people use position fix for well see how we can do this fun effect that we just looked at right here and a couple of other useful use cases for it as well and so to get started with that I have this example that is right here that were going to play with where I have a fixed box here will become fixed and a sticky right there and theyre just in you can see box fixed and then we have a box sticky right there and were going to sort of see the differences between them and just because I like having better color contrast its the same color is black on that so we can read the text inside them a little bit easier um so the first thing were going to do is look at what happens when we do a position fixed and then well look at the position sticky to compare them and when I first do fixed it looks like absolutely nothing has changed but if I scroll the viewport we can see that its now fixed in place and fixed is except for a few really small edge cases uh it will always be fixed to the viewport and scroll along with it or yeah wont scroll as everything else Scrolls by position sticky can often feel very similar but its always a little bit weird because you first put it on and it doesnt actually stick and it doesnt actually do anything but lets say I have a bottom but were going to start with top bottoms a bit of a weird Edge case that were going to get to after um but if I do a top sticky in a way its similar but its going to look like its not working until it reaches the top of the screen and lets put a top zero here actually just to compare the two because at this point theyll look like theyre exactly the same but when I get to the bottom here that sticky wont Escape its parent and it stays up and Scrolls off fixed comes out of the flow and it really stays out of the flow whereas sticky is sort of in the flow gets pulled out but can never escape from its containing block like that and it stays right there and were as fixed as soon as I did that top zero you can see if I dont declare the top zero uh it will stay where it originally was in the flow even though everything will come up around it but as soon as I declare a position on that or a top or whatever um it will go where I want it to and so thats already a pretty noticeable difference between the two uh right there right so very big difference now one time where people use position fixed when they probably want to use position sticky is if they have a navigation so actually lets comment these out for the time being and if we come in here and I go all the way up I already have one ready so we can turn that on just a very simple nav like were used to seeing styled it up a little bit and lets go here and its all in my header so were just going to come and write header here and on this header we can try both and lets start with a position of fixed and so just like that fixed one here as soon as I declare this its pulled out of the flow and youll notice that everything else is moved up underneath it you can see thats there and it also shrunk down so I can come back here and say with 100 again and just to be safe we can do our top zero and this is often what people want where were scrolling down and its fixed at the top the problem is were covering some of the original content here and this is a silly demo so Im not covering anything important but a lot of the time we have our hero area or some you know its our big cool thing that were making that home page look really good and then all of a sudden part of it goes underneath that and it sort of stinks if I come and I change this to position sticky I solve that problem because position sticky is part of the flow until it sticks and then as soon as Im going its stuck to the top zero and its exactly the same thing but without having to worry about adding like a padding or margin or something on your body to accommodate the height of your navigation so right away really nice use case this will just continue to go forever with the page because the header is my first thing thats inside my body and as long as its the first thing or as long as like the body is the parent you never have to worry about it getting stuck like this one was getting stuck before and like actually scrolling off if you do have it nested within other things then you always run into that potential where something might scroll away now one thing you could do with if youre using a position fix though lets put this header back to a position of fixed but instead of a top we can give this a bottom of zero and its going to go down to the bottom of the page and be stuck there and maybe thats what we want I dont think it looks fantastic in this use case but there you go that works if I make this a position sticky on the bottom instead it doesnt work and it seems like the bottom zero is not working and thats a little bit frustrating and its sort of like why it should just be stuck to the bottom so for this were actually going to turn off our header and go back to this silly example but Ill be back in just one second because I need to add a little bit of content to this page all right so Ive updated Ive added a little bit of content over here so we can see we have some paragraphs there and as were going to run into were a bit more in the sticky side but I want to focus on the fixed side for just one second which is here here or I have my top zero that we saw before and if I do a bottom of zero just to reiterate it goes to the bottom and now its fixed to the bottom of the page over there and it just sits there and it cant move its just where it lives now whereas if we do the same thing with our position sticky and you know what lets just turn off we dont really need the fixed anymore so Im just going to remove that whole thing from here and then we can just worry about the position sticky one so for now Im gonna lets keep this one at a sticky to the top just so we can see that it will stick to the top and slide down and you can see Ive added a second sticky box here uh which is just we have my first one here then we have another content with another one there and when we get there its this one stays with its parent and it pushes away because the parent is moving off and then the second one sticks and it sticks to the top and you would think that if we switch this over the bottom wed get sort of the same behavior maybe upside down or something but it doesnt actually change anything it just looks like regular flow and you feel very defeated and this is where sticky is a little bit strange in this context but what were going to do is take sticky here and move it down to the bottom and were going to take this second sticky and also move it down to the bottom and the first one it wont actually stick you can already see the second one is sort of sticking and the reason this one is not sticking is because it never actually reaches the bottom of the screen the second one here however youll notice how its actually pushed to the top its at the very top of the content now and its going to stay there and its going to stick to the bottom until it goes back to its natural resting place where it was originally in the flow so its sort of the opposite behavior of when we had this at the top where it would stain its natural resting place scroll scroll scroll uh and then if it got to that top zero then it would stick and of course this Ive only been using zero but I could do like a 2 RAM here and then its gonna stick two Ram away from the bottom so as I go there it doesnt stick until its theres a gap of two REM on the side over here so we can see that its going like that and then it sticks and so yeah its basically the opposite instead of being in the natural flow and then sticking at the top it will stick to the bottom of the screen until it gets to its natural flow and its really weird its a bit of an edge case and kind of strange and you probably wont use it too often but its one of those times where when you do want to use it and youre really frustrated about why its not actually working you really do need to make sure its at the bottom of the content in the first place and then realize it will go to the top of the parent stick into place until it gets to where it originally was you may be asking why would I ever want to do something like that but thats actually how I created the effect on this one right here where we had that show up at the end just like that uh and the way this is working is really interesting but we do need to use you can see I have a position sticky and I have the bottom that is set right there so were its basically stuck there the whole time but uh and its its part in this content I have my content box and then I have the end here and the real trick is with how Im doing this is I have two things so lets actually take this white or lets just drop the opacity of this one down to like 8.2 so we can see behind it and the entire time the end is always there and its stuck with the parent and its flowing along stuck at that point or how far 10 REM off the bottom of my page and then as Im scrolling Im scrolling Im scrolling eventually the parent is there and it goes along with the parent and just to show you where the parent is lets add a border on there like two pixels solid red just to make it easy to see and so you can see its always staying two Ram away from the bottom of the page until it gets back to what its natural resting place actually is and then the rest of the parent sort of flows off and it goes along with it and so yeah its a nice little fun way to make that type of effect I dont think its something you would use on every project but it could be a cool little addition that you could have for certain things a sign up for your newsletter that magically appears or something like that and it creates sort of a fun little unexpected Behavior maybe this could be improved if there was a shadow on something um but yeah I think its a fun little way to have that type of effect but theres also more practical ways that we can use position sticky here I have my content here and then I just I basically just have content with headings and what I want to take a look at here is what we can do with it and a bit more of a practical use case so we can play around with it a little bit so on these theyre called content and were going to get rid of the background color on them because I dont think with the background color it would be something youd really want to keep but it illustrates how its going to work and then when we turn off the background color its when it looks a lot cooler so we have the content here and Im actually actually Im going to wrap this in a media query some new app media and were going to say width is greater than lets say 800 pixels and this is the new Range Syntax for media queries that is in all browsers now though um Its relatively new so browser supports not fantastic but for demos or personal projects you can get away with it but you might just want to do a Min with 800 if it was an actual project and my content is going to get a display of grid with a grid template columns and lets just say its going to be 100 pixels and then one fr so it gives me two columns which isnt the greatest thing in the world right now but then what we can do and this should help illustrate one of the gotchas with position sticky as well that we can run into um so were going to say content anything that is not uh an H2 will be a grid column of two and that just means the paragraphs should all live on the right side except it is not working why not because I forgot my period right there um so there we go and we can also go and lets take the height off of these because we dont really need the height on that it will sort of break how we want to do things there we go so we have all my content that is smushed together a little bit now but it looks a little bit more like how wed actually you know have things minus the background color so a little bit of setup work but we got there um so we have my headings that come here and then we have the text thats there and thats really the important thing and of course when we get to too narrow over screen they stack on top of each other because we dont really want this to happen at narrow screen sizes and lets us also add a gap here to REM um just so things arent too stacked together perfect and with that now I can say that inside lets just say content and choose the H2S that are there and of course this could be a class of like you know the heading or sticky heading or whatever you want to do for it and were going to say that the position is sticky and were going to say that the top in this case lets do like a one REM just so its not going to actually stick you know it should help it stick where we want it to be and then you can see the heading is sticking to the top and scrolling down and just if I did a zero there just to show you why I put one Rim uh it sticks a little bit too close to the top of the page in my opinion so were going to keep that at one and then it sticks and its sort of there and then it it stays within its original one uh so its sticking and then this one comes and then the next one comes and the next one comes and so on and so forth and it doesnt look too fantastic right now but if my content we have it right here or well go up to the original declaration even though its a little messy because I had all that other demo stuff here but we take off the background color there and all of a sudden things look a little bit cooler where we also want to take off the text color like why did all my texts disappear why is it at low opacity so now when I scroll down the first heading sticks while were there and then the second heading is there and then the third heading and then the fourth heading and so on so we stay it sort of like keeps the heading for that content there as were scrolling down which is kind of neat and a fun little effect and then it goes back that way and when you do it like this it can look like its not really working properly uh at times depending on how you set it out and thats one of the reasons I wanted to originally have the background color set on it so we could actually see what its sticking inside of and then why is it pushing off and if ever you have something thats not sticking or its going away before you think it should go on the parent and add a background or a border or something so you can visualize whats happening because when we dont have those things its much less obvious whats actually going on now Ive made an update to my text here to make it one big paragraph and this same issue can happen if youre using um display Flex instead of display grid just because of how Flex works and well explain it once I see what it is but youll notice even though I kept everything else the same things arent sticking and that can be really weird so as I just said turn colors on and in this case if you put the borders on the parent you wont see it so you can also put an outline or borders on the children to see whats happening and the item that I want to stick isnt sticking because its stretching and its actually reaching the bottom so the you know normally we were if this was actually going to stick we need the height to be here the whole height its filling up the parent is going away so if the parent is going away right lets add a border here Order of five pixels uh solid itd be black um and we have the padding there so like it has nothing to stick to because its already being pushed off on the bottom over here and so if ever this happens which display Flex by default is going to have that item stretch or grid will if you only have one you know its two cells here it didnt do that before because I had multiple cells coming so this was just living within that top cell so just those types of things they can catch you off sometimes are these and its very easy to fix just where you have your display Flex or your display display grid you do an align items up start and that just pushes them all to the top so theyre not taking up any room and now when I go it will actually stick into place because it has room to to go down and go into and that would be the exact same fix if youre using flexbox and this is one of those things that can be infuriating so turning on the border on the parent can help and if that doesnt help turn the borders on on the thing that should be sticking at the very least so you and then often what you see is its actually stretched out and then once youve solved that problem you turn off all your borders and you get that same effect coming back in and it can look pretty neat once again just like we had before and while we sort of looked at the basics here we can do a lot more with position sticky like with what you can see going on on the screen right now which is something I built out a little while ago using primarily position stick key to look at how we can tell a story using CSS and if youd like to see how I did this or watch this video it is right here for your viewing pleasure it was a lot of fun to put together so I hope that you do enjoy it and with that I would like to thank my enablers of awesome Enrico Michael Simon Tim and Johnny as well as all my other patrons for their monthly support and of course until next time dont forget to make your record of the internet just a little bit more awesome Position fixed and sticky have a lot of similarities, but sticky has a few things it does a lot better and a few things that we just can’t do with fixed, so in this video, I compare the difference between the two and also look at a few fun use cases for sticky. Links Use position sticky to tell a story with CSS: Position relative and absolute explained: Timestamps 00:00 - Introduction 00:27 - comparing fixed to sticky 02:29 - sticky is better for headers and navbars 04:14 - sticking to the bottom might not work how you expect 07:35 - A fun use case for sticking to the bottom 09:13 - Headings pushing each other out of the way 12:58 - The mistake people make with position sticky that stops it from working css -- Come hang out with other devs in my Discord Community Keep up to date with everything Im up to Come hang out with me live every Monday on Twitch! --- Help support my channel Get a course: Buy a shirt: Support me on Patreon: --- My editor: VS Code - --- Im on some other places on the internet too! If youd like a behind the scenes and previews of whats coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: Codepen: Github: --- And whatever you do, dont forget to keep on making your corner of the internet just a little bit more awesome! css,
cineberisso.com.ar