Displaying no background-color until release finger

Question

I am making a website. Website has navigation, that it transparent (background: transparent), when you open it. when you start scrolling, it becomes colorful, some color like grey, midnight blue, or something. And there is a div, at the bottom of the page. when you scroll enough, as bottom, as possible, the navigation become display:none and if you scroll bit top again, it will have display:block again. That JUST works, but there is a problem on iPad (well, does not tested on other touchscreens, but probably same).

Problem is, that, when i scroll to the bottom of the page, header disappears, but when i than want to scroll top again, navigation will appear, but with no background-color..until i release my finger. Weird, right?

Hope, you understand, there are photos:

When scrolling top, it should have background-color, but when holding, has transparent background as shown

When you scroll to the bottom of the page, menu disappears, this is great.

This should happen, when you scroll up enough, but it does not work, if you are still scrolling -> holding the screen

Now, There is JSFiddle... CSS got over 1500 lines, important is

#main-header {
    position: fixed;
    width:100%;
    height:70px;
    top:0;
    background-color:#34495e;
    z-index: 100;
}

https://jsfiddle.net/0vL1dpas/ <- JS fiddle NOTE It is so messy, no images, just cause of code, and JS!

And important link to working website

http://david.addagio.cz/gospel

And NOTE 2

$(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 is the primary code, used for this whole when-bottom-menu-disappear animation

My question again is... in minimal:

"Why it works, and it has the display:block;, but until I release finger, it has NO background-color???"

Well, hope, it will help solve my problem, PLEASE help, in hurry with this.

Any help -> I'll be glad

Thanks a lot!

You should be able to use javascript's 'onmouseup', the equivalent of which for touchscreen devices is 'ontouchend'. — TheDmOfJoes, Mar 10 '16 at 16:08

score 0 · Accepted Answer · edited May 23 '17 at 11:45

0

Please, read this. I had the similar issue with scrollToTop button. I've just remembered, that iOS have some strange behavior w/ firing scroll event and also with js executing in time of scrolling (maybe not your case). Maybe it helps you to understand the issue.

edited May 23 '17 at 11:45

Community

1
1

answered Mar 10 '16 at 16:17

Shulyk Volodymyr

767
6
11

WOW! exactly! well, this is my problem, i will try, if it will solve it, you got 50 rep points :-) ;-) – David Stančík Mar 10 '16 at 16:49

Displaying no background-color until release finger

1 Answers1