Scrolling with mousepad breaks css (horizontal-menu & content)

cemsdb

After following multiple posts on how to remove the scrolling feature (i.e. disappearing header+menu), the result seems to work at first. Though nothing happens when the up/down arrow buttons are used to scroll, the menu and content css breaks when the mousepad is used (the main menu moves downwards, and the main content moves to the top of the page, disappearing behind the menu).

How can I prevent this?

Ninja

cemsdb
Hi
On your custom css you have this code

.t3-mainnav {
    position: absolute;
    width: 100%;
    z-index: 100;
    top: 0;
    background: #006699;
    background: transparent;
}

Kindly use one background value and both would not work.
Also to move content down you already this code

.t3-mainbody {
    min-height: 82.2vh !important;
}

That pushing the mainbody up. You can add padding-top style on the same to create space between mainbody above section.

cemsdb

Ninja

Hi Pankaj, thanks for helping out. Unfortunately, both your suggestions don't seem to be related to my issue.

Your first suggestion is related to background-color, not layout/position. Though I agree with your suggestion to remove that particular code, this is a matter of redundancy (excess/unneeded code), and as far as I know, the last code wins out. So the change you suggested doesn't actually change any results.

As for your second suggestion, I removed that particular code and it doesn't resolve the issue, which continues to break the header/menu css the moment I scroll with the mouse-pad. Adding padding-top doesn't help, because the css "break" creates two different heights (both with padding, though the original main-content css starts below the menu/header, while after the "break" the main-content starts at the top of the page (behind the menu/header).

As far as I figure, this is directly related to the scrolling (/disappearing menu) feature of this particular template.

Please retry to create this issue by refreshing the page. At first, you'll notice everything looks normal, but the moment one uses the mouse-pad, the menu jumps below the header, while the main-content jumps to the top of the page (behind header).

Ninja

cemsdb
Your custom css already contains different code that not from template and making this change
here are some code i tried to change in custom css and worked

.scrollUp .t3-mainnav {
    position: fixed;
    margin-top: 4px;
    left: 0;
    right: 0;
    z-index: 1000;
}
.scrollDown .t3-mainnav {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 1001;
}

It will keep th main nav in header.
You have to change value in your custom css as above code .

cemsdb

Ninja

Thank you Pankaj, that seems to work! The main nav is now being kept in the header 🙂

I should note however that the first part of your code (.scrollUp) shows 4px for the margin-top, which created a little hiccup/jump. This is fixed by using 0px instead.

Lastly, the masthead still jumps to the top once the mouse-pad is used, hiding behind the header. How can I keep the masthead below the header at all times?

Ninja

cemsdb
Hi
No, the masthead is normal module position and used to work like this way.
Just for a suggestion header is not that big used when scroll as it hide a lot of stuff as well if you force the masthead position to sticky.

cemsdb

Ninja

My apologies, I did not mean to keep the header at all times (sticky). Instead, I meant whenever the user returns to the top of the page.

As you'll notice, once your scroll down using the mouse-pad you can't scroll back up and get the masthead in its original position (below the header). Instead, the moment your scroll-down with the mouse-pad (even a few pixels), the masthead immediately jumps to the top of the page, behind the header.

Ideally, if and when the user is at the top of the page, the masthead should always be below the header, not behind it (in case the user scrolls down and then back up).

Ninja

cemsdb
Hi
In that case you have to make custom scripts js, css and make change in PHP code as well since its customization and testing work as multiple parts already sticky it is not very easy to change.
You can find the file in the tpls/blocks/masthead.php for the position code and apply the css via custom.css file and js script in /script.js file template folder.

cemsdb

This issue doesn't only happen to the masthead in the contact page, it occurs in every page, include those without mastheads. Click on the main menu "News" as an example.

It seems to affect the .container's min-height, though when that code is removed, the content moves to the top (yet it is positioned visibly on top of the header, instead of hidden behind it <once the mouse-pad is used>) .

Ninja

cemsdb
Hi
This is all related with your custom.css codes
there is alot of code you added kindly remove that and check.
You can set the t3-mainav background color to blue instead transparent in custom css and if you want that remain blue.

cemsdb

Ninja

I'm sorry Pankaj, I really don't agree with your last response, which doesn't resolve the problem while subtly suggests I caused it.

To begin with, all the code I added (which really isn't that much) was suggested by yourself and other related posts. Even so, I (temporarily) cleared all the content in my custom.css and noticed the problem persists.

More importantly, the problem even occurs in the demo page! Thus...it's not me or my codes.

Please visit https://ja-social-ii.demo.joomlart.com/index.php/en/news

You'll notice the page behaves as it should if the keyboard arrow keys are used to scroll down, BUT...the moment someone uses the mouse-pad the header immediately disappears (instead of a smooth transition) and the main-menu (and everything below it) abruptly jumps up to the very top of the page. Exactly the same thing that's happening to my site, all caused by the use of the mouse-pad.

Ninja

cemsdb
Hi
Here is how it work in demo and same was on your site before customization
Header: sticky
Main nav : non sticky

On scroll up and down 2 different style use for Header below

.scrollDown .t3-header, .scrollUp .t3-header {
    background: #01579b;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}
.scrollDown .t3-header {
    top: -300px;
}

There is no other change. On your site now the main nav is move to Header so it also show sticky.and the up down style class is set to 0px so it will not change.

You can post an illustrated screenshot and point if anything is not working. It is no bug, only your custom css customization changes that changed your site view.

cemsdb

Ninja

To help get to the bottom of this issue, let's ignore my site and custom codes for the moment, and let's focus exclusively on the following demo link:

https://ja-social-ii.demo.joomlart.com/index.php/en/contact-us

I'm including two screenshots, the first is scrolling the site using keyboard arrows (site works as expected), and the second screenshot shows what happens when the mousepad is used (both the header AND the menu disappear).

1) https://prnt.sc/26ezoic

2) https://prnt.sc/26ezp1k

As you'll note, both images are of the bottom half of the page, allowing plenty of scrolling. This is important because if someone does small skips/jumps downwards via the mousepad, the header sometimes reappears, either as a flicker or via a smooth downward motion. Though most of the time, it doesn't reappear at all.

Please let me know if you're getting the same results.

FYI, I'm using Windows and this happens on both Chrome and Edge browsers.

Ninja

cemsdb
Hi
This is not issue if you scroll instant the header may flick as there is 2 different style for it.
WHen page scroll down: Header removed so page will show
When scroll back up : Header show again This all from the css code i shared. It is not something to fix except you change the code and disable it as i shared already with you for your website.
Hope its clear now.

cemsdb

Ninja

Hi Pankaj, thanks for the explanation. Though I understand the intended function of having the header disappear while scrolling down, and reappear when scrolling up, it must be said the execution or end-result of the code being used is not satisfactory, for at least two reasons:

1) It often flickers, amongst other small visual annoyances (short jumps/hiccups, etc). At least the new template version is an improvement on the past version, which flickered even more (specially the contact pg). I've seen this function (dynamic header via scrolling) in other websites working flawlessly, so I sincerely hope my comments are being recognized and appreciated enough to inspire further improvement in future template versions.

2) It must be recognized that NONE of this happens if someone scrolls via the keyboard (the header never disappears). I don't understand or appreciate a site working differently is someone uses a mouse-pad or a keypad. Was this done on purpose? If so, why would we want our visitors to have different experience by using the mouse-pad? If not on purpose, is this not a bug?

Lastly, I'm still trying to resolve this as simply and as fast as possible. If we start over and remove all custom.css code, how do I get both menu and header to behave normally, like any other template, meaning it doesn't stick and it doesn't vanish/reappear? It simply stays and moves as any other menu/header does when scrolling downward.

Thanks again for your help. I hope removing any desire to have the header/menu stick (or disappear) will make the solution that much simpler.

Ninja

cemsdb
Hi
If you do not want the sticky feature just open template folder
/js/script.js
find and remove Line 13 - Line 85

 (function($) {
 	$(document).ready(function(){
 		$.browser.chrome = (typeof window.chrome === "object");
 		var scrollLastPos = 0,
			scrollDir = 0, // -1: up, 1: down
			scrollTimeout = 0;
		
		scrollToggle = function () {
			$('html').removeClass ('hover');
			if (scrollDir == 1) {
				$('html').addClass ('scrollDown').removeClass ('scrollUp');
			} else if (scrollDir == -1) {
				$('html').addClass ('scrollUp').removeClass ('scrollDown');
			} else {
				$('html').removeClass ('scrollUp scrollDown');
			}
			$('html').addClass ('animating');
			setTimeout(function(){ $('html').removeClass ('animating'); }, 1000);
		};
		
		// fix only for chrome. because only chrome is error.
		if ($.browser.chrome) {
			$(window).on('wheel', function(event) {
			  if (event.originalEvent.deltaY > 0) {
				// down
				scrollDir = 1;
				scrollToggle();
			  } else {
				// up
				scrollDir = -1;
				scrollToggle();
			  }
			});
			// on first load.
			if ($(window).scrollTop()>0)
				scrollDir = 1;
			scrollToggle();
		} else {
			$(window).on ('scroll', function (e) {
				var st = $(this).scrollTop();
				//Determines up-or-down scrolling
				if (st < 1) {
					if (scrollDir != 0) {
						scrollDir = 0;
						scrollToggle();
					}
				} else if (st > scrollLastPos){
					//Replace this with your function call for downward-scrolling
					if (scrollDir != 1) {
						scrollDir = 1;
						scrollToggle();
					}
				} else if (st < scrollLastPos){
					//Replace this with your function call for upward-scrolling
					if (scrollDir != -1) {
						scrollDir = -1;
						scrollToggle();
					}
				}
				//Updates scroll position
				scrollLastPos = st;
			});
		}

		$('.ja-header').on ('hover', function () {
			$('html').removeClass ('scrollDown scrollUp').addClass ('hover');
			scrollDir = 0;
		});


    });

})(jQuery);

cemsdb

Ninja

Thank you Pankaj, this has resolved all the scrolling issues. I appreciate your help.

Ninja

cemsdb
You are welcome!