Question

http://rain-onlands.co.uk/

有人可以解释为什么在这个网站上滚动它会在某些页面上抖动吗？

我可以通过儿童主题看到主题的一些变化，并分配了重要的＆＃39;！重要的＆＃39;被使用。

但不知道为什么卷轴会那样？

Answer 1

我相信你的问题围绕着非mobile.js中的这一点JavaScript;

jQuery(function($){
    $(document).ready(function(){   
        var stickyHeaderTop = $('#masthead-wrap').offset().top;
        $(window).scroll(function(){
            if ( $(window).scrollTop() > stickyHeaderTop ) {
                $('#masthead-wrap').addClass( 'fixed-header').css({position: 'fixed', top: '0px'});
            } else {
                $('#masthead-wrap').removeClass( 'fixed-header').css({position: 'static', top: '0px'});
        }
        }); 
    });
});

首先，你的jQuery开头行是没有必要的。应该只是;

jQuery(document).ready(function($){

这会在文档加载时触发jQuery，让你使用$而不会发生冲突。

下一个最明显的是这个;

$('#masthead-wrap').addClass( 'fixed-header').css({position: 'fixed', top: '0px'});

您应该添加类，然后使用普通的CSS OR 添加内联CSS，而不是同时执行这两种操作。

很难看到你想要用标题实现什么，所以我不能在mo上建议替代代码，但看起来你只需要将标题保持固定在页面顶部？

如果是这样，你可以在没有JavaScript的情况下使用;

#masthead-wrap{    
    position: fixed;
}

然后只需添加一些填充来降低内容。

Answer 2

它跳跃的原因是因为标题是固定的（绝对的）下一个元素＆＃39; #main-content＆＃39;位于页面顶部，无需滚动条。

如果您未在标题顶部下方滚动，则会删除“固定标题”。将它重置回原来的方式 - 因此跳跃。

使用CSS修复：

.fixed-header + #main-content {
    margin-top: 183px; /* Height of the header */
}

我很确定你可以在CSS中完成这一切，但是如果你刚刚开始添加.fixed-header类的位置：absolute;顶部：0;并删除了javascript。

Wordpress网站的问题 - 滚动时主题'抖动'？

2 个答案: