js楼层导航

// 示例代码：为楼层导航链接添加点击事件
document.querySelectorAll('.floor-link').forEach(link => {
    link.addEventListener('click', function(event) {
        event.preventDefault();
        const targetFloor = this.getAttribute('href');
        window.location.hash = targetFloor;
        scrollToElement(targetFloor);
    });
});

function scrollToElement(selector) {
    const element = document.querySelector(selector);
    if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
    }
}

// 示例代码：监听滚动事件并更新楼层指示器
window.addEventListener('scroll', function() {
    const floors = document.querySelectorAll('.floor');
    let currentFloor = null;
    floors.forEach(floor => {
        const rect = floor.getBoundingClientRect();
        if (rect.top <= 100 && rect.bottom >= 100) { // 假设导航栏高度为100px
            currentFloor = floor;
        }
    });
    updateIndicator(currentFloor);
});

function updateIndicator(floor) {
    const indicators = document.querySelectorAll('.floor-indicator');
    indicators.forEach(indicator => indicator.classList.remove('active'));
    if (floor) {
        const indicator = document.querySelector(`.floor-indicator[data-floor="${floor.id}"]`);
        if (indicator) indicator.classList.add('active');
    }
}

/* 示例代码：使用媒体查询调整楼层导航样式 */
.floor-nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: #fff;
    z-index: 1000;
}

@media (max-width: 768px) {
    .floor-nav {
        position: relative;
        background: transparent;
    }
}