How to do this Scroll Interaction

Design help Custom code
1

Hello everyone!

I have a quick question:

I am developing this website: http://mauros-stunning-project-31c034.webflow.io/ and it has different page sections that change as you click the menu items in the right side menu.

But, I also need that user can also change this menu items by scrolling, as this is a one page website, but I can’t find the way to do it.

Can someone help me please? Or give me some example with something similar so I can do it?

Here is the read-only link
https://preview.webflow.com/preview/mauros-stunning-project-31c034?preview=a0cdf873acefd5cb652d77eb2c8cefdb
Thank you very much for reading!

Here is my public share link: LINK
(how to access public share link)

2

Hi! You need to provide a read-only link to your project not a published link so that somebody may check out the way the page is done and help you if possible.

3

Thank you! I already Update the only-read link (:

4

I don’t think there is a trigger that can be activated just by “mousewhell scroll up/down” or swipeup/down or whatever. The interaction you tried to make is based on the objects actually scrolling in the viewport. In your case everything is fixed so no scrolling is happening.

If anyone can find a way to target interactions on mouse scroll and similar I would be glad to learn of this as well!

5

You could do this by setting the div holding all the content to 100vh and 100% width. Then you make sure that dive is set to overflow:hidden. Then you’re scrolling, but users don’t see the rest. Does that make sense?

1 Like
6

Thanks a lot, it seems it’s working. But, I would like to disappear the scroll bar. Is it possible?
Is it possible for me to contact you on Skype or another IM app? I would highly appreciate if you can answer me some other question.

Thank you very much for your help.

7

Hi Saul Miranda,

You can create it easily by using jQuery “click” method.

  1. First of all, add class in all menu-items (class name should be same). suppose your class name is “section-scroll”
  2. Then use the jQuery code inside the script tag.

Html Code

<ul class="nav">
	 <li class="active"><a class="section-scroll" href="#home">Home</a></li>
	 <li><a class="section-scroll" href="#feature">Feature</a></li>
	<li><a class="section-scroll" href="#screenshot">Screenshot</a></li>
	<li><a class="section-scroll" href="#testimonial">testimonial</a></li>
	<li><a class="section-scroll" href="#pricing">pricing</a></li>
	<li><a class="section-scroll" href="#team">our team</a></li>
   <li><a class="section-scroll" href="#contact">contact</a></li>
</ul>

jQuery Code

<script>
	jQuery(document).ready( function() {
		var scroll = $(".section-scroll"),
			scrollTop = $(".scrollTop");
		
		scroll.on("click", function (e) {
			var $anchor = $(this),
				offsetTop = 45;
			$('html, body').stop().animate({
				scrollTop: $($anchor.attr('href')).offset().top - offsetTop + "px"
			}, 1200, 'easeInOutExpo');
			e.preventDefault();
			
		});
	} );
</script>

you may see the live example click here