jquery版固定边栏滚动特效

最新推荐文章于 2022-05-01 20:46:39 发布
最新推荐文章于 2022-05-01 20:46:39 发布
阅读量83 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/luoguixin/p/6256883.html
版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
}
#header{
width:100%;
height:200px;
background-color: #CCCCCC
}
#side{
float: left;
width: 300px;
height:500px;
background-color: #008000;
}
#main{
margin-left: 310px;
height:5000px;
background-color: #5449F9;
}
#contain{
position: relative;
}
</style>
</head>
<body>
<div id="header">

</div>
<div id="contain">

<div id="side">

</div>
<div id="main">

</div>

</div>
</body>
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//方法一：适用无头部型侧边栏
/*$(window).scroll(function() {
var windowHeight = $(window).scrollTop() + $(window).height();
var sideHeight = $('#side').height();
if (windowHeight > sideHeight) {
$('#side').css({
'position' : 'fixed',
'left' : '0px',
'top' : -(sideHeight - $(window).height())
});
} else {
$('#side').css({
'position' : 'static'
});
}
});
window.οnlοad=function(){
$(window).trigger('scroll');
};
$(window).resize(function(){
$(window).trigger('scroll');
})*/
//方法二：适用有头部型侧边栏
$(window).scroll(function() {
var windowHeight = $(window).scrollTop();
var sideHeight =$('#main').height()-$('#side').height();
if (windowHeight >200 && windowHeight<sideHeight+200) {
$('#side').css({
position : 'absolute',
left : '0px',
top: windowHeight-200+'px'
});
} else if(windowHeight <=200){
$('#side').css({
position: 'absolute',
left : '0px',
top: '0px'
});
}
});
window.οnlοad=function(){
$(window).trigger('scroll');
};
$(window).resize(function(){
$(window).trigger('scroll');
})
</script>
</html>

转载于:https://www.cnblogs.com/luoguixin/p/6256883.html

weixin_30563917
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery两边固定中间滚动代码
06-24
在“jQuery两边固定中间滚动代码”中，我们主要关注的是如何在用户滚动页面时，保持侧边栏固定在屏幕的一侧或两侧。 1. **HTML结构**：创建页面的基本结构，通常包括一个包含所有内容的主容器，以及左右两个侧边栏...
jQuery左右侧边栏固定中间滚动代码
06-10
总之，`jQuery左右侧边栏固定中间滚动代码`是一个结合了JavaScript事件处理、CSS定位和动画效果的实用技术，它可以提升网站的导航体验，使关键信息始终保持可见。理解并实现这样的功能，对于提升网页设计和开发技能...
JQuery滚到某一高度时固定侧边栏
JavaFeng
05-10 835
在一些分栏的网站布局中，即左侧或右侧为网页主体，另一侧为侧边栏或工具栏的布局，经常会出现网页主体是一个长页面，类似于很多的博客系统，这是就产生了一个需求，就是当侧边栏滚动到某一位置时，固定到页面顶部，这个需求的实现可以使用JQuery来实现，具体实现思路如下： $(document).ready(function(){ $(document).scroll(function(){ ...
JS & jQ实践——固定边栏滚动
lihaoen666的博客
09-25 545
前言 当左边栏内容高度大于右边栏的时候，左边栏继续滚动，右边栏保持底部不变。 使用到的属性有position:fixed、页面高度、滚动高度、内容高度。 判断，当 滚动高度 + 页面高度 > 右边拦高度，右边栏fixed，bottom: 0 , right : 0。 jQuery代码实现 var jWindow = $(window); jWindow.scro
jquery/js固定边栏滚动效果
zhuxiajiayou的博客
11-13 1282
jquery实现固定滚动特效 jquery实现固定右侧边栏滚动特效 #slide-scroll{ float: left; width:70%; background: palegreen; height: 2000px; } #slide-fixed{ float: right; width:30%; background: plum; height: 100
jQuery侧边栏滚动固定跟随
qq_42400124的博客
09-22 804
jQuery侧边栏滚动固定跟随 效果演示： 注意：需要引用jQuery和对应的js,有的代码之前发过就没在重复写，后面有附链接地址。 1.banner轮播代码：swiper轮播地址 2.onload页面加载完成后执行，如果不加高度获取可能会不准确 HTML代码： <!-- scroll01wrap --> <div class="scroll01wrap"> <div class="scroll01"> <div class="scrolltext"&g
HTML+css+jQuery做的固定侧栏和当滚动条滚动时顶部固定栏显示/隐藏
高帅的博客
05-06 1115
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;fixed_test_zmjh&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href=
jquery滚动固定侧边栏插件
05-02
**jQuery滚动固定侧边栏插件详解** 在网页设计中，侧边栏通常用于放置导航菜单、目录或相关链接，方便用户快速访问不同内容。随着网页内容的增多，当用户向下滚动页面时，传统的侧边栏会随之消失，这可能会影响用户...
jQuery左右侧边栏固定中间滚动代码.zip
09-21
《jQuery实现左右侧边栏固定中间滚动效果详解》 在网页设计中，为了提供良好的用户体验，经常需要实现一些动态效果，比如左右侧边栏在页面滚动时保持固定位置，而主要内容区域滚动。jQuery库因其易用性和强大的功能...
jQuery两边固定中间滚动特效代码
03-20
**jQuery两边固定中间滚动特效代码详解** 在网页设计中，为了提供更好的用户体验，有时需要实现一种效果：当用户滚动页面时，页面的某些部分（如侧边栏）保持固定在屏幕的一侧，以便用户在浏览内容时能快速访问导航...
jQuery实现侧边栏随窗口滚动
axl---专心专注于web前端开发
03-29 186
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
网页返回顶部功能实现
云隐雾匿的博客
05-01 1382
一、效果图： 二、准备工作： jquery-3.6.0.min.js下载（链接如下） Download jQuery | jQuery 如图，右键选择Download the compressed....，点击将链接另存为： 保存在你想要的路径下： 三、代码： 强调一点： <script>中的src处路径格式为：file:\\\你的jquery-3.6.0.min.js存放地址\jquery-3.6.0.min.js （这种写法是为了帮助纯小白同..
常用组件之侧栏菜单滑动及返回顶部效果
xuexueq的博客
06-23 758
侧栏菜单 当点击文章模板时，侧栏从右侧平缓划出并且遮罩层使整个页面变暗。选择侧栏触发器 $('#sidebar_trigger') ,对其添加监听点击事件 showSideBar() ,使遮罩层$('.mask') 和$('#sidebar') 都显示出来。 然后再对遮罩层$('.mask') 监听一个点击事件hideSideBar,使遮罩层$('.mask') 和$('#sidebar') 隐
$(window).scroll() 方法不能触发
GuangRong1的博客
02-21 1442
https://blog.csdn.net/u011784205/article/details/76374968     https://blog.csdn.net/qq_31924435/article/details/59100385
“返回顶部”按钮的实现
热门推荐
WittyLu的博客
03-08 2万+
在很多地方，我们都会用到“返回顶部”按钮。那么这个要怎么实现呢？ 1、html代码 返回顶部 2、css代码 .back_to_top{ position: fixed; bottom:30px; right: 30px; border:1px solid #888; }3、js代码 var backButton=$('.back_to_top')
$(window).scroll()触发失效
在希
08-11 2871
标题$(window).scroll()触发失效 最近遇到一个问题，在项目中写了$(“window”).scroll()方法，但是在滚动页面的时候发现此方法没有触发，后来查找原因才发现是因为页面中的html或者body元素设置了overflow:auto样式才无法出发 解决方式：在页面结构布局完整的情况下将改样式去掉。 关于window.scroll系列方法汇总 & 滚动到指定元素位置 1.window.scroll() 概述 滚动窗口至文档中的特定位置。 语法 window.scroll(x-co
$(window).scroll()无法触发
进步的记录
09-02 2153
要求做一个页面置顶的功能：当页面滚动大于某个值时回到顶部的按钮出现，点击便回到顶部。但是发现$(window).scroll()无法触发，后来发现因为设置了body,html{height:100%;overflow:auto;}才无法触发$(window).scroll() 解决方法： 在没有影响原本样式布局等情况下，去掉body,html的overflow的设置或者是height:10...
前端
09-21 84
百度地图第三方接口pc端的地址： http://map.baidu.com/?latlng=34.507327,109.479665&title=标题&content=介绍&autoOpen=true&l 实现html的table滚动条，根据table的...
jquery侧边栏插件
最新发布
09-26
3. 交互特效：我们可以自定义侧边栏的样式和动画效果，例如淡入淡出、滑入滑出等，使网页更具吸引力。 4. 多级菜单：通过嵌套列表或其他各种方式，我们可以创建多级菜单，使用户能够方便地浏览和选择不同的选项。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值