Question

我正在使用一个名为Stacks的简单jQuery插件，用于在标题达到标题标题时修复我的标题标题。该插件将添加类.fixed和.absolute等类，然后当用户开始滚动标题时，我会使用CSS过渡来调整部分标题的大小。

这适用于我测试过的每个浏览器（甚至是IE8），但Safari除外。什么版本的Safari似乎并不重要，因为它打破了所有版本。标题似乎跳出了容器，它的背景几乎完全消失了。

Screenshot that compare the bug (imgur link)

我是一个JavaScript菜鸟，所以我已经准备好被告知我做错了什么，但任何方向都会非常感激。

这是我的JS：

jQuery(document).ready(function( $ ) {
    if($(window).width() >= 768){
        $('#tour-headline').waypoint(function() {
            $('#tour-headline').removeClass("large").addClass("small");   
        });
        $('#news-headline').waypoint(function() {
            $('#news-headline').removeClass("large").addClass("small");   
        });
        $('#music-headline').waypoint(function() {
            $('#music-headline').removeClass("large").addClass("small");   
        });

        $('body').stacks({
            body: 'section',
            title: '.section-headline',
            offset: 110,
            margin: 0
        });
    }
});

这是我的CSS

.section-headline {
background: #e1eaf0;
border-bottom: 8px #fcef7f solid;
}

.section-headline.small h3 {
padding: 10px 0;
font-size: 16px;
-moz-transition: all 0.4s; 
-webkit-transition: all 0.4s; 
transition: all 0.4s;
}

.section-headline.large h3 {
padding: 25px 0;
-moz-transition: all 0.4s; 
-webkit-transition: all 0.4s; 
transition: all 0.4s;
}

.fixed{ 
position: fixed;
top:110px;
left:0;
right:0;
z-index:90;
}

.absolute{
position: absolute;
width: 100%;
margin-bottom:0;
z-index:91;
bottom: 0;
box-sizing:border-box;
}

section{
position: relative;
}

您可以在dollypartonentertainment.com上自己查看该网站

编辑：我发现了我的问题！我在文件前面的几十行transition上使用了.section-headline - 我不完全确定它为什么会像它那样做出反应，但就是这样！

Answer 1

我还不能评论，所以在这里发表我的评论......不确定这是否有帮助，但尝试添加这个，这可以防止东西弹出div的

overflow: hidden;

当position：fixed添加到元素中时，为什么元素跳出它的容器（仅限Safari）

1 个答案: