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

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

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



纯css实现瀑布流(multi-column多列及flex布局)

瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了。纯css实现的瀑布流只能是一列一列的排布,所以还是得用js来实现瀑布流更符合我们常见的瀑布流

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

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

什么是BFC布局——浅析BFC布局的概念以及作用

BFC 可以简单的理解为某个元素的一个 CSS 属性,只不过这个属性不能被开发者显式的修改,拥有这个属性的元素对内部元素和外部元素会表现出一些特性,这就是BFC

移动端H5固定底部导航菜单的三种布局实现

需要把导航固定在底部?只能滑动内容,导航菜单固定不动的。这篇文章主要讲解三种实现方案,包括:fixed,absolute,以及css3的flex布局。

前端布局方式汇总及概念浅析

前端布局方式汇总:普通/文档流 布局、 Float 布局、绝对布局、Grid 网格布局、CSS3 Flex 弹性盒子布局、静态布局、流式布局、 自适应布局、响应式布局...

JQuery实现的固定位置下拉隐藏上拉显示悬浮导航菜单

JQuery实现:1、页面打开时,导航栏悬浮的页面上部 2、页面向下拉的时候导航栏隐藏 3、页面向上拉的时候导航栏出现。

css圣杯布局的实现方式

css圣杯布局思路:外面一个大div,里面三个小div(都是浮动)。实现左右两栏宽度固定,中间宽度自适应。中间栏优先渲染。

css定位有几种_css中常用position定位属性介绍

css可以通过为元素设置一个position属性值,position定位是指定位置的定位,以下为常用的几种:static(静态定位)、relative定位(相对定位)、absolute定位(绝对定位)、fixed(固定定位)、inherit定位

基于jquery 横向/纵向 时间轴插件推荐

这篇文章主要整理一些关于基于jquery,实现横向/纵向时间轴的插件推荐:jquery.jqtimeline插件、timeline.js插件、Timeglider.js插件、Melon HTML5 、jQuery Timelinr、Timeline Porfolio

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

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