#sticky nav

[gramatter]

How to Make a Fixed Header in Squarespace 7.1 — Squarespace Web Design by Christy Price

A step by step guide to easily creating a fixed or "sticky" header in Squarespace 7.1. No custom code required!

[themesonly]

Theme: Minimalism

Theme garden / demo

Minimalism is the minimal Tumblr theme that offers plenty of customisation options allowing your content to shine without unnecessary distractions.

Minimalism theme offers the following features:

Configurable page background, content grid & page header

Fully responsive layout

Icons for most popular social services

Infinite scrolling

Sticky navigation

+ Much more

Minimalism theme was handcrafted with plenty of passion & great attention to detail by Romans Bermans (BETADELI). If you like the theme and want to support its future development please donate via PayPal.

Theme support: [email protected]

[enzovezz]

Fijar su menu al borde superior puede ser interesante, pero solo funciona si su menu se encuentra al tope de la pagina. Aquí les voy a enseñar como tener un menu abajo de su banner o logo y una vez que el menu toque el borde superior del navegador, se adhiera a este por todo el scroll hacia abajo.

A este tipo de menu se le llama Sticky Navigation o Navegación Adherida.

Cuídense mi gente, si disfrutan el video, denle Like!

Visita mi Portfolio http://www.endesigner.co

Be Connected: https://www.facebook.com/creasincodigos https://plus.google.com/u/0/b/1149404... https://instagram.com/enzovezzaro/ https://www.tumblr.com/blog/enzovezz

(via https://www.youtube.com/watch?v=83RoUmNXkDQ)

[creationandconsumption]

Sticky Navigation Bars with jQuery

Let's talk jQuery.

I'm not going to try to explain all the details here, but jQuery is a JavaScript library that lets you make your theme (and websites in general) more dynamic. It provides the tools to create neat features like drop-down menus, infinite scrolling, custom tooltips, and what I just implemented, sticky nav bars.

In order to use jQuery, you have to link to it in your head. There are a couple of ways of doing this: one, you can download it from jQuery.com and host it yourself, or two, you can use a content distribution network (CDN), like Google's Hosted Libraries page. I recommend the latter. To link from Google, simply embed

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

in the head of your page. Once you've done this, you'll have access to all that jQuery has to offer.

As a bit of an aside, if you're looking for some place to develop and test your code or if you just want to see some example code you can tinker with, jsfiddle is a good resource.

Another aside: before I did anything else, I set the background-attachment property to fixed so that the background no longer moves when you scroll around the page. This makes my posts look like they're floating on top of the page, and combined with the sticky nav bar, this gives my theme the appearance of depth.

Alright, so how do you make a nav bar that "sticks" to the top of the page when you scroll down past it? The answer is, it can be complicated. With just the standard jQuery library, it involves checking the height of the browser window, comparing that to the height you want the nav bar to activate, and then applying or unapplying a CSS class depending on the result of the comparison. It's messy, cumbersome, and not very elegant, but given enough time and effort it works.

The good news is, there are shortcuts. For my nav bar, I used a jQuery plugin called Waypoints that adds a method that allows you to execute a block of code when the top of the browser window scrolls to an element. I uploaded Waypoints to Tumblr here -- you'll have to link to it in the same way you linked to jQuery -- or you can download it and host it yourself. Just make sure you link to it after your jQuery link.

Alternatively, it's possible to use the ScrollSpy or Bootstrap plugins to implement a sticky nav, but I haven't tried either of them myself.

Back to Waypoints. Here's what my script looks like:

<script> $('nav').waypoint(function() { $("nav").toggleClass("sticky"); $("header").toggleClass("sticky2"); }); </script>

Essentially, what it does is this: when the browser window scrolls past the nav element, it toggles the .sticky and .sticky2 classes on the nav and header elements, respectively. Here's the .sticky code; the key here is that the position of the nav element becomes fixed:

.sticky { position: fixed; width: 100%; left: 0; top: 0; z-index: 100; }

The most important piece of this puzzle, however, is the code affixing .sticky2 to the header. The sticky nav works without it, but in order to make this toggle completely smooth and natural, .sticky2 is applied to the header to add some extra bottom padding to make up for the space vacated by the nav bar. Without this extra little bit of code, your content will jarringly move up the page when .sticky is applied. Honestly, if your transition isn't smooth, you're better off not having the code in the first place.

And that's it! Three lines of jQuery and two new CSS classes, and you have yourself a sticky nav.

"Simple is good."

--Jim Henson