Menu visible after scolling - Page 1

User 2889676 Photo


Registered User
18 posts

Hi everybody,
I would like the menu to be visible only after scrolling.
How do I insert a javascript with RSD v3?
Do you think the script below can work?

$(document).on('scroll', function(){
if ($('#nav-region')[0].offsetTop < $(document).scrollTop()){
$("#nav-region").css({position: "fixed", top:0});
}
if ($(document).scrollTop() < $("#position-saver")[0].offsetTop){
$("#nav-region").css({position: "static", top: 0});
}
});

Otherwise how can I do?
I attach the test file.
I thank you for help.
Maria
Attachments:
User 122279 Photo


Senior Advisor
14,454 posts

Pretty well hidden, by the looks of it. ;) Can't open your zip file. It seems to be empty, or invalid.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 379556 Photo


Registered User
1,535 posts

In this example (Page - RSD file) I did the following.

1. I gave the Body sufficient minimum height to allow scrolling.
2. I made the following settings for the navigation menu container -
(a) In the Regular State I set the Layout > Visibility to Hidden
(b) In the Out of View State I set the Layout > Visibility to Visible, the Position to Fixed with a Top setting of 0.

The above does the trick, but one gets a flash of the menu when the page loads. To prevent this I added a white rule with a thickness of 100, Position Fixed with a Top setting of 0. In the Regular State the Layout > Visibility is set to Hidden. In the Out of View State the Layout > Visibility is set to Visible.

Frank
User 2889676 Photo


Registered User
18 posts

Hello, I'll explain what I'd like to do better.
In the home, as an initial window, an image that is all-out. Possibly this image I would like it to be responsive.
After scrolling through the page I would like the menu bar to appear.
Unfortunately I can not insert my .rsd file and I do not understand why.
Thank you
User 379556 Photo


Registered User
1,535 posts

Attaching the RSD file is usually not possible in these forums, but a link to it can be inserted. One puts the RSD file somewhere online (or perhaps in Dropbox), and includes a link to it in the forum post. Alternatively, one can put the RSD file into a Zip file, and attach the Zip file.

The example I gave shows how one can make the menu bar remain hidden until the page starts to be scrolled. I'm now wondering whether it is wished that the menu bar remain hidden until the page is scrolled through completely to the foot of the page. If that is the case, I will leave to others the solution to the problem, as I do know how one can identify that the bottom of the page has been reached by the scrolling.

Frank
User 122279 Photo


Senior Advisor
14,454 posts

Like this, perhaps?
Attachments:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 379556 Photo


Registered User
1,535 posts

That certainly does identify reaching the bottom, thanks.

I think we will need more clarity as to what exactly is envisaged. Making a menu appear when one scrolls to the bottom, and not disappear as soon as one scrolls up might be tricky.

Frank
User 2699991 Photo


Registered User
4,803 posts
Online Now

Belvedere S.p.A. wrote:
Hello, I'll explain what I'd like to do better.
In the home, as an initial window, an image that is all-out. Possibly this image I would like it to be responsive.
After scrolling through the page I would like the menu bar to appear.
Unfortunately I can not insert my .rsd file and I do not understand why.
Thank you


Why not just put the menu in the footer of your page
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 122279 Photo


Senior Advisor
14,454 posts

Yes, that would be an easy solution. But we don't know exactly if she wants the menu to appear at the bottom. The thread starter should post her file so that we can see what she has in mind.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 244626 Photo


Registered User
811 posts

Something like this may be what the user is after...

http://jsfiddle.net/ke9kW/1/
Bootstrap 5 CSS Grid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.