固定右侧边栏滚动特效_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

固定右侧边栏滚动特效_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:22 AM

一、前言

我们都知道：浏览网页时，右（左）侧边栏的高度往往没有文章主体内容的高度高。当页面向下滑动高度超出右（左）侧边栏高度的时候，右（左）侧边栏就不可见了。

怎样让右（左）侧边栏一直部分显示呢？

解决方案：当右（左）侧边栏底部可视化时，就固定在可视化区域的底部。即当滚动的高度加上屏幕（可视化区域）高度大于右（左）侧边栏高度的时候，固定右（左）侧边栏。

二、具体实现代码

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

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

See all articles