Question

顶部的浮动菜单在开始滚动时跳了一下。如何将它始终固定在顶部？

在某些页面上，当尝试滚动整页跳转/闪烁时，只有深灰色页脚在屏幕下方（或者如果浏览器窗口调整大小）。

请帮助：）

Answer 1

在页面底部，源代码是一个JavaScript部分，其代码如下：

function relocate_persistent_header() {
    var header_bar = jQuery("#menu-wrapper");
    if(header_bar.hasClass("floater-bar")) {
        header_bar.css("left", ((jQuery(window).width() / 2) - header_bar.width() / 2) + "px");
    }else{
        header_bar.css("left", "");
    }
}

jQuery(document).ready(function($)
{   
    var $header_top_pos = $("#menu-wrapper").offset().top + 20;   
    function ozy_check_floating_position() {
        if ($(window).scrollTop() > $header_top_pos) {
            $("#menu-wrapper").addClass("floater-bar");
        } else {
            $("#menu-wrapper").removeClass("floater-bar");
        }
        relocate_persistent_header();
    }
    $(window).scroll(function() { ozy_check_floating_position(); });

    ozy_check_floating_position();
});

jQuery(window).resize(function()
{
    relocate_persistent_header();
});

这是问题的根源。 menu-wrapper总是拥有CSS类floater-bar并且不再添加或删除它会更容易。

使用Firebug我给menu-wrapper的样式属性提供了与floater-bar相关联的所有CSS（因此删除floater-bar无效）并且“跳跃”问题消失了。要实际使用此解决方案，请删除：

if ($(window).scrollTop() > $header_top_pos) {
    $("#menu-wrapper").addClass("floater-bar");
} else {
    $("#menu-wrapper").removeClass("floater-bar");
}

从网站上将实际HTML中的课程floater-bar添加到menu-wrapper。

浮动菜单，滚动时跳转

1 个答案: