All posts tagged “Sticky”

This spider combs its tiny silk threads to make them extra sticky

There’s a spider in Britain that’s a tad unusual. Instead of spinning “thick” silk threads (in this case, thick means several micrometers), the garden center spider can spin tiny nano-scale threads that are also extremely sticky. This is particularly useful when catching prey, but until recently researchers didn’t now how the spider managed to make such sticky silk. Now, researchers say they’ve figured it out: the garden center spider’s silk is sticky because the spider combs and pulls at the tiny threads to charge the fibers. In other words, this spider appears to have figured out how electrostatic interactions work.

Continue reading…

The Verge – All Posts

Awesome jQuery Plugins & Tutorials For Sticky Layer Or Table Header

For jQuery lovers, we have compiled this exclusive collection of 30+ jQuery plugins and tutorials that will help you with creating sticky layers or table header. This will help you when you need to fix either the grid or table header with many rows. With this collection, you can learn how to achieve the same sticky header or menu or section or table or grid header etc.

There are times when you need to fix the header of a page or fix the header within particular section in a page; or even when you need to fix the Top Menu or sidebar menu or layer to be scrollable or floating or fixed. We hope that you find this collection useful for you. What you have to say about this collection? Share with us via comment section below.

Sticky Float

This plugin makes it possible to have a fixed position element that is relative to it’s parent. A normal fixed positioned element would be “out of context” and is very difficult to use in the most common situations with fluid designs.

Fixedheadertable

FixedHeaderTable in its simplest form displays a fixed header for any valid table mark-up. This is an active jQuery plugin project so expect new features and improvements to be released.

Facebook Style Scroll Fixed Header In JQuery

While doing some UI changes of a website, we had to implement a FIX header which remains fix on top of screen while scrolling. Facebook has a similar header which remains on top of content.

table fixed header

The fixheadertable plugin is a javascript plugin based on the jQuery library and very inspired by jQuery-UI that provides solutions for representing and manipulating tabular data on a web page.

StickyHeader

Makes table headers stick to the top of the viewport when scrolling down HTML data tables.

jQuery-Stickem

Make items sticky as you scroll, to a point.

Sticky

Sticky is a jQuery plugin that gives you the ability to make any element on your page always stay visible.

How to create an animated sticky header, with CSS3 and jQuery

In this tutorial we’ll create a header that sticks to the top of the viewport, but so that it doesn’t interfere with the content, we’re going to minimize it when the user scrolls down the page.

Sticky Mojo

stickyMojo is a contained sticky sidebar jQuery plugin brought to you by MojoTech. It is lightweight, fast, flexible and compatible with Firefox, Chrome, Safari, and IE8+.

jQuery Sticky Header

In this tutorial we will create sticky header. The header is initially on its original place above the content, but as soon we start scrolling down the page, it sticks at the top of the page.

Persistent Headers

This is some code to get the header of some content area to stay visible at the top of the screen as you scroll through that content. Then go away when you.

Sticky Section Headers

JQuery sticky section headers takes a nested list and enables section headings as known from iOS table views.

Create a Sticky Navigation Header Using jQuery Waypoints

In this tutorial, we’ll be creating a navigation bar that stays with you as you scroll down — and we’ll also throw a gimmick or two into the mix to polish it off.

How to Code a Fixed Auto-Hiding Nav Bar with JavaScript

hcSticky is a cross-browser jQuery plugin that makes any element on your page float.

HC-Sticky – Jquery Floating Sticky Plugin

HC-Sticky is a cross-browser jQuery plugin that makes any element on your page float.

jQuery Sticky Footer plugin

The jQuery sticky footer plugin sticks your footer, with or without set height, to the bottom of your page. You can also use the sticky footer plugin to stick other elements to the bottom of their parent.

Fixed header and column jQuery Datatables

Uses jQuery datatables to make a responsive datatable with a fixed header and a fixed column.

On Scroll Header Effects

Some inspiration for headers that animate when scrolling the page.

Scroll Activated Fixed Header Animations with jQuery & CSS3

It’s become somewhat of a trend in web design to have a header that attaches to the top of the page as the user scrolls in order to provide the user with navigation or something along those lines. When the header attaches to the screen, we can use this point to create some pretty cool effects. In this tutorial we’re going to be looking at animations that activate as the user scrolls down.

On-Scroll Animated Header

A fixed header that will animate its size on scroll. The inner elements will also adjust their size with a transition.

jQuery Lockfixed

Allow elements to stick within viewport when scrolling. Toggles position: fixed only after scrolling the viewport. Degrades nicely on mobile and tablet browsers.

Fixed Table of Contents Dropdown Menu with jQuery

A fixed table of contents drop-down menu jQuery plugin.Just change the markup to add more depth to the menus.

jQuery Plugin for Fixed Header Tables

jQuery plugin for tables with fixed headers.FixedHeaderTable in its simplest form displays a fixed header for any valid table mark-up.

JQuery Scrollable Table Plugin

This jQuery plugin converts a properly formatted table, having thead and tbody elements (tfoot optional), into a scrollable table.

Scrollable Fixed Header Table

This plugin allows html tables to be scrollable horizontally and vertically while headers are still visible and in tack with the columns.

Spotlight: Constrained Stickies with jQuery

Floating content as a user scrolls through the rest of the page is child’s play. No JavaScript is necessary — you can do it with just plain old CSS. Slap a position: fixed declaration on it and boom!, you have a container that is fixed in a specific location in the page — it’s floating in the page to be more colloquial.

JQuery Fixed Table

jQuery.FixedTable is a jQuery plugin to create a fixed header and columns on a HTML table.

How to create sticky table headers using jQuery

Create a Sexy Persistent Header with Opacity Using MooTools or jQuery

Simple smart sticky navigation bar with jQuery

It’s been a while since I posted tutorial article. In this post, I will show you how to create a smart sticky navigation bar easily with just few lines of Javascript codes, powered by the mighty jQuery.


SmashingApps.com

Design sticky headers that will delight users

Read more about Design sticky headers that will delight users at CreativeBloq.com


The sticky header: you either like it or you hate it. It’s also a pretty commonly used design pattern now, and it’s here to stay for a while. There are arguments, like most things in our industry, that point out its merits and the problems it causes.




Creative Bloq

UI design pattern tips: ‘sticky’ fixed navigation

Read more about UI design pattern tips: ‘sticky’ fixed navigation at CreativeBloq.com


Once someone starts using your website or web application, they need to know where to go and how to get there at any point. If they can’t navigate through your your application easily, you’ll quickly lose them. Thus, designing effective navigation in your web application is crucial. In this series for Creative Bloq, Chris Bank of UXPin, the UX design app, discusses the importance of navigation design patterns and details examples from some of the hottest websites and web apps today.




Creative Bloq

24 Most Creative Sticky Notes

Sticky Notes is a Microsoft Windows application for taking notes and writing down important meeting and time so that you do not forget them. Creative geniuses have created some exceptional and creative designs for the sticky notes that are totally different from the usual designs that we everyday see on our office desks. This creative approach makes sticky notes a fun thing to use. Though, these designs are unusual and unique but they do not compromise on the functionality of sticky notes.

24 Most Creative Sticky Notes

So, without any further ado here we are presenting the complete list of most creative and unique sticky notes designs for you. These designs show that sticky notes do not have to just be in square design.

We hope that you will like this collection and find these sticky notes designs inspiring for you as well. Here is the full collection after the jump. Enjoy!

1. Floppy Disk Sticky Note

Floppy Disk Sticky Note

This interesting design of a sticky note has nostalgic value as it makes us remember playing games on 3.5” floppy disk. Furthermore, it is designed for taking notes – attaching notes to documents and to other surfaces.

2. Woods – Keyboard Memo

Woods - Keyboard Memo

These tree shaped memos are designed in such a way that they can be placed in between the keys of your keyboard and then make your keyboard looks like a forest. Each pack comes with 100 sheets. This is perfect to remember important meeting if you work on computer for long hours.

3. Sticky Note Wrist Watch

Sticky Note Wrist Watch

Wrist watch sticky notes are wearable means you can jot down important meeting and wear it on your wrist, so you cannot forget it. It includes one pad/watch consisting of 100 sticky notes. This makes a good gift to kids as well.

4. Clocky Notes

Clocky Notes

Another brilliant way to add memos and to do lists. This creative design lets you remember all your appointment. It comes in a retro alarm-clock shape. You can write your meetings drawing needles to remember the time and activity.

5. Mini at TV

Mini at TV

Another retro design concept for memo pad that resembles the old color TV. This memo pad comes in 30 color bar sheets and 30 gray bar sheets. This way you can add colorful memos and can set a color sheet for any particular activity.

6. Talk To The Hand Sticky Notes

Talk To The Hand Sticky Notes

This hand shaped sticky notes is designed to convey respect as hand commands respect. Now, you do not have to use the old boring yellow sticky note rather you can ‘Talk to the Hand’ to get your message across. This memo pad comes with 300 sheets.

7. Stone Memo It

Stone Memo It

If something is written in stone, it is permanent and cannot be changed. This idea has been taken to this Stone Memo it design where you can add memos on a stone shaped sticky note.

8. Butterfly Memo It

Butterfly Memo It

Butterflies are beautiful and we all love them. Use these butterfly shaped memo pad to leave your notes, memos and to do list.

9. Suck UK Block Notes Sticky Notes

Suck UK Block Notes Sticky Notes

These block game shaped sticky notes is a great way to leave small notes and mark pages on the books as well. Their vivid colors make them look eye catching and interesting. It comes in different colors and different shapes. Each pad contains 100 sheets, and there are 8 pads per pack.

10. I Am Sticky Drink Markers

I Am Sticky Drink Markers

Use these stylish memo on your drinks to identify your drink in a social gathering so that you don’t just blend into the crowd. Using these sticky notes is very easy. Simply peel the sticker off and stick it to your glass.

11. Cloud Notes

Cloud Notes

Say bye bye to old boring sticky notes, and use these cloud shapes memo to leave your messages. This set of sticky notes that will help you to write and remember everything that goes through your head by creating a nice sky of ideas and reminders around you.

12. Trump Memo

Trump Memo

This playing card memo pad comes in three different colors that are blue, red and black. Each pad contains 90 sheets. This is another interesting way to leave your message and note down important meetings that you do not want to miss.

13. Lovely Animals Sticky Notes

Lovely Animals Sticky Notes

This Lovely Animal Sticky Notes can be an ideal way to interact with children and make them remember about the important activities. They’re also the picture-perfect desk accessory to flaunt your individual style at work, school or use these cute memo-notes to bookmark your favorite book or magazine.

14. Sticky Tapes Cassette Notepad

Sticky Tapes Cassette Notepad

Cassette tapes are out of use these days, but these cassette tape shaped sticky notes creates a nostalgic feeling. This pad of super rad sticky notes is the exact size and shape of a cassette tape. Each pad contains 60 self-adhesive paper notes.

15. You’re On My Shit List Sticky Notes

You're On My Shit List Sticky Notes

Someone offended you? Write his name on this Shit List and let him know that he is on your shit list. Each pad of this sticky note contains 100 sheets that measures 3 inches long x 3 inches wide.

16. Suck UK Silly Page Markers

Suck UK Silly Page Markers

Here is another creative way to leave messages and jot down important meeting that you do not want to forget. These small adhesive notes are designed to mark pages or paragraphs, and comes in assorted colors and shapes. Each pad contains 150 sheets.

17. Post-it Pop-up Notes with Daisy Design Desk

Post-it Pop-up Notes with Daisy Design Desk

With this daisy design desk, all your written messages will always stand out. With these sticky notes, you can keep yourself organized and can multitask as well. Each Desk Grip Dispenser contains 200 sheets.

18. Social Sticky Notes

Social Sticky Notes

These Social Sticky Notes can be a great way to get your message across in a friendly manner. This Social Sticky Notes gives you a fun way to leave your message and interact with your colleagues. There are 100 notes per pack measuring 3 inches long x 3 inches wide.

19. Murder Ink – As if it was a crime scene

Murder Ink – As if it was a crime scene

This Murder ink sticky note comes with a blood spattered pen, and is perfect for pen notes, letters of resignation, hit lists, and office to-dos. There are 300 sheets in this sticky memo pad.

20. Salami Notes

Salami Notes

This Salami Notes comes in very beautiful and pleasing pink color that adds a life to your memos and notes. This particular design will appeal ladies the most.

21. Spoon and Fork Sticky Notes

Spoon and Fork Sticky Notes

Want to leave some message on the dining table? Then use these spoon and fork shaped sticky notes to leave your message. Using this memo pad is very easy as well and looks like as something is written on the utensils.

22. Band Aid Sticky Notes

Band Aid Sticky Notes

Though, these are not the real band aid but can be wrapped around your finger when something very important is written on it that you need to remember at the right time. Plus, these sticky note can be used as a page marker or bookmark.

23. Error Memo It

Error Memo It

Here is another intuitive design of sticky note that makes you laugh because of its design. You can use these sticky notes for creating memos and to do list.

24. Switch Notes

Switch Notes

This innovatively designed sticky note has a very simple yet useful design. It has a hole in the middle, just the right size to fix to a traditional light switch. This is very useful way to let someone remember about the things they are supposed to do.

Visit us at InstantShift.com

PSD to HTML


InstantShift

Creative Sticky Notes

Sticky note is a great little piece of paper, usually in highlight color tones so you won’t miss the important little note written on it. Today let me present to you some creative and beautiful sticky notes come in all shapes and sizes. We showcase the most unusual and creative sticky note designs.        …
favbulous

Design Inspiration: Flat Sticky Note

Provided as a fully coded HTML/CSS resource, this is a simple sticky note widget. It contains a date, a few colour options, a user’s profile image, edit/add icons, and a description.

This design was featured on Thursday 14th of November 2013. It’s designed by Marc Gonzales, and falls under the category of Element.

If you’d like, you can visit this site, or view all our other featured designs.

Design Shack

All Things Sticky: 15 Useful Tutorials and Plugins

Sticky-Plugin_mini.jpg

Sticky is to describe something on a website is in fixed position while scrolling within certain range. Intuitive but not intrusive sticky content could improve impressions on important content or make it easy to navigate. We all know there is a simple “fixed” positioned element in CSS. But in reality, for example, the sidebar will overlap elements such as footer or content. So in today’s article, you’ll find 20 useful tutorials and plugins for sticky header, footer, sidebar, side widget, section header, etc.

Layout of a website can be tricky. If you are interested in making websites responsive or parallax, don’t forget to check out our previous articles about responsive web design and parallax scrolling.

Sticky Plugin


StickyMojo sticky sidebar plugin


JQuery Stickem


JSticky Sticky Sidebar


jQuery Sticky Header


JQuery Sticky Header


How To Create A Fixed  Sticky Header


Persistent header


JQuery Sticky Sidebar Plugin


JQuery Sticky Section Headers


Sticky header jquery


How to Create a Sticky Floating Footer in WordPress


Widgetized Stickybar  WordPress


Sticklr  Sticky Side Panel jQuery WordPress Plugin


JQuery Sticky Footer



MedleyWeb.com

Design Trend: Sticky Headers and Navigation Menus

Today we’ll take a look at a trend that you have probably noticed, websites using sticky or fixed position headers. When a visitors scrolls down the header will remain in view at the top of the browser rather than moving out of view at the top of the screen. The sticky header can help to make it easier for visitors to navigate through a site as they can quickly access the navigation menu rather than having to scroll back to the top of the page.

Here we will showcase 25 different websites that are making use of sticky headers. The screenshots show the headers as they appear after scrolling down. Visit any of the example sites to see them in action.

Pixel2HTML

Pixel2HTML

De Vetpan

De Vetpan

Kerem Suer

Kerem Suer

Tweed Barbers

Tweed Barbers

Sweez

Sweez

Loft City Church

Loft City Church

Carrera

Carrera

Nosh

Nosh

Digitalworx

Digitalworx

Jumpbox Design

Jumpbox Design

With

With

I Shot Him

I Shot Him

Seed Spot

Seed Spot

Grain and Mortar

Grain and Mortar

Manos

Manos

Daniel Filler

Daniel Filler

Heathlife

Heathlife

Nic Brunson

Nic Brunson

Norther Pixels

Norther Pixels

Switch

Switch

Milk & Pixels

Milk & Pixels

Teamgeek

Teamgeek

Grooveshark

Grooveshark

Tony Headrick

Tony Headrick

Studio NEC

Studio NEC


Vandelay Design Blog

All Things Sticky: 15 Useful Tutorials and Plugins

Sticky-Plugin_mini.jpg

Sticky is to describe something on a website is in fixed position while scrolling within certain range. Intuitive but not intrusive sticky content could improve impressions on important content or make it easy to navigate. We all know there is a simple “fixed” positioned element in CSS. But in reality, for example, the sidebar will overlap elements such as footer or content. So in today’s article, you’ll find 20 useful tutorials and plugins for sticky header, footer, sidebar, side widget, section header, etc.

Layout of a website can be tricky. If you are interested in making websites responsive or parallax, don’t forget to check out our previous articles about responsive web design and parallax scrolling.

Sticky Plugin


StickyMojo sticky sidebar plugin


JQuery Stickem


JSticky Sticky Sidebar


jQuery Sticky Header


JQuery Sticky Header


How To Create A Fixed  Sticky Header


Persistent header


JQuery Sticky Sidebar Plugin


JQuery Sticky Section Headers


Sticky header jquery


How to Create a Sticky Floating Footer in WordPress


Widgetized Stickybar  WordPress


Sticklr  Sticky Side Panel jQuery WordPress Plugin


JQuery Sticky Footer



MedleyWeb.com