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 QUERY

@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

手机上的菜单冲突

1 个答案: