随时随地掌控：JQuery打造灵动粘性侧边栏菜单

2023-02-24 10:46:03

轻松创建灵动粘性侧边栏菜单：JQuery 教程

引言

在当今快节奏的数字世界中，用户对网站的访问习惯和需求不断变化，随时随地访问信息和服务已成为常态。为了满足这些需求，网站设计师和开发人员必须创建能够适应各种设备和屏幕尺寸的网站。其中，侧边栏菜单因其简洁、易用和节省空间的特点而广受欢迎。然而，当页面内容较长时，用户需要不断滚动页面才能访问侧边栏菜单，这可能会影响用户体验。

JQuery 的强大功能

为了解决这一问题，JQuery 应运而生。它是一个轻量级、跨平台的 JavaScript 库，以其简单、易用和强大的功能而闻名。利用 JQuery，我们可以轻松实现带粘性侧边栏的列表，当用户滚动页面时，侧边栏菜单会自动切换，始终保持在用户视野范围内。这种设计不仅美观，而且实用，大大提升了用户体验。

逐步指南：使用 JQuery 创建粘性侧边栏菜单

现在，我们将一步步分解每个步骤，手把手教你使用 JQuery 打造灵动粘性侧边栏菜单。准备好你的代码编辑器和 JQuery 库，让我们一起开启这段旅程吧！

HTML 结构

首先，我们需要创建一个基本的 HTML 结构。创建一个新的 HTML 文件，并在其中添加以下代码：

<!DOCTYPE html>
<html>
<head>
    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="sidebar">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus rhoncus. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Sed porttitor lectus nibh. Cras ullamcorper mi sit amet laoreet dictum. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Cras ultricies ligula sed magna dictum porta. Donec rutrum congue leo eget malesuada. Praesent sapien quam, euismod ut lacinia at, fringilla nec sem. Sed sed rutrum ligula, at egestas magna. Aliquam tincidunt, libero vitae feugiat pulvinar, ante odio sagittis ligula, eget lacinia odio sem nec elit. Maecenas volutpat risus ac porta lobortis. Praesent aliquam in tellus ut mollis. Praesent rutrum magna rhoncus, scelerisque diam sed, tincidunt lacus. Donec laoreet ipsum sed consectetur lobortis. Maecenas vitae lacus eu tortor interdum egestas. Praesent sapien quam, euismod ut lacinia at, fringilla nec sem. Curabitur aliquet quam id dui posuere blandit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras ullamcorper vestibulum turpis sit amet aliquam. Nulla facilisi. Duis aliquet suscipit laoreet. Maecenas volutpat risus ac porta lobortis.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eget lacus eget nunc luctus rhoncus. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Sed porttitor lectus nibh. Cras ullamcorper mi sit amet laoreet dictum. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Cras ultricies ligula sed magna dictum porta. Donec rutrum congue leo eget malesuada. Praesent sapien quam, euismod ut lacinia at, fringilla nec sem. Sed sed rutrum ligula, at egestas magna. Aliquam tincidunt, libero vitae feugiat pulvinar, ante odio sagittis ligula, eget lacinia odio sem nec elit. Maecenas volutpat risus ac porta lobortis. Praesent aliquam in tellus ut mollis. Praesent rutrum magna rhoncus, scelerisque diam sed, tincidunt lacus. Donec laoreet ipsum sed consectetur lobortis. Maecenas vitae lacus eu tortor interdum egestas. Praesent sapien quam, euismod ut lacinia at, fringilla nec sem. Curabitur aliquet quam id dui posuere blandit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras ullamcorper vestibulum turpis sit amet aliquam. Nulla facilisi. Duis aliquet suscipit laoreet. Maecenas volutpat risus ac porta lobortis.</p>
    </div>
</body>
</html>

在这个 HTML 结构中，我们创建了一个 id 为 "sidebar" 的 div 元素，它是侧边栏菜单的容器。在侧边栏菜单中，我们创建了一个 ul 元素，其中包含了四个 li 元素，每个 li 元素都包含了一个链接。这些链接指向页面上的不同部分，如主页、关于我们、服务和联系方式。

在侧边栏菜单之后，我们创建了一个 id 为 "content" 的 div 元素，它是页面内容的容器。在页面内容中，我们添加了一些段落文本作为占位符，以便我们稍后看到滚动时的效果。

CSS 样式

接下来，我们需要添加一些 CSS 样式来美化我们的页面。在 style.css 文件中添加以下代码：

body {
    font-family: Arial, sans-serif;
}

#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 200px;
    height: 100vh;
    background-color: #f5f5f5;
    border-right: 1px solid #ccc;
}

#sidebar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#sidebar li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

#sidebar li:hover {
    background-color: #e5e5e5;
}

#sidebar li a {
    text-decoration: none;
    color: #333;
}

这些 CSS 样式定义了侧边栏菜单的外观和行为。我们指定侧边栏为固定定位，并设置了其大小、颜色和边框。我们还删除了 ul 元素中的列表样式，并为 li 元素添加了填充和边框。当鼠标悬停在 li 元素上时，我们还为其添加了背景颜色。

JQuery 代码

现在，我们已经完成了 HTML 和 CSS，可以添加 JQuery 代码来实现粘性侧边栏菜单了。在 HTML 文件中，在 </body> 标记之前添加以下代码：

<script src="jquery.min.js"></script>
<script>
    $(document).ready(function() {
        var sidebar = $("#sidebar");
        var offset = sidebar.offset().top;

        $(window).scroll(function() {
            if ($(window).scrollTop() > offset) {
                sidebar.addClass("fixed");
            } else {
                sidebar.removeClass("fixed");
            }
        });
    });
</script>