Heim > Artikel > Web-Frontend > 固定右侧边栏滚动特效_html/css_WEB-ITnose
固定右侧边栏滚动特效_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:22:471637Durchsuche
一、前言
我们都知道：浏览网页时，右（左）侧边栏的高度往往没有文章主体内容的高度高。当页面向下滑动高度超出右（左）侧边栏高度的时候，右（左）侧边栏就不可见了。
怎样让右（左）侧边栏一直部分显示呢？
解决方案：当右（左）侧边栏底部可视化时，就固定在可视化区域的底部。即当滚动的高度加上屏幕（可视化区域）高度大于右（左）侧边栏高度的时候，固定右（左）侧边栏。
二、具体实现代码
2.1 JavaScript 技术实现固定右侧边栏滚动特效
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <title>JavaScript技术实现固定右侧边栏滚动特效</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <link rel="shortcut icon" href="img/favicon.ico"> <link rel="apple-touch-icon" href="img/touchicon.png"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="main"> <article id="content"> <!--CODE--> </article> <aside id="sidebar"> <!--CODE--> </aside> </div> <script> //通过一个元素的id获得这个元素的DOM引用 var $ = function(id) { return document.getElementById(id); } //监听window的滚动事件，事件绑定函数 ////addEvent函数：用于给一个元素绑定多个事件 var addEvent = function(obj, event, fn) {//三个参数分别为元素对象名字、绑定事件、触发的回调函数 if(obj.addEventListener) { obj.addEventListener(event, fn, false); }else if(obj.attachEvent) {//IE浏览器兼容 obj.attachEvent('on'+event, fn); } } var domSider = $('sidebar'); var scrollEvent = function() { var sidebarHeight = domSider.offsetHeight;//右侧边栏高度 var screenHeight = document.documentElement.clientHeight || document.body.clientHeight;//屏幕高度 var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;//滚动高度 if(scrollHeight + screenHeight > sidebarHeight) { domSider.style.cssText = 'position:fixed;right:0px;top:' + (-(sidebarHeight - screenHeight)) + 'px'; }else{ domSider.style.position = 'static'; } } //解决缩小页面刷新后右侧边栏空白和放大页面右侧边栏底部白边的方法 addEvent(window, 'scroll', function() {//当执行滚动时触发scrollEvent事件 scrollEvent(); }); addEvent(window, 'resize', function() {//当resize时触发scrollEvent事件 scrollEvent(); }); </script> </body></html> 2.2 jQuery 技术实现固定右侧边栏滚动特效
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <title>jQuery技术实现固定右侧边栏滚动特效</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <link rel="shortcut icon" href="img/favicon.ico"> <link rel="apple-touch-icon" href="img/touchicon.png"> <link rel="stylesheet" href="css/style.css"/> </head> <body> <div id="main"> <article id="content"> <!--CODE--> </article> <aside id="sidebar"> <!--CODE--> </aside> </div> <script src="https://code.jquery.com/jquery.js"></script> <script> var jWindow = $(window);//jqueryWindow对象 jWindow.scroll(function() {//事件绑定，监听window上的滚动对象 var windowHeight = jWindow.scrollTop() + jWindow.height();//滚动高度+屏幕高度 var sidebarHeight = $('#sidebar').height();//右侧边栏高度 if(windowHeight > sidebarHeight) {//设置fixed条件判断(滚动高度+屏幕高度>右侧边栏高度) $('#sidebar').css({ 'position' : 'fixed', right : '0px', top : -(sidebarHeight - $(window).height()) }); }else{ $('#sidebar').css({ 'position' : 'static' }); } }); //解决缩小页面刷新后右侧边栏空白和放大页面右侧边栏底部白边的方法 window.onload = function() {//当执行滚动时触发scrollEvent事件 jWindow.trigger('scroll'); }; jWindow.resize(function() {//当resize时触发scrollEvent事件 jWindow.trigger('scroll'); }); </script> </body></html> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：议：如何将树形菜单形式的数据转化成HTML的二维表（相同内容需合并单元格）_html/css_WEB-ITnoseNächster Artikel：如何让文字下面的线（border-bottom） 和 文字的长度一致求大神帮忙_html/css_WEB-ITnose