ホームページ > 記事 > ウェブフロントエンド > 右サイドバーのスクロール効果を修正_html/css_WEB-ITnose
右サイドバーのスクロール効果を修正_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:22:471621ブラウズ
1. はじめに
Web を閲覧するとき、右側 (左側) のサイドバーの高さは、記事のメイン コンテンツの高さほど高くないことは誰もが知っています。ページが右 (左) サイドバーの高さを超えて下にスライドすると、右 (左) サイドバーは非表示になります。
右（左）サイドバーを常に部分的に表示するにはどうすればよいですか？
解決策: 右 (左) サイドバーの下部が視覚化されると、視覚化領域の下部に固定されます。つまり、スクロールの高さと画面（表示領域）の高さが右（左）サイドバーの高さより大きい場合、右（左）サイドバーは固定されます。
2. 具体的な実装コード
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> 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。