[Pro] Appear on Scroll Question

Freeway
1

Hi, the desktop version of site in the example has a menu across the top with a transparent backround and then as you scroll down a background appears before the rest of the page scrolls underneath the menu, all seems to be working great.

For smaller mobile screens, 768px and below, I have a different menu as I can’t get the fade on scroll to work, landscape view on an iPad for example. I have seen fade on scroll working on mobile devices so I’m wondering what I need to add to my code to make it work, any thoughts?

Here’s the script in Before :

And the CSS in Before :

body { margin: 0; } #hidden-nav { display: none; position:fixed; top:0px; width:100%; height:61px; z-index:9999; }

Thanks
Dave

http://www.stundesign.co.uk/miniscoff/index.html

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

as you scroll down a background appears before the rest of the page scrolls underneath the menu, all seems to be working great.

So are you saying that for DT users it is OK because for me the menu has no background of its own and is unreadable at most scroll points.

Should the Dart & Ness header be in front or behind the menu on scroll?

D

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

3

Just to add to this. There are some missing Resources/JS on this page

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (ScrollAppear.js, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (FadeOut.js, line 0)

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

4

Sorry my got my scripts in a twist! Uploaded again using the correct script, based on one of your examples as it happens. Hope this works better.

Thanks
Dave

freewaytalk mailing list
email@hidden
Update your subscriptions at:

5

In addition I’ve tried this solution too but couldn’t get it to work either:

http://redvinestudio.com/how-to-make-a-menu-fade-in-on-scroll-using-jquery/

DD

freewaytalk mailing list
email@hidden
Update your subscriptions at:

6

Further developments, for some reason it now seems to be sort of working on mobiles, but rather than fading in with the scroll it snaps into view when you stop scrolling. But is fades out OK when scrolling back up.

DD

freewaytalk mailing list
email@hidden
Update your subscriptions at:

7

it now seems to be sort of working on mobiles, but rather than fading in with the scroll it snaps into view when you stop scrolling.

May be that you want to set an optional speed parameter (milliseconds) such as:

.fadeIn(1000);

D

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

8

Tried that but doesn’t seem to make any difference. I’ve also tried adding an ease-in-out transition to the CSS but again makes no difference. Not a huge problem ultimately but would be good to work out why it’s not working for future reference.

DD

freewaytalk mailing list
email@hidden
Update your subscriptions at:

9

Just tried something else - added the ‘hidden-nav’ class to the nested background panel, ‘nav-logo-container’ in addition to the containing div, ‘hiddennav’, removed the colour from ‘hiddennav’, re uploaded and now working…well it is for me!

Be good to know why this worked!

DD

freewaytalk mailing list
email@hidden
Update your subscriptions at: