首页 问答 正文

如何在WordPress中添加悬浮菜单?

注册会员 / 悠然自学 / 2023-06-11/ 浏览 156 次

可以通过在WordPress主题的函数文件中添加以下代码来实现悬浮菜单:

add_action('wp_head', 'my_custom_stylesheet');

function my_custom_stylesheet() {
?>
<style type="text/css">
    .sticky {
        position: fixed !important;
        top: 0 !important;
        z-index: 9999 !important;
    }
</style>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 100) {
                $('#menu-header').addClass('sticky');
            } else {
                $('#menu-header').removeClass('sticky');
            }
        });
    });
</script>
<?php
} 

请注意,上述代码中的“#menu-header”应替换为您实际使用的菜单ID或类名。

同时,您还需要在您的主题中为悬浮菜单添加样式。例如:

#menu-header.sticky {
    background-color: #fff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
} 

以上代码仅供参考,具体实现可能会因您的主题而异。

大家谈论
    我的见解