jquery导航吸顶特效

基础概念： jQuery 导航吸顶特效是指当用户滚动页面时，导航栏能够固定在页面顶部，不随页面滚动而移动，从而始终保持可见状态。

优势：

提升用户体验：使用户在滚动页面时能快速找到导航栏，方便进行页面跳转。
增强页面层次感：固定的导航栏可以让页面布局更加清晰，突出重要内容。

类型：

固定位置：始终保持在屏幕顶部固定位置。
滚动渐变：随着滚动逐渐改变样式，如背景颜色变深。

应用场景：适用于内容较多、需要频繁切换页面的网站，如电商网站、新闻网站等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航吸顶特效</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .nav {
            height: 50px;
            background-color: #333;
            color: #fff;
            line-height: 50px;
            text-align: center;
            position: relative;
            z-index: 100;
        }
        .content {
            height: 2000px;
            background-color: #f0f0f0;
        }
        .fixed {
            position: fixed;
            top: 0;
            width: 100%;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="nav">导航栏</div>
    <div class="content">内容区域</div>

    <script>
        $(window).scroll(function() {
            var scrollTop = $(this).scrollTop();
            if (scrollTop > 50) {
                $('.nav').addClass('fixed');
            } else {
                $('.nav').removeClass('fixed');
            }
        });
    </script>
</body>
</html>

常见问题及解决方法：