固定右侧边栏滚动特效_html/css_WEB-ITnose
一、前言
我们都知道：浏览网页时，右（左）侧边栏的高度往往没有文章主体内容的高度高。当页面向下滑动高度超出右（左）侧边栏高度的时候，右（左）侧边栏就不可见了。
怎样让右（左）侧边栏一直部分显示呢？
解决方案：当右（左）侧边栏底部可视化时，就固定在可视化区域的底部。即当滚动的高度加上屏幕（可视化区域）高度大于右（左）侧边栏高度的时候，固定右（左）侧边栏。
二、具体实现代码
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>
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1386
52
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159
Ist HTML für Anfänger leicht zu lernen?
Apr 07, 2025 am 12:11 AM
HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.
Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?
Mar 20, 2025 pm 05:56 PM
In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
Was ist ein Beispiel für ein Start -Tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.
