滚动监听 after选择器
一、如何实现滚动到一定位置将内容固定在页面顶部
window.onscroll=function(){
//滚动的距离,距离顶部的距离
var topScroll =document.body.scrollTop||document.documentElement.scrollTop;
//获取到导航栏id
var bignav = document.getElementById("pop_title");
//当滚动距离大于150px时执行 固定位置 距离
if(topScroll > 150){
bignav.style.position = 'fixed';
bignav.style.top = -120+ 'px';
bignav.style.left = 0 + 'px';
}else{
//当滚动距离小于150让导航栏恢复原状
bignav.style.position = 'static';
}
}
滚动监听
window.onscroll为滚轮监听，
document.body.scrollTop||document.documentElement.scrollTop 写两个是为了兼容不同浏览器。
固定位置的top要设为负值，原因不明，若为0则会跟上方有空隙。
左右位置虽然是0也要设，不然若为不是100%宽度的内容会出现左右跳动。
上面这种方法高度是自己定死的。
下面介绍获取元素高度的方法。
window.onload = function(){
//获取导航框架
var navContainer = document.getElementById("introductFra");
//获取导航ul
var navBox = document.getElementById("introBox");
//获取导航下内容大框架
var text = document.getElementById("contantFra");
//获取li
var navBoxChild = navBox.children;
//获取内容里每个大块的框架
var textChild = text.children;
//获取导航距顶端距离
var num = navContainer.offsetTop;
//获取导航高度
var a = navContainer.offsetHeight;
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
//滚动告诉超过导航位置
if(scrollTop >= num){
//导航增加fixed属性
navContainer.className = "introductFra fixed";
//下面板块内容向下空出一个导航的距离
text.style.paddingTop = a +"px";
navContainer.style.zIndex = "999";
}else{
//恢复原属性
navContainer.className = "introductFra";
text.style.paddingTop = "";
}
//当导航与相应文档接触的时候自动切换
for(var i=0;i<navBoxChild.length;i++){
if( scrollTop +100 >= textChild[i].offsetTop){
//循环给每个li样式设为空
for(var j=0;j<navBoxChild.length;j++){
navBoxChild[j].className = "";
}
//选中的设为带标志的
navBoxChild[i].className = "introCur";
}
}
};
}
//当导航与相应文档接触的时候自动切换
for(var i=0;i<navBoxChild.length;i++){
if( scrollTop +100 >= textChild[i].offsetTop){
for(var j=0;j<navBoxChild.length;j++){
navBoxChild[j].className = "";
}
navBoxChild[i].className = "introCur";
}
}
};
}
效果如下
offsetTop 为元素距离页面最开始的距离。
offsetHeight为元素高度
这样省去了调整位置的麻烦。
并且设置fixed的属性为一个class，直接更改li的class名，增加这个属性。
这个代码下面展示了导航如何自动选中为哪个版块
先循环给每个li都设为不带选中的class
当滚动的高度加导航的高度大于版块内容距离上面的高度时，
也就是导航移动到版块上方时，这个版块对应的li的class名改为带选中的。
其中选中的class Css代码如下，用到了after选择器。
.introCur::after{
content: '';
display: block;
width: 66px;
height: 3px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -33px;
background: #333;
}
选中的样式
二、after 和 before 伪类元素
必须跟content属性
::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。
这些添加不会出现在DOM中，不会改变文档内容，不可复制，仅仅是在css渲染层加入。
所以不要用:before或:after展示有实际意义的内容，尽量使用它们显示修饰性内容，例如图标，书名号。
三、介绍伪类和伪元素
css3为了区分伪类和伪元素，伪元素采用双冒号写法。
常见伪类——:hover,:link,:active,:target,:not(),:focus。
常见伪元素——::first-letter,::first-line,::before,::after,::selection。
伪类元素的display是默认值inline，可以通过设置display:block来改变其显示。
伪类元素必须加content属性，
1.其属性值可以写书名号content：“》”。
2.在后面显示路径
<style type="text/css">
a::after{
content: "(" attr(href) ")";
}
</style>
<a href="http://www.cnblogs.com/starof">starof</a>
a标签后显示路径
效果
3.模拟实现float ：center 效果
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Float Both</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 14px/1.8 Georgia, serif;
}
#page-wrap { width: 60%; margin: 40px auto; position: relative; }
#logo { position: absolute; top: 0; left: 50%; margin-left: -125px; }
#l, #r { width: 49%; }
#l { float: left; }
#r { float: right; }
#l:before, #r:before { content: ""; width: 125px; height: 250px; }
#l:before { float: right; }
#r:before { float: left; }
</style>
</head>
<body>
<div id="page-wrap">
<img src="img/cat.jpg" id="logo">
<div id="l">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p>
</div>
<div id="r">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
</p>
</div>
</div>
</body>
</html>
实现效果
用before 和after 设置图片的高度，来空出图片的高度。
以上内容摘自https://www.cnblogs.com/starof/p/4459991.html
有大神用伪元素创建了84种小图标，具体可查看http://nicolasgallagher.com/pure-css-gui-icons/
滚动监听 after选择器的更多相关文章
- bootstrap课程12 滚动监听如何实现（bootstrap方式和自定义方式）
bootstrap课程12 滚动监听如何实现(bootstrap方式和自定义方式) 一.总结 一句话总结:通过监听滚动的高,判断滚动的高是否大于元素距离顶端的距离 1.如何知道屏幕滚动的高? st=$ ...
- 滚动监听（bootstrap）
1.05 腊八节 一直都想知道滚动监听是怎么做出来的,今天终于扒拉出来了,在使用的时候只要加上div定位就可以了... <head> <link rel="styles ...
- Bootstrap滚动监听
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. <!DO ...
- jQuery页面滚动监听事件及高级效果插件
jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...
- Bootstrap 下拉菜单和滚动监听插件
一．下拉菜单 常规使用中,和组件方法一样,代码如下: //声明式用法 <div class="dropdown"> <button class="btn ...
- bootstrap的滚动监听
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- bootstap 滚动监听
---首先结合源代码介绍官网的说明 ---然后总结了使用滚动监听的几个步骤 ---最后给出一个简单的例子 ---关键的一点:整体有点零散和乱七八糟,辛苦你的思维和眼睛了,呵呵 ------------ ...
- Android对ScrollView滚动监听，实现美团、大众点评的购买悬浮效果
转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢! 我之前写 ...
- bootstrap-js(3)滚动监听
导航条实例 ScrollSpy插件根据滚动的位置自动更新导航条中相应的导航项. 拖动下面区域的滚动条,使其低于导航条的位置,注意观察active类的变化.下拉菜单中的子项也会跟着变为高亮状态. 1.调 ...
随机推荐
- 剑指offer——04重建二叉树（Python3）
思路:在数据结构中,有一个条件反射,谈及二叉树,就递归.所以在实现重建二叉树时,也应该用到递归的思想. 在前序遍历中,根节点处于第一个:在中序遍历中,根节点的左边为左子树节点,根节点右边为右子树节点. ...
- block的一些注意事项
1,定义block时是可以同时进行赋值的 2,block中是代码块,就是里面写的是语句,需要加分号 3,在block中,允许有多条语句 4,在带有参数的block中,声明部分参数名可以省略,但是建议写
- ROS-Gazebo文件标签解读
前言:Gazebo是一个三维机器人仿真器,它是独立的软件,支持ROS. 标签 功能 <gazebo> 设置Gazebo仿真的参数 <mu1>, <mu2> 设置摩擦 ...
- [转] Java 插入表记录后得到自增的id （附3种方法代码）
转自:https://blog.csdn.net/yaerfeng/article/details/7231093 在MySQL中,使用auto_increment类型的id字段作为表的主键,并用它作 ...
- Ubuntu 16.04安装Caffe的记录及FCN官方代码的配置
相关内容搜集自官方文档与网络,既无创新性,也不求甚解,我也不了解Caffe,仅仅搭上之后做个记录,方便以后重装 安装依赖项sudo apt-get install libprotobuf-dev li ...
- soapUI检查webServices接口的方法以及对自动触发线程的查询
这几天需要熟悉接口传输过来的数据,因此会用到soapUI,但是没结果这个工具,然后百度了下,结合了下,下面是我对webservice在soapUI的展现: 1:其实说白了,就是我们不知道从接口里传输过 ...
- 备份和恢复ZBrush文件
ZBrush可以自动保存绘图的备份副本,并在发生系统错误时提醒您恢复备份副本.当ZBrush软件遇到崩溃.导致错误.非正常退出的时候,可能之前所做的努力就会功亏一篑,那么,在ZBrush软件中能否将文 ...
- ZBrush软件Texture纹理调控板
在zbrush4r8中对一个模型进行纹理制作在速度和易用性方面有诸多优势,通过Texture调控板创建.导入和输出纹理是及其方便且快捷的. Import (导入):导入Photoshop (.psd) ...
- io框架
IO流的三种分类方式 1.按流的方向分为:输入流和输出流 2.按流的数据单位不同分为:字节流和字符流 3.按流的功能不同分为:节点流和处理流 (节点流表示的是直接操作节点(例如文件,键盘)的流,例如F ...
- jsp错误页面的处理
局部的错误处理 1,errorpage 在错误页面指令page中声明errorpage="要显示的页面地址" 在要显示的页面page中声明iserrorpage="tru ...