获取元素到页面顶部的距离_jQuery 操作元素综合案例

好好学习，天天向上

本章主要内容是：固定导航返回顶部、楼梯效果

1、固定导航返回顶部

效果图：

示例代码：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>* {margin:0;padding:0;}.w{width: 1191px;margin:0 auto;}.box1 {height: 935px;}.box2 {height: 107px;}.box2.active {position: fixed;top:0;}.top {width: 50px;height: 50px;font:bold 50px/50px '宋体';text-align:center;color: #fff;background-color: blue;cursor:pointer;position:fixed;bottom: 20px;right: 0;display:none;}</style>
</head>
<body><div class="w"><div class="box1"><img src="img/01.png" alt=""/></div><!-- 今日团 --><div class="box2" id="box2"><img src="img/02.png" alt=""/></div><div class="box3"><img src="img/03.png" alt=""/></div><div class="box4"><img src="img/04.png" alt=""/></div></div>1111<div class="top" id="backTop">▲</div><script src="lib/jquery-1.12.4.js"></script><script>// 固定导航和返回顶部var $box2 = $("#box2");var $backTop = $("#backTop");// 1.获取一下今日团距离文档顶部的距离var v1 = $box2.offset().top;// console.log(v1)// 2.给整个文档添加滚动事件$(document).scroll(function () {// 3.在事件内部判断卷走的距离是否大于等于今日团距离顶部的间距var v2 = $(this).scrollTop();if (v2 >= v1) {// 4.给今日团进行固定，让返回顶部按钮出现$box2.addClass("active");$backTop.show();} else {// v2 低于 v1 恢复默认$box2.removeClass("active");$backTop.hide();}})// 5.返回顶部，添加点击事件// $backTop.click(function () {//     // 让页面滚动到顶部//     // 直接跳转到顶部//     $(document).scrollTop(0);// })// 以运动方式返回顶部$backTop.click(function () {// 让页面滚动到顶部// 滚动的元素要选择 html 或 body// 直接使用 document ，它是没有 scrollTop 属性的$("html,body").animate({"scrollTop": 0},500);})</script>
</body>
</html>

2、楼梯效果

获取元素到页面顶部的距离_jQuery 操作元素综合案例相关推荐

获取元素到页面顶部的距离_组成网站页面结构的元素有哪些？
想要做好网站内部优化,必须要了解网站的组成结构,同时也要对网站结构有一个全面的了解.页面结构就是页面内容的格局,是制作页面的重点之一.合理的页面结构不仅有利于搜索引擎的收录,同时还有利于用户体验. 在 ...
获取元素到body顶部的距离，offsetTop和offsetParent，getBoundingClientRect
最近在写一个可见曝光的sdk,是当元素显示在可见区域的时候才算作曝光,并上报给服务端.思路是在元素请求回来并渲染完成之后,计算元素距离document顶部的距离offset,当页面滚动的时候,计算of ...
vue获取元素距离页面顶部的距离_VUE实时监听元素距离顶部高度的操作
效果图如下所示 .html 今日热门今日热销 .js mounted(){ window.addEventListener('scroll',this.handleScrollx,true) }, ...
微信小程序获取右上角胶囊距顶部的距离和胶囊的尺寸
<view class="search-container" :style="{ top: statusHeight + 'px', height: navHeig ...
vue获取dom元素节点并操作元素的样式（$el的用法操作元素样式）
在vue中操作dom元素第一种:$refs <div ref="box"></div> 在标签身上可以写一个ref属性,然后就可以通过this.$refs ...
vue获取元素offsetTop，mounted获取不到offsetTop，获取元素距离页面顶边距离
记录一下开发过程中遇到的坑,今天想做一个功能,当我评论完之后,页面跳到评论区顶部,于是就要获取到评论区距离页面顶部的距离,需要循环获取offsetTop来实现,但是在mounted阶段是无论如何都获取 ...
Vue表格滚动到页面顶部，表头固定
大致思路:监听页面根元素的滚动事件,判断表格节点距页面顶部的距离offsetTop减去被表格被卷的高度scrollTop是否大于零,大于零,未到页面顶部,隐藏自定义表头,小于零,将自定义表头展示出来 ...
Java程序员从笨鸟到菜鸟之（八十八）跟我学jquery（四）JQuery框架操作元素的属性与样式
在前面几篇博客中,我们初步了解了一下jQuery的好处,基本语法,还有一些基本函数,这是学习jquery的基础,在这篇博客中,我们一起来学习一下JQuery框架操作元素的属性与样式,在web开发中,修 ...
uniapp 选择元素,操作元素属性
uni.createSelectorQuery().selectViewport().scrollOffset(res => { console.log("竖直滚动位置" ...

获取元素到页面顶部的距离_jQuery 操作元素综合案例

1、固定导航返回顶部

2、楼梯效果

获取元素到页面顶部的距离_jQuery 操作元素综合案例相关推荐

最新文章

热门文章