Question

有一个固定的垂直点导航，当用户滚动到网站上的某个部分时，它会淡入，以便他们可以看到该点之后有多少部分可以相应地导航。如果用户然后向上滚动超过该点朝向页面顶部，导航将再次淡出。

我已经构建了网站，以便在视口较小（宽度小于1024px）的设备上更改功能，以便在手风琴中存在各个部分，以便用户更容易导航，固定点导航消失因为不再需要它。

以下是我的Javascript代码，以便完成这项工作：

$(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
            }
        });  
      } 
});

然而，我很快意识到在iPad上测试后，如果首先以纵向视图进入页面，垂直点导航被隐藏，这是正确的但是当将设备旋转到横向时，导航也被隐藏并且页面需要要刷新才能正常运行。反之亦然，换句话说，如果在横向视图中在iPad上进入页面，导航工作正常，但是当旋转到纵向视图时，如果部分变为手风琴，则当它不应该被显示时仍然可见。是的。

我找到了一种方法来显示和隐藏导航的纵向和横向方向，但这只会导致原始功能被取消，即当从纵向旋转到横向时，导航会出现在页面上的任何位置，即使在顶部。

这是我用来实现展示和隐藏纵向和横向的代码：

$(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
        } 
});

我希望人们能够理解我的解释，如果有人能伸出援助之手并解释我做错了什么/需要做什么才能找到成功的解决方案，我将非常感激。

提前致谢。

Marc

JavaScript - 冲突的matchMedia查询

0 个答案: