[Pro] Sticky Nav Menu

Trying to use Walter’s Sticker action to create a Nav Menu that will stick to the top of the page when the user scrolls down.

I’ve applied the action a couple of different ways (different parent items) and I’m not seeing any affect at all. It’s supposed to work like this: http://www.deltadesign.co/fw_examples/jQuery/walters-sticker.html

Here’s what I’m after: a nav menu that is not at the top of the window until the user scrolls down the page, then it stays at the top of the window until the user scrolls all the way back up to the top of the page again.

Is this possible in FW?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Your problem is likely to be a javascript conflict as you are using both script/protaculous and jQuery on the same page - never a good idea.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for that, David. I think there’s a way to do what I’m after with CSS, but I’m not sure. Does anyone know if this is a possibility?

I want a nav menu that sticks to the top (backdraft has one and the Softpress home page too) but starts out a couple 100 px below the top, until the user scrolls down.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There is a new feature in the latest browsers called position: sticky, but it is only supported in the very very newest browsers. That will work in CSS alone, albeit only for the hipsters.

Sticker is designed to produce the effect you describe, and I am willing to bet that if you apply it on an otherwise empty page to an HTML element, it will stick and un-stick the way you desire. If you don’t include jQuery on your page, you may have to find a Prototype way to do the same thing (which is not usually hard).

Walter

On May 20, 2015, at 6:08 PM, Doty email@hidden wrote:

Thanks for that, David. I think there’s a way to do what I’m after with CSS, but I’m not sure. Does anyone know if this is a possibility?

I want a nav menu that sticks to the top (backdraft has one and the Softpress home page too) but starts out a couple 100 px below the top, until the user scrolls down.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yep, unsurprisingly, you guys are both right. I deleted the slideshow and the associated html markup and it’s working as expected: bet007(中国)官方网站

I wish there were an alternative. More slideshows need to be added to this site in the future, so this seems to be a dead end. My first priority is to keep the site responsive, including the sliders.

Thanks for the help!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There are alternative solutions for both - ie a jQuery sticky item or alternative sliders using Script/Protaculous.

You just have to find one and I am sure we can help you implement it.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ahh, so there might be a way! I know I don’t want to redo the slider. It is working for the responsive features I need and the client likes the look of it. So, where could I look to find a sticky nav bar? The slider is jQuery. So that means I need to find a jQuery sticky nav bar, right???

I found this link via the old FWTalk archives from you David! It makes me think Walter’s script could be done via jQuery. Perhaps it’s done via markup item and not an action?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I found this link via the old FWTalk archives

Yes that example uses jQuery - http://www.deltadesign.co/fw_examples/jQuery/jquery-sticker.html

I will dig it out when I get a chance and see what we can do for you.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks David!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Is there a way to make the nav menu stick all the way to the top of the page, instead of the 20 or so pixels below the top?


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Take the top margin of 17px off the Navigation item

margin-top: 17px;

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Ah ha! I knew it had to be easy David! Thank you…

I was looking for it in the html markup and forgot all about the item itself.


freewaytalk mailing list
email@hidden
Update your subscriptions at:

Ah ha! I knew it had to be easy David! Thank you….

Your welcome.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

All is well with this, except my google map on my contact page. When you scroll down the map appears on top of the navigation menu. I’ve tried adding a z-index to the nav menu, but nothing changed. Ideas?


freewaytalk mailing list
email@hidden
Update your subscriptions at: