jquery版固定边栏滚动特效

时间：2022-08-22 09:05:07

<!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.onload=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.onload=function(){
$(window).trigger('scroll');
};
$(window).resize(function(){
$(window).trigger('scroll');
})
</script>
</html>

jquery版固定边栏滚动特效的更多相关文章

  1. html5 固定边栏滚动特效

    <script src="https://code.jquery.com/jquery.js"></script> //引入jquery <scrip ...

  2. jquery版滑块导航栏

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

  3. Jquery实现文字向上逐条滚动

    直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  4. jquery版楼层滚动特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>楼 ...

  5. &lbrack;JQuery&rsqb;ScrollMe滚动特效插件

    最近考完试,一切顺利,昨晚闲着无聊把最近要用的一个插件翻译了一下:ScrollMe. (╯‵□′)╯︵┻━┻地址请戳: /* ScrollMe -李明夕翻译(╯‵□′)╯︵┻━┻ */ ScrollM ...

  6. jQuery&period;smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  7. 一款非常炫酷的jQuery动态随机背景滚动特效

    一款非常炫酷的jQuery动态随机背景滚动特效 图片背景会不停息的滚动,带有那种漂浮的视觉效果,小圈圈飘动. 更好的是还兼容IE6浏览器,大伙可以好好研究研究. 适用浏览器:IE6.IE7.IE8.3 ...

  8. 【前端】jQuery实现锚点向下平滑滚动特效

    jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...

  9. jQuery 间歇式无缝滚动特效分享&lpar;三张图片平行滚动&rpar;

    最近项目中门户首页需要做出图片间歇式无缝滚动特效,但是在网上找资料都是不太理想,不过可以指导.最后自己写了一个demo实现了这个特效,分享出来. 1.jquery.cxscroll.js /*! * ...

随机推荐

  1. 非常适用的Sourceinsight插件，提高效率事半功倍

    一直使用sourceinsight编辑C/C++代码,sourceinsight是一个非常好用的编辑工具可以任意定位,跳转,回退,本人一直 使用该工具做C/C++开发,sourceinsight能够满 ...

  2. 【代码笔记】iOS-对iphone手机进行判断的一些函数

    代码: #import "RootViewController.h" //为判断手机的型号 -(NSString*)deviceString添加头文件 #import " ...

  3. 【PHP】&dollar;&lowbar;POST&comma; &dollar;HTTP&lowbar;RAW&lowbar;POST&lowbar;DATA&comma; and php&colon;&sol;&sol;input

    1.HTML <form> enctype Attribute application/x-www-form-urlencoded  传送之前所有的字符都会被encoded,(spaces ...

  4. linux命令ps aux&vert;grep xxx详解

    对进程进行监测和控制,首先必须要了解当前进程的情况,也就是需要查看当前进程, 而ps命令(Process Status)就是最基本同时也是非常强大的进程查看命令. 使用该命令 可以确定有哪些进程正在运 ...

  5. mouseout、mouseover和mouseleave、mouseenter区别

    今天在使用鼠标事件时,用错了mouseout,于是做个测试总结. 结论: mouseenter:当鼠标移入某元素时触发. mouseleave:当鼠标移出某元素时触发. mouseover:当鼠标移入 ...

  6. PAT &lpar;Basic Level&rpar; Practice （中文）1002 写出这个数 （20 分&rpar;

    题目链接:https://pintia.cn/problem-sets/994805260223102976/problems/994805324509200384 #include <iost ...

  7. 【转】META标签指南：哪些meta标签该用哪些不该用？

    以下内容来源:http://lusongsong.com/reed/8766.html META标签是网页代码中HEAD区的一个关键标签,其提供的信息虽然用户不可见,但却是文档的最基本的元信息.说起m ...

  8. angularJs---route

    route route---‘路由’ ajax的弊端: 1.ajax请求不会留下history记录 2.用户无法直接通过url进入应用中的指定页面(保存书签,分享朋友?) 3.ajax不利于SEO 前 ...

  9. Selenium自动化测试WebDriver下载

    1. 所有版本chrome下载 是不是很难找到老版本的chrome?博主收集了几个下载chrome老版本的网站,其中哪个下载的是原版的就不得而知了. http://www.slimjet.com/ch ...

  10. PIE SDK专题制图切换模板

    1.    功能简介 专题图是突出且较完备的表示一种或几种自然或社会经济现象,从而使地图起到专门化的作用.与普通地图不同,专题图的表示内容丰富多彩,多种多样.在实际业务应用中经常会用同一张地图出很多个 ...

相关文章