Hi everyone,
Firstly, please see this site I am building: www.rivdatatest.com
When you first scroll the page I want the logo to scroll up out of view followed by the menu bar, but then the menu bar stops and stays floating at the top of the page as you scroll the rest of the page. I don't know the name of that effect, but I'd love to do it.
Is it possible with RSD, and if so how?
Menu scroll and stop - Post ID 268221
Scott Williams
Registered User
65 posts
Eric Rohloff
Senior Advisor
20,271 posts
Online Now
Hi Scott,
You need to use a little CSS by setting a class and then switch the the class with Jquery on scroll.
You need to use a little CSS by setting a class and then switch the the class with Jquery on scroll.
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 50) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
if ($(window).scrollTop() > 50) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Ernie Hodge
Registered User
895 posts
Your big pictures loaded a little slow on my cable connection. You might want to reduce the size so mobile users don't have to wait. 72 dpi usually works fine.
A Rose is Just a Weed in a Corn Patch!
Scott Williams
Registered User
65 posts
Thanks Eric. So I'll set the class id of the menu bar, add the class id into the two open/close brackets of your code, then add the code to my css file?
Scott Williams
Registered User
65 posts
Thanks Ernie, I'll get around to that.
Eric Rohloff
Senior Advisor
20,271 posts
Online Now
Make sure a version of Jquery is also included.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
Scott Williams
Registered User
65 posts
I'm not sure what I have to do. Can you give me steps?
Eric Rohloff
Senior Advisor
20,271 posts
Online Now
This will give you a start. You'll need to add more css styling to get it looking the way you want.
<style type="text/css">
<!--
.fixed {
position:fixed;
top:0;
}
-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 110) {
$('.nav-row').addClass('fixed');
} else {
$('.nav-row').removeClass('fixed');
}
});
</script>
<!--
.fixed {
position:fixed;
top:0;
}
-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 110) {
$('.nav-row').addClass('fixed');
} else {
$('.nav-row').removeClass('fixed');
}
});
</script>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
It's easy to overlook something you're not looking for.
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
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.
