Having trouble with scrolling watcher script

Design help General
1

UPDATE: the problem was resolved changing the name of the function i used.

enjoy the design http://alinsandudesign.webflow.com

Hey guys,

I wanna design my portofolio in one page but i want the menu to follow the page.

the script i done works fine with every page i designed even when i put it in this page the page scrolling script works but the links do not work any more.

I think the smoth scrolling script from webflow is the problem

please have a look and if you know a solution please give feedback

2

Sweet site Alin! Can you show us how you set up the scrolling watcher (the links have a different style when you scroll to that part of the page)?

3

I used javascript and jquery on the page to make an OnScroll Event that calculates the distance from the top of the page to every segment of the page and retreves the current page scroll and then compares them, after it decides in which segment of the page the scroll is the it changes the active state of one of the menu items from the nav bar and resets the other ones to simple menu items.

I’ve work about 2 days to make the code work, and first i tested it on a local test site.

1 Like
4

Excellent code @theredonem :wink:

//scroll script
//scroll event
window.onscroll = scrollwatchfunc;

//scroll watch and menu modifier
function scrollwatchfunc () {
	var y=getScrollXY();
	var homeoffset = $('#page-nav-home').offset().top,
		aboutoffset = $('#page-nav-About').offset().top,
		portofoliooffset = $('#page-nav-portofolio').offset().top,
		contactoffset = $('#page-nav-contact').offset().top ;
	if(y>(contactoffset-120)){
			document.getElementById('homem').className='w-inline-block nav-link';
			document.getElementById('aboutm').className='w-inline-block nav-link';
			document.getElementById('portofoliom').className='w-inline-block nav-link';
			document.getElementById('contactm').className='w-inline-block nav-link nav-sel';		
		}
		else
			if(y>(portofoliooffset-120)){
				document.getElementById('homem').className='w-inline-block nav-link';
				document.getElementById('aboutm').className='w-inline-block nav-link';
				document.getElementById('portofoliom').className='w-inline-block nav-link nav-sel';
				document.getElementById('contactm').className='w-inline-block nav-link';
			}
			else
				if(y>(aboutoffset-120)){
					document.getElementById('homem').className='w-inline-block nav-link';
					document.getElementById('aboutm').className='w-inline-block nav-link nav-sel';
					document.getElementById('portofoliom').className='w-inline-block nav-link';
					document.getElementById('contactm').className='w-inline-block nav-link';
				}
				else
					if(y>(homeoffset-120)){
						document.getElementById('homem').className='w-inline-block nav-link nav-sel';
						document.getElementById('aboutm').className='w-inline-block nav-link';
						document.getElementById('portofoliom').className='w-inline-block nav-link';
						document.getElementById('contactm').className='w-inline-block nav-link';
					}
} 

function getScrollXY() {
  var scrOfY = 0;
  if( typeof( window.pageYOffset ) == 'number' ) {
    //Netscape compliant
    scrOfY = window.pageYOffset;
  } else if( document.body && ( document.body.scrollTop ) ) {
    //DOM compliant
    scrOfY = document.body.scrollTop;
  } else if( document.documentElement && ( document.documentElement.scrollTop ) ) {
    //IE6 standards compliant mode
    scrOfY = document.documentElement.scrollTop;
  }
  //window.alert( 'Vertical scrolling = ' + scrOfY );
  return [scrOfY];
}

code by @theredonem - http://alinsandudesign.webflow.com/

1 Like
5

Such a hero - works like a charm!