jquery - 手机菜单冲突

Question

我的网站托管在我的开发环境中 here

如果向下滚动到第一部分，您会看到右侧会出现一个菜单。现在在桌面上一切正常，但在移动设备上菜单无法正常工作。它看起来是一样的，而不是在切换时可以看到 here

我正在使用这段代码来显示和隐藏菜单:

var menu = $(".nav");
var windowHeight = $(window).height();
var button = $(".shop-top");
$(window).scroll(function () {

    if ($(window).scrollTop() == 0) {
        menu.hide();
        button.hide();
    } else if ($(window).scrollTop() > windowHeight) {
        menu.slideDown();
        button.slideDown();
    }
});

我希望菜单显示在其他 pages 上任何提示/帮助表示赞赏。谢谢。

Answer 1

你的问题在这里

<ul class="nav " style="right: 4%;
                                    top: 9%;
                                    position: fixed;">
                                    <li><a href="about.html">ABOUT</a></li>
                                    <li><a href="charitable.html">BE CHARITABLE</a></li>
                                    <li><a href="index.html#">SUBSCRIBE</a></li>
                                    <li><a href="index.html#">HELP</a></li>
                                    <li><a href="index.html#">CART</a></li>
                                </ul>

解决方案就在这里

<ul class="nav " style="position: relative;">
                                    <li><a href="about.html">ABOUT</a></li>
                                    <li><a href="charitable.html">BE CHARITABLE</a></li>
                                    <li><a href="index.html#">SUBSCRIBE</a></li>
                                    <li><a href="index.html#">HELP</a></li>
                                    <li><a href="index.html#">CART</a></li>
                                </ul>

对菜单的响应使用 JQUERY

$(window).on('load resize',function(){

if($(window).width() < 767){
$('.navbar-right > .nav').css({
'position':'relative',
'top':'',
'right':''
});
}else{
$('.navbar-right > .nav').css({
'position':'relative',
'top':'9%',
'right':'4%'
});
}
});

使用媒体查询

@media only screen and (max-width: 767px) {
  .navbar-right > .nav {
   position:fixed !important;
    top:0 !important;
    right:0 !important;
  }
}
.navbar-right > .nav{
 position:fixed;
    top:9%';
    right:4%;
}

删除你的内联样式

这是正在运行的屏幕截图

Working ScreenShot