css position: sticky

This links highlights what's new in Chrome 56:

 https://developers.google.com/web/updates/2017/01/nic56?utm_source=frontendfocus&utm_medium=email

One cool thing amongst others (bluetooth access is also cool but this one css feature is something I wish we had a while back) is position:sticky.

It's available in Chrome 56 (stable as of Jan 2017) and to summarize, it allows to fix an element into the viewport when it's within a threshold.

.header {
 // Element will be "fixed" when it is 10px from the top of the viewport
 position:sticky;
 top: 10px
}

You could set top : 0; to make it stick directly to the top of the viewport.

Have to be conscious that this positioning might not be available in other browsers as of yet.

There's this site I use to check what's available: http://caniuse.com/#search=sticky

As of now, it's not available in IE (not very surprising...)


Comments

Post a Comment

Popular posts from this blog

Just learned about rsync

I just learned about the rsync command which is amazingly useful. I have been using scp to copy folders from one machine at home to a machine in the lab back and forth and so far it's been good, and dead simple, but always involved extra work like making moving directories around. Now that I learned rsync, I can simply back up my work from the lab to my machine and vice versa using a simple command. Here is the command I use: rsync --delete -ravuzn -delete-excluded --exclude=*~ --rsh=ssh ~/work/ david@server.at.work.com:~/work/ and then, (notice I remove the n flag) rsync --delete -ravuz -delete-excluded --exclude=*~ --rsh=ssh ~/work/ david@server.at.work.com:~/work/ so what does this command do: flags: --delete: if I have removed files from my local computer, they are also deleted on the server r: recursively go through the folders and subfolders a: archive v: verbose mode u: update z: compress files --delete-excluded: deletes excluded files passed as parameter (next flag) --exclu...
Read more

angular.js modules?

I've been playing around with Angular.js and one thing that I haven't really looked at yet are modules. My app currently has only one module. I was thinking that I should probably soon or later refactor it into more defined modules. Today, while searching for something else, I just found something surprising about modules: "Angular Modules are good for nothing...so far. Except for loading 3rd-party angular code into your app and mocking during testing. Other than that, there is no reason to use more than one module in your app. Misko said of multiple modules: "[you] should group by view since views will be lazy loaded in near future". I'd love for someone on the Angular team to enlighten us on what their plans are for that." https://coderwall.com/p/y0zkiw
Read more

Cut/Copy and paste in vi

To cut and paste in vi: Get to command mode (press esc) and type mx at the start of the place you would like to cut and go to the position where you want to stop cutting and type d'x. Explanation: m starts a buffer with name x and d'x will cut it . To copy and paste in vi: Type mx and y'x Explanation: same as above except that y'x is meant for yanking (copying) buffer with name x.
Read more