Question

我有一个使用jquery和CSS过渡的简单移动滑动菜单。下面是一个显示它的jsfiddle链接。

它适用于Chrome和Firefox，但在Safari（8.0.6）中，固定菜单（带有“.menu-toggle”类的href元素）不会随身体滑动，即使它是在身体容器内。

HTML

<body class="menu">

<nav class="menu-slide" id="sliding-menu">
    <ul class="mobile-list">
        <li><a href="#pg1">One</a>

        </li>
        <hr>
        <li><a href="#pg2">Two</a>

        </li>
        <hr>
        <li><a href="#pg3">Three</a>

        </li>
        <hr>
        <li><a href="#pg4">Four</a>

        </li>
        <hr>
        <li><a href="#pg5">Five</a>

        </li>
        <hr>
    </ul>
</nav>

CSS

.menu-toggle {
position: fixed;
width: 100%;
background-color: #333;
z-index: 1;
-webkit-box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75);
box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75);
}

.menu {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

.menu-open {
    left: 231px;
}

.menu-open .menu-slide {
    left:0;
}

.menu-slide,
.menu {
    -webkit-transition: left 0.2s ease;
    -moz-transition: left 0.2s ease;
    transition: left 0.3s ease;
    -webkit-box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75);
    box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75);
}

.menu-slide {
    background-color:#333;
    color: #fff;
    position: fixed;
    top: 0;
    left: -231px;
    width: 210px;
    height: 100%;
    padding: 10px;

}

.mobile-list {
    color:black;
}

.mobile-list li {
    display: block;
    color: black;
    padding: 5px;
    width: 100%;
}

.mobile-list a {
    color: black;

}


#sliding-menu {
    background-color: #fff;


}

.menu-toggle img{
    padding: 5px;
    background-color:  #333;
    opacity: 1;
    height: 45px;
    opacity: 1.0;
    color: white;
    width: 45px;
}

.menu-toggle {
    padding-left: 5px;
    font-size: 20px;
    color: white;
}

.menu-toggle p{
    position: absolute;
    display: inline-block;
    padding-left: 5px;
    padding-top: 5px;
    font-family: Roboto, sans-serif;
}
.menu-toggle:hover {
    text-decoration: none;
    color: white;
}

.menu toggle:visited {
    text-decoration: none;
    color: white;
}
.menu toggle:active {
    text-decoration: none;
    color: white;
}
.ico-wrapper {
    width: 100%;

这是我实际使用它的网页，如果你在safari中打开它，你会明白我的意思。调整浏览器大小以显示移动布局。

http://theomjones.com

有什么想法吗？

Answer 1

如果我将.menu-toggle的样式从position: fixed更改为position: absolute，我就可以让$('.menu-toggle')在Safari中滑动。

它似乎可以在您的网站上运行而不会破坏任何内容。

修改我能够得到与上面相同的结果，并保持导航栏的固定性质。您需要将带有.menu-toggle的一行添加到JS，并将(function () { var body = $('body'); $('.menu-toggle').bind('click', function () { body.toggleClass('menu-open'); $('.menu-toggle').toggleClass('menu-open') return false; }); })();添加到CSS过渡样式。这个小提琴显示了工作代码https://jsfiddle.net/3byd8ntt/5/

JS

.menu-slide, .menu, .menu-toggle { -webkit-transition: left 0.2s ease; -moz-transition: left 0.2s ease; transition: left 0.3s ease; -webkit-box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75); -moz-box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75); box-shadow: -1px 2px 3px -1px rgba(0,0,0,0.75); }

CSS

library(stringi); library(dplyr); library(SciencesPo) df <- data.frame(tweets = c("blah, blah, Blah, auction","blah, auction", "blah, blah", "this auction, blah", "today"), date=c('2015-07-01','2015-06-01','2015-05-01','2015-07-31','2015-05-01')) > df tweets date 1 blah, blah, Blah, auction 2015-07-01 2 blah, auction 2015-06-01 3 blah, blah 2015-05-01 4 this auction, blah 2015-07-31 5 today 2015-05-01 filter = "auction" > df$n <- vapply(df$tweets, function(x) sum(stri_count_fixed(x, filter)), 1L) > df tweets date n 1 blah, blah, Blah, auction 2015-07-01 1 2 blah, auction 2015-06-01 1 3 blah, blah 2015-05-01 0 4 this auction, blah 2015-07-31 1 5 today 2015-05-01 0

Answer 2

谨慎一点。滚动停止后，移动safari不会重绘画布。这会导致固定元素（取决于它们的使用方式）进入视图，然后在滚动停止后消失。

您应该使用xcode附带的ios模拟器，而不是调整浏览器窗口的大小，因为移动和桌面浏览器之间存在差异

在Safari中使用移动幻灯片菜单苦苦挣扎

2 个答案: