1

have a fixed vertical dot navigation that fades in when the user scrolls to a certain section on the site so that they can see how many sections there are past that point and can navigate accordingly. If the user then scrolls back up past that point towards the top of the page, the navigation fades out again.

I've built the site so that on devices with smaller viewports (less than 1024px wide) that functionality changes so that the sections exist within accordions to make it easier for the user to navigate, and the fixed dot navigation disappears since it is no longer required.

Here's the Javascript code I have in order to make this work:

$(document).ready(function() {

var mq = window.matchMedia('(max-width: 1023px)');

if(mq.matches) {
        $("#cd-vertical-nav").hide(); //hide your div initially  
}

else {
        $("#cd-vertical-nav").hide(); //hide your div initially

        var topOfOthDiv = $("#actions-defined").offset().top;

        $(window).scroll(function() {
            if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
                $("#cd-vertical-nav").fadeIn(200); //reached the desired point -- show div
            }
        });

        $(window).scroll(function() {
            if($(window).scrollTop() < topOfOthDiv) { //scrolled past the other div?
                $("#cd-vertical-nav").fadeOut(200); //reached the desired point -- show div
            }
        });  
      } 
});

However I soon realised after testing this on an iPad that if first entering the page in portrait view, the vertical dot nav is hidden, which is correct but when rotating the device to landscape, the nav is also hidden and the page needs to be refreshed for it to function correctly. The same can be said vice verse, in other words, if entering the page on an iPad in landscape view the nav works fine, but when rotating to portrait view, where the sections change to accordions it is still visible when it shouldn't be.

I have found a way to show and hide the nav for portrait and landscape orientation but this just results in the original functionality being cancelled out i.e. when rotated from portrait to landscape the nav appears wherever you are on the page, even at the top.

Here's the code I used to achieve the show and hide for portrait and landscape:

$(document).ready(function () {

    var mql = window.matchMedia("(orientation: landscape) and (min-width: 1023px)");
    mql.addListener(handleOrientationChange);
    handleOrientationChange(mql);

    function handleOrientationChange(mql) {

      if (mql.matches) {
            $("#cd-vertical-nav").hide(); //hide your div initially

            var topOfOthDiv = $("#actions-defined").offset().top;

            $(window).scroll(function() {
                if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
                    $("#cd-vertical-nav").fadeIn(200); //reached the desired point -- show div
                }
            });

            $(window).scroll(function() {
                if($(window).scrollTop() < topOfOthDiv) { //scrolled past the other div?
                    $("#cd-vertical-nav").fadeOut(200); //reached the desired point -- show div
                }
            });
        } 

        else {
            $("#cd-vertical-nav").hide(); //hide the nav if the device is in portrait or max-width is 1023px
        } 
});

I hope people can understand my explaination, I would be very grateful if anyone can lend a hand and explain what it is I'm doing wrong/need to do in order to reach a successful solution.

Thanks in advance.

Marc

4

0 回答 0