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!
Highlight tabs on scroll (Scrollspy)
Re: Highlight tabs on scroll (Scrollspy)
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:
* 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 */
}
});
Re: Highlight tabs on scroll (Scrollspy)
This trick really worked! Thanks a ton Dave!!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 */ } });
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