I am currently in the process of developing a website. The navigation on the website starts off as transparent (background: transparent) when opened, but as soon as you start scrolling, it should transition to a colorful state with shades like grey, midnight blue, or similar colors. At the bottom of the page, there is a div which, upon scrolling all the way down, the navigation disappears using display:none. However, if you scroll back up slightly, it should reappear with display:block. This functionality seems to work well, except for a minor issue experienced specifically on iPad (although not tested on other touchscreen devices).
The problem arises when I scroll down to the bottom of the page and then attempt to scroll back up. In this scenario, the navigation bar does reappear, but without retaining its background-color until I release my finger from the screen. Quite strange, isn't it?
I hope these descriptions make sense. For visual representation, please refer to the following images:
https://i.stack.imgur.com/M2cD1.png
While scrolling back up, the navigation bar should have a defined background-color, yet while holding onto the screen, it remains transparent as depicted.
https://i.stack.imgur.com/evfFv.png
Upon reaching the bottom of the page, the menu successfully disappears, which is the expected behavior.
https://i.stack.imgur.com/s3PmM.png
This situation should occur when scrolling upwards enough; however, it fails to function correctly if continuous scrolling (holding) is ongoing.
For further details, view the JSFiddle demo... The CSS content exceeds 1500 lines, where an essential snippet is
#main-header {
position: fixed;
width:100%;
height:70px;
top:0;
background-color:#34495e;
z-index: 100;
}
https://jsfiddle.net/0vL1dpas/ <- Visit JS fiddle for demonstration NOTE Complexity due to extensive code and JS focus!
Don't forget to check out the operational website:
A secondary note to mention
$(function(){
$(window).on('load scroll resize orientationchange', function () {
var my_height = $("#full_contact").height();
var important = $(document).height();
var final = important - my_height;
if ($(window).scrollTop() < final) {
$('#main-header').css("display", "block");
$('#main-header').css("background-color", "#34495e");
document.getElementById("#navigace");
$('#navigace').addClass('.navigace_scroll');
$('.navigace_scroll').removeClass('#navigace');
}
else{
$('#main-header').css("display", "none");
}
});
});
This script represents the core mechanism behind the disappearing navigation at the bottom feature.
To sum it up succinctly, my primary query is...
"Why does the navigation appear with display:block;, but without the background color until I release my finger?"
Your prompt assistance in resolving this matter would be greatly appreciated as I am urgently seeking a solution.
Please feel free to provide any suggestions or guidance.
Thank you very much!