Vue页面滚动导航吸顶效果
<template> <div class="sticky-navbar"> aaa </div> </template> <style> .sticky-navbar { overflow: hidden; padding: 10px 0; transition: 0.4s; position: fixed; width: 100%; top: 0; z-index: 99; } .sticky-navbar.active { background-color: #ffffff; padding: 0px 10px; box-shadow: 0 2px 4px 0 rgba(133,138,180,.14); } </style> <script> export default { methods: { initBrowser () { if (process.browser) { this.stickyNav(document.querySelector('.sticky-navbar')) } }, stickyNav (obj, className = 'active') { let ot = obj.offsetHeight document.onscroll = function () { if (document.body.scrollTop > obj.offsetHeight / 3 || document.documentElement.scrollTop > obj.offsetHeight / 3) { obj.classList.add(className) } else { obj.classList.remove(className) } } } }, mounted () { this.initBrowser() } } </script>
本文系作者 @feacx 原创发布在 徐小鹏的个人分享。未经许可,禁止转载。