关闭

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

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

在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

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

关闭

flex 增长与收缩

flex:auto 将增长值与收缩值设置为1,基本大小为 auto 。flex:none. 将增长值与收缩值设置为0,基本大小为 auto 。也就是固定大小。增长:基本大小 + 额外空间 *(增长系数 / 增长系数总和) 按比例划分额外空间,然后各自分配。

CSS三种布局模型是什么?

在网页中,元素有三种布局模型:流动模型(Flow) 默认的、浮动模型 (Float)、层模型(Layer)。下面我们来看一下这三种布局模型。

css Grid布局

Gird布局是什么?Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格 ; 能够将网页分成具有简单属性的行和列来完成我们需要的网格布局

CSS自定义属性+CSS Grid网格实现超级的布局能力

我在工作中使用CSS Grid已经有几个月了,我非常喜欢它在页面布局时给我的灵活性。这么长时间以来,我们一直没有一个真正的网格布局解决方案——用浮动和flexbox总是有各种各样的限制。但现在,我真的无法想象没有Grid的CSS!

html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

html实现用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰、一目了然能够看清事情发生的过程,UI页面也显示的那么清晰。如何用css+html做出时间轴展示事件点的?

CSS中的圣杯布局与双飞翼布局

什么是圣杯布局?所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局;什么是双飞翼布局?和圣杯布局一样,双飞翼布局也是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局,就是布局的形式上存在差异 

css有几种常见布局?

css有几种常见布局?下面本篇文章就来给大家介绍5中常见布局方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

CSS三栏布局的5种方法详解

假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应.将浏览器窗口压窄,可以看到变化。由于上面的代码中设置的高度是min-width,而不是设置的固定高度width,所以现在看到的也就是高度不固定的情况。

height百分比失效_解决css中height:100%失效的问题

为了让网页内容更好的适应各类屏幕尺寸,一般都需要用到height:100%。但是会发现,height百分比失效并没有生效,这是什么原因造成的呢,以及我们需要如何解决呢?

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

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

点击更多...

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