如何实现TAB切换按钮固定到导航位置？

大家好，我是数字营销实战派飞小优，这几天测试项目中发现当查看产品信时，有时候因页面往下拉而忽视原本较为重要的TAB锚点信息，为解决这一问题，我们采用JS的方式来实现，具体请看教程：

先看下DEMO效果

如何实现

利用JS+css来具体实现。

定义CSS样式

先做好CSS基础样式，如下：

/* 基本的Tab样式 */
.entry-tab {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #f3fbff;
    border-bottom: 1px solid #daeff9;
    width: 100%; 
    z-index: 999; 
    transition: top 0.3s; 
	 border-radius: 5px 5px 0 0;
}

.entry .entry-tab-item.active {
    border-bottom: 2px solid var(--theme-color);
    cursor: default;
    border-radius: 5px 5px 0 0;
}

.entry-tab.fixed {
	  display: flex;
    justify-content: center;
    position: fixed;
	  left:0;
    top: 0;
}

.entry-tab.centered {
    justify-content: center;
}

.entry-tab-item {
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
}

.get-quotation-btn {
    padding: 10px 20px;
    background-color: #0090EA;
    color: white;
    border: none;
    cursor: pointer;
    z-index: 1000;
}

.get-quotation-btn.fixed {
    position: fixed;
    top: 14px;
    right: 30%;
	border-radius:5px;
}

.get-quotation-btn:hover { background-color: #44C377;}

添加JS代码

<script>
   document.addEventListener('DOMContentLoaded', function() {
    const navbarCollapse = document.querySelector('.navbar-collapse');
    const entryTab = document.querySelector('.entry-tab');
    const btn = document.createElement('button');
    btn.classList.add('get-quotation-btn');
    btn.textContent = 'Get A Quotation';
    entryTab.parentNode.insertBefore(btn, entryTab.nextSibling);

    let lastScrollTop = 0;

    window.addEventListener('scroll', function() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        if (scrollTop > lastScrollTop) {
            // 向下滚动
            navbarCollapse.classList.add('fixed');
            entryTab.classList.add('fixed');
            btn.classList.add('fixed'); // 固定按钮
            btn.style.display = 'inline-block'; // 显示按钮
        } else {
            // 向上滚动
            navbarCollapse.classList.remove('fixed');
            entryTab.classList.remove('fixed');
            btn.classList.remove('fixed'); // 移除按钮固定
            btn.style.display = 'none'; // 隐藏按钮
            if (scrollTop === 0) {
                entryTab.classList.add('centered');
            } else {
                entryTab.classList.remove('centered');
            }
        }
        lastScrollTop = scrollTop;
    });
});
</script>

到此教程则顺利完工，大家赶快试试吧！

写在最后

只要网站中存在 TAB切换功能，基本都可以按照上述方法来实践，万变不离其宗，有任何不清楚的可以在下方留言，需要SEO外包和建站可以私聊！