左侧导航随右侧内容滚动
Html 实例
左侧导航随右侧内容滚动

左侧导航随右侧内容滚动



<!DOCTYPE html>
<html>
<head>
    <style>
        /* 标题导航样式 */
        .nav {
            position: fixed;
            width: 25%;
            height: 100%;
            overflow: auto;
        }

        .nav a {
            display: block;
            padding: 10px;
            color: #000;
            text-decoration: none;
        }

        .nav a:hover {
            background-color: #ccc;
        }

        /* 文章内容样式 */
        .content {
            margin-left: 25%; /* 左边的导航栏宽度 */
            height: 300px;
            overflow: auto;
        }

        .content p {
            padding: 10px;
            line-height: 1.5;
        }

        /* 高亮样式 */
        .active {
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#section1" target="_blank"  rel="nofollow" >标题1</a>
        <a href="#section2" target="_blank"  rel="nofollow" >标题2</a>
        <a href="#section3" target="_blank"  rel="nofollow" >标题3</a>
        <a href="#section4" target="_blank"  rel="nofollow" >标题4</a>
        <a href="#section5" target="_blank"  rel="nofollow" >标题5</a>
    </div>

    <div class="content">
        <p id="section1">这是标题1的内容。</p>
        <p id="section2">这是标题2的内容。</p>
        <p id="section3">这是标题3的内容。</p>
        <p id="section4">这是标题4的内容。</p>
        <p id="section5">这是标题5的内容。</p>
    </div>

    <script>
        // 获取标题元素和内容元素
        var navLinks = document.getElementsByTagName('a');
        var contentSections = document.getElementsByTagName('p');

        // 监听滚动事件
        window.addEventListener('scroll', function() {
            var currentSection = '';

            // 遍历内容元素,找到当前可见的部分
            for (var i = 0; i < contentSections.length; i++) {
                var rect = contentSections[i].getBoundingClientRect();
                if (rect.top >= 0 && rect.bottom <= window.innerHeight) {
                    currentSection = contentSections[i].id;
                }
            }

            // 移除所有标题的高亮样式
            for (var j = 0; j < navLinks.length; j++) {
                navLinks[j].classList.remove('active');
            }

            // 给当前可见的标题添加高亮样式
            if (currentSection !== '') {
                var activeLink = document.querySelector('a[href="#' + currentSection + '"]');
                activeLink.classList.add('active');
            }
        });
    </script>
</body>
</html>











重要的事情说三遍!!!
这是网站预览,如果预览不正常,有可能需要外网才能访问,或网站已经不存在,或对方服务器拒绝预览访问。
这是网站预览,如果预览不正常,有可能需要外网才能访问,或网站已经不存在,或对方服务器拒绝预览访问。
这是网站预览,如果预览不正常,有可能需要外网才能访问,或网站已经不存在,或对方服务器拒绝预览访问。

(网址均来源于网络,如有侵权,请联系删除)












1. 链接直达将跳转网址:

2. 网址收录时间:2023-10-12 16:34:49

3. 这是第“33”个收录网址。

如对此链接有任何疑问,可以添加以上微信,或此链接底部留言。看到会马上回复。

QaQlinks 跨境电商导航网站 声明:网站上的服务均为第三方提供,与 QAQlinks 网站无关。请用户注意甄别第三方服务质量,避免上当受骗。

(文章来源于网络,如有侵权,请联系删除)




相关导航

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注