JavaScript-媒体查询冲突

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

我已经建立了这个网站，这样在具有较小视口（小于1024×x宽）的设备上，功能会发生变化，从而在accordions中存在部分，以便于用户导航，并且由于不再需要固定点导航，因此固定点导航将消失

以下是我的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
            }
        });  
      } 
});

$（文档）.ready（函数（）{
var mq=window.matchMedia（'（最大宽度：1023px'）；
if（mq.matches）{
$（“#cd垂直导航”）.hide（）；//最初隐藏您的div
}
否则{
$（“#cd垂直导航”）.hide（）；//最初隐藏您的div
var topOfOthDiv=$（“#定义的操作”）.offset（）.top；
$（窗口）。滚动（函数（）{
如果（$（window.scrollTop（）>topOfOthDiv）{//滚动到另一个div之前？
$（“#cd垂直导航”）.fadeIn（200）；//达到所需的点--显示div
}
});
$（窗口）。滚动（函数（）{
如果（$（window.scrollTop（）

然而，在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
        } 
});

$（文档）.ready（函数（）{
var mql=window.matchMedia（“（方向：横向）和（最小宽度：1023px）”；
mql.addListener（handleOrientationChange）；
手柄方向变化（mql）；
函数handleOrientationChange（mql）{
if（mql.matches）{
$（“#cd垂直导航”）.hide（）；//最初隐藏您的div
var topOfOthDiv=$（“#定义的操作”）.offset（）.top；
$（窗口）。滚动（函数（）{
如果（$（window.scrollTop（）>topOfOthDiv）{//滚动到另一个div之前？
$（“#cd垂直导航”）.fadeIn（200）；//达到所需的点--显示div
}
});
$（窗口）。滚动（函数（）{
如果（$（window.scrollTop（）

我希望人们能理解我的解释，如果有人能帮我解释一下我做错了什么/需要做什么，以达成一个成功的解决方案，我将不胜感激

提前谢谢

马克