html通过css,js实现div悬浮效果总汇,如原生JS实现滚动到一定位置实现div悬浮

时间: 2017-11-15阅读: 3061标签: 布局

在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果。


传统的fixed实现:

通过css中的属性position参数设为fixed,理由它相对于浏览器为绝对位置,通过设置right和bottom,使得div固定在右下角。例如:

.demo{
	position: fixed;bottom: 10px;right: 10px;
}

但是这种实现,从一开始就悬浮在浏览器的右下角了。可以满足我们绝大多数需求,但是有时候会遇到这种情景:当我们浏览器滚动条到某个位置的时候,才触发div悬浮效果。下面将来介绍:


原生JS实现滚动到一定位置,实现div悬浮

实现方法是:需要通过js来监听浏览器滚动的距离,当滚动到多少距离的时候,我们来设置div的position参数。具体如下:

<style>
*{
 margin: 0;padding: 0;
}
body{
 height: 1500px;
}
.demo{
 position: relative;left: 10px;top: 10px;z-index:9;width: 500px;height: 200px;background: #F0AD4E;
}
</style>
//html
<p style="height: 100px;">测试</p>
<div class="demo" id="demo">
 内容
</div>


js中代码:

function onscroll(distance){//s滚动的距离,offset默认为元素距离顶部的距离	
    var s = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
	    dom = document.getElementById('demo'),
	    offset= dom.offsetTop || distance;
    dom.style.position=s>offset?"fixed":"relative";
};
window.addEventListener('scroll',onscroll());


扩展:通过上面的js方法,同样可用实现让div到达多少距离的时候,实现显示或者隐藏, 比如我们需要做返回顶部的功能,当距离达到多少的时候就显示出来,

<a href="javascript:scrollTo(0,0);" id="demo">返回顶部</a>



吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

4.休闲娱乐: 网页游戏入口... H5游戏入口... 绝地求生首次打折降价了点此访问

链接: http://www.fly63.com/article/detial/107

Web布局:display属性

经过 CSS盒模型 和视觉格式化模型两个章节中的学习,我们有了一个清晰的概念。即 在CSS中插何一个元素都是一个盒子,甚至是文本节点也是一个盒子(匿名盒子);都有自己的视觉格式化(不同的盒子)

IOS 浏览器页面布局错位(如:点不到)的分析与解决

IOS 浏览器软键盘的拉起与收缩、微信 IOS 浏览器底部导航条的显示与隐藏,很容易导致页面布局错位(相对窗体的绝对定位元素):明明按钮在这里,却要在上面一点儿点击屏幕才能点到它

移动端布局方案,简单高效,完美适配各种机型

rem布局:使用rem作为元素大小的单位,rem=fount-size,根据不同的屏幕宽度设置不同的fount-size值,这样元素也会跟着屏幕变大或变小,第二步:使用postcss-px2rem-exclude将px转换为rem

flex的各种布局

Flex是Flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。任何一个容器都可以指定为Flex布局。

响应式布局

Responsive web page响应式布局/自适应网页,可以根据浏览器设备不同(pc,pad,phone)而自动的更改布局,图片,文字效果,不会影响用户体验

css如何实现n宫格布局?

现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在.带边框, 先解释一个小技巧, 如何实现正方形, 保证看一遍就会, 结论就是:padding的值如果是百分比

css之定位

定位是css当中一种操作html元素布局的方案;属性position:static:默认值,无特殊定位,对象遵循HTML原则;absolute:绝对定位,将对象从文档流中完全拖离出来;fixed:类似于绝对定位的方式.

CSS flex布局入门

都知道html正常的文档流是自上而下排列的,块级元素会像下左图一样排列。但是项目中尤其是移动端项目会有很多需求的排版方式是要求由左到右排列。虽然可以通过dispaly:inline-block、float、position完成排版,但是需要对距离进行计算,计算起来十分麻烦

实现三栏布局的5种方式

用五种方式实现三栏布局。高度已知,左右两边宽度300px。中间自适应。看到这个题目,我们首先会想起2-3种解决办法。今天我们就来挖一挖到底有多少种方法实现三栏布局。

css实现内容不相同的左右两个div等高

现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢?下面是3种实现方法,觉得很有代表性,所以索性收藏起来。通过父元素设置 overflow:hidden

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全