手机网页底部通栏效果js代码

手机网页底部通栏效果通常用于在网页底部固定显示一些信息或功能，比如导航栏、联系信息、社交媒体图标等。以下是一个简单的JavaScript代码示例，结合CSS来实现这一效果：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>底部通栏示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="content">
        <!-- 页面主要内容 -->
    </div>
    <div class="footer-bar">
        <a href="#contact">联系我们</a>
        <a href="#social-media">社交媒体</a>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}

.content {
    min-height: 100%;
    position: relative;
}

.footer-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

.footer-bar a {
    color: white;
    margin: 0 15px;
}

JavaScript代码

// script.js
document.addEventListener('DOMContentLoaded', function() {
    // 确保底部通栏始终可见
    var footerBar = document.querySelector('.footer-bar');
    var content = document.querySelector('.content');

    function adjustFooter() {
        var contentHeight = content.clientHeight;
        var windowHeight = window.innerHeight;
        if (contentHeight < windowHeight) {
            footerBar.style.position = 'absolute';
        } else {
            footerBar.style.position = 'fixed';
        }
    }

    window.addEventListener('resize', adjustFooter);
    adjustFooter();
});