Highlight tabs on scroll (Scrollspy)

This forum is for all Flare issues not related to any of the other categories.
Post Reply
AkshayT
Jr. Propeller Head
Posts: 2
Joined: Sat Jul 11, 2020 7:31 am

Highlight tabs on scroll (Scrollspy)

Post by AkshayT »

Hello!

Any idea why HTML5 output of MadCap Flare (side-navigation skin) shows the window.scrollY value as zero in the browser’s Developer Console (Debugger)?

Actually, I want to highlight the navigation tabs when user scroll down/up the page (this is similar to Scrollspy feature of Bootstrap). Since the navigation tabs are in anchor tags, we have written customized JavaScript code and our logic works on scrollY property. This code works perfectly fine in normal html doc but not working in MadCap Flare output(side-navigation skin).

I tried to figure out why this is happening, then I realized - MadCap Flare output displays the scrollY value as “0” in browser’s Developer Console all the time.


PS: Madcap Flare output generated using Tri-pane skin displays non-zero value of scrollY

Any help in above issue would be greatly appreciated!
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Highlight tabs on scroll (Scrollspy)

Post by NorthEast »

For HTML5 output using the side nav skin, you'd need to check for scrolling in a couple of ways:
* In desktop view, the topic is displayed inside flex containers, so you'd need to check scrolling on the .body-container using scrollTop. The window is never scrolled, which is why window.scrollY doesn't work.
* In responsive mobile and tablet views, the window is scrolled as normal, so you check scrolling on window using scrollTop and presumably scrollY.

So I'd guess your code doesn't work in the desktop view, but probably does work in responsive tablet and mobile views.

To give you an idea, I use the following code to check if the user scrolls down the page a certain amount:

Code: Select all

	/* SIDE NAV - in desktop view, only the .body-container is scrolled */
	$(".body-container").scroll(function(){
		if ($(this).scrollTop() > 200) {
			/*  scrolled down */
		} else {
			/*  not scrolled down */
		}
	});
	/* SIDE NAV - in mobile/tablet view, only the window is scrolled */	
	$(window).scroll(function(){
		if ($(this).scrollTop() > 200) {
			/*  scrolled down */
		} else {
			/*  not scrolled down */
		}
	});
AkshayT
Jr. Propeller Head
Posts: 2
Joined: Sat Jul 11, 2020 7:31 am

Re: Highlight tabs on scroll (Scrollspy)

Post by AkshayT »

Dave Lee wrote:For HTML5 output using the side nav skin, you'd need to check for scrolling in a couple of ways:
* In desktop view, the topic is displayed inside flex containers, so you'd need to check scrolling on the .body-container using scrollTop. The window is never scrolled, which is why window.scrollY doesn't work.
* In responsive mobile and tablet views, the window is scrolled as normal, so you check scrolling on window using scrollTop and presumably scrollY.

So I'd guess your code doesn't work in the desktop view, but probably does work in responsive tablet in mobile and tablet.

To give you an idea, I use the following code to check if the user scrolls down the page a certain amount:

Code: Select all

	/* SIDE NAV - in desktop view, only the .body-container is scrolled */
	$(".body-container").scroll(function(){
		if ($(this).scrollTop() > 200) {
			/*  scrolled down */
		} else {
			/*  not scrolled down */
		}
	});
	/* SIDE NAV - in mobile/tablet view, only the window is scrolled */	
	$(window).scroll(function(){
		if ($(this).scrollTop() > 200) {
			/*  scrolled down */
		} else {
			/*  not scrolled down */
		}
	});
This trick really worked! Thanks a ton Dave!!

I have been trying fix this issue for quite some time, tried lot of ways and finally it is working. I am so happy :)
I really appreciate your response.

Thanks again!
Akshay
Post Reply