js吸顶效果
方式一：
<template><div class="get-bounding"><div class="box"><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><div class="box_fixed"id="boxFixed":class="{'is_fixed' : isFixed}">我是來測試的、哇咔咔</div><h3>快下來</h3><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4><h4>吸頂測試</h4></div><!-- <div class="pride_tab isFixed"v-show="headerFixed"id="pride_tab_fixed"><div class="pride_tab"><ul class="imgs-list"><li v-for="(item,index) in list":key="index"class="list-img"><img :src="item"alt=""></li></ul></div></div> --><div class="blank-green">隨便了，反正是就是一段空白</div></div> </template> <script> export default {data () {return {isFixed: false,offsetTop: 0}},mounted () {window.addEventListener('scroll', this.initHeight);this.$nextTick(() => {this.offsetTop = document.querySelector('#boxFixed').offsetTop;})},methods: {initHeight () {var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTopthis.isFixed = scrollTop > this.offsetTop ? true : false;},},destroyed () {window.removeEventListener('scroll', this.handleScroll)}, }</script> <style lang="scss" scoped> .isFixed {position: fixed;left: 0px;top: 0px; } .blank {height: 660px;background: red;width: 100%; } .blank-green {height: 660px;background: green;width: 100%; } .imgs-list {display: flex;height: 60px;.list-img {img {height: 60px;object-fit: contain;}} } .box_fixed {width: 500px;height: 40px;border: 2px dashed pink;border-radius: 20px;margin: 0 auto;line-height: 40px;background: #eee; } .is_fixed {position: fixed;top: 0;left: 50%;margin-left: -250px;z-index: 999; } </style>方式二：
<template><div class="get-bounding"><div class="blank">隨便了，反正是就是一段空白</div><div class="pride_tab isFixed"v-show="headerFixed"id="pride_tab_fixed"><div class="pride_tab"><ul class="imgs-list"><li v-for="(item,index) in list":key="index"class="list-img"><img :src="item"alt=""></li></ul></div></div><div class="blank-green">隨便了，反正是就是一段空白</div></div> </template> <script> export default {name: "GetBound",data () {return {list: ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567663807675&di=e28e9ab2e11d8efe9692521d954cdb1c&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20160307%2Fmp62164668_1457312327608_5.gif','https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2992358308,4038892619&fm=26&gp=0.jpg','https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3748066246,70122413&fm=26&gp=0.jpg','https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1567663882596&di=712c5e3a44eed9f19a65544f2de90516&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20151002%2Fmp34126795_1443751243506_3.gif'],offsetTop: 0,offsetHeight: 0,headerFixed: false,isFixed: 'isFixed'}},mounted () {// handleScroll為頁面滾動的監聽回調window.addEventListener('scroll', this.handleScroll);this.getPortDate();},destroyed () {//destroyed回調中移除監聽window.removeEventListener('scroll', this.handleScroll);},methods: {//滾動監聽，頭部固定handleScroll: function () {// 得到頁面滾動的距離let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;// 判斷頁面滾動的距離是否大于吸頂元素的位置console.log(scrollTop, "@#$%^&*()_");this.headerFixed = scrollTop >= 650;// (this.offsetTop - this.offsetHeight * 2);},getPortDate () {this.$nextTick(function () {// 這里fixedHeaderRoot是吸頂元素的IDlet header = document.getElementById("pride_tab_fixed");// 這里要得到top的距離和元素自身的高度this.offsetTop = header.offsetTop;this.offsetHeight = header.offsetHeight;console.log("offsetTop:" + this.offsetTop + "," + this.offsetHeight);});}} }</script> <style lang="scss" scoped> .isFixed {position: fixed;left: 0px;top: 0px; } .blank {height: 660px;background: red;width: 100%; } .blank-green {height: 660px;background: green;width: 100%; } .imgs-list {display: flex;height: 60px;.list-img {img {height: 60px;object-fit: contain;}} } </style>方式三：
<!DOCTYPE HTML> <html><head><meta charset="UTF-8"><title>滾動至頂部后固定</title><style type="text/css">.wrapper {width: 100%;height: 2000px;margin-left: auto;margin-right: auto;}.header {height: 30px;width: 100%;background-color: greenyellow;position: fixed;top: 0;}#testbody {padding-top: 30px;height: 120px;background-color: #2AC845;}#nav_test_1 {height: 30px;position: relative;top: 0;background: #125430;width: 100%;}#nav_test_2 {height: 30px;width: 100%;position: relative;top: 0;background-color: red;}#nav_test_3 {height: 30px;width: 100%;position: relative;top: 0;background-color: blueviolet;}</style> </head><body><div class="wrapper"><div id="top_1" class="header">標題</div><div id="nav_test_1">頂端導航測試1</div></div><script type="text/javascript">var ha = new Array();var fixHight = 0; //由于postion變動高度變成不計算function menuFixed(preid, id) {var obj = document.getElementById(id); //當前div ID對象var preobj = document.getElementById(preid); //前一個DIV ID對象var _getTop = obj.offsetTop - fixHight; //當前div距離頂端距離var _preTop = preobj.offsetTop; //前一個DIV距離頂端距離var _preHeight = preobj.offsetHeight; //前一個DIV高度fixHight = fixHight + obj.offsetHeight;console.log('preid:' + preid + " _preHeight:" + _preHeight);ha.push({id: id,_getTop: _getTop,_preTop: _preTop,_preHeight: _preHeight,preid: preid});console.log("arry:" + JSON.stringify(ha));}window.onscroll = function () {var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;var i = getIndex(scrollTop);console.log('index:' + i);changePos(ha[i].preid, ha[i]._preHeight, ha[i].id, ha[i]._getTop, scrollTop);}function getIndex(scrollTop) {var length = ha.length;for (var i = 0; i < length; i++) {if (ha[i]._getTop >= scrollTop && scrollTop >= ha[i]._preTop)return i;}return length - 1;}function changePos(preid, preheight, id, gettop, scrollTop) {var obj = document.getElementById(id);var preobj = document.getElementById(preid);console.log('scrollTop:' + scrollTop + ' gettop:' + gettop);if (scrollTop < gettop) {preobj.style.position = 'fixed';obj.style.position = 'relative';if (scrollTop - gettop <= 0 && scrollTop - gettop >= -preheight) {preobj.style.top = gettop - preheight - scrollTop + 'px';} else if (scrollTop - gettop <= 0) {preobj.style.top = 0;} else {preobj.style.top = -preheight + 'px';}} else {obj.style.position = 'fixed';console.log('id:' + id);}}</script><script type="text/javascript">window.onload = function () {menuFixed('top_1', 'nav_test_1');}</script> </body></html>方式四：
<html> <meta name="viewport" content="width=device-width, initial-scale=1.0"><head><style type="text/css">body {padding: 0;margin: 0;}#nav {width: 100%;height: 60px;background: #39f;color: #fff;line-height: 60px;text-align: center;padding: 0;margin: 0;list-style: none;}#nav li {float: left;width: 20%;height: 60px;}.fix {position: fixed;top: 0;left: 0;}</style> </head><div class="wrap"><h1>在線書城</h1><p>有沒有一本書讓你仿佛遇到春風十里</p><ul id="nav"><li>加入購物車</li><li>加入收藏</li><li>立即購買</li></ul><div class="con"><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p><p>好書有好事有好詩</p></div> </div><script type="text/javascript">var tit = document.getElementById("nav");//alert(tit);//占位符的位置var rect = tit.getBoundingClientRect(); //獲得頁面中導航條相對于瀏覽器視窗的位置var inser = document.createElement("div");tit.parentNode.replaceChild(inser, tit);inser.appendChild(tit);inser.style.height = rect.height + "px";//獲取距離頁面頂端的距離var titleTop = tit.offsetTop;//滾動事件document.onscroll = function () {//獲取當前滾動的距離var btop = document.body.scrollTop || document.documentElement.scrollTop;//如果滾動距離大于導航條據頂部的距離if (btop > titleTop) {//為導航條設置fixtit.className = "clearfix fix";} else {//移除fixedtit.className = "clearfix";}} </script></html>總結
- 上一篇： js兼容安卓与ios的复制到粘贴板功能
- 下一篇： HTTP状态码大全