jQuery侧边栏滚动固定跟随
效果演示：
jQuery侧边栏固定跟随
注意：需要引用jQuery和对应的js,有的代码之前发过就没在重复写，后面有附链接地址。
1.banner轮播代码：swiper轮播地址
2.onload页面加载完成后执行，如果不加高度获取可能会不准确
HTML代码：
<!-- scroll01wrap -->
<div class="scroll01wrap">
<div class="scroll01">
<div class="scrolltext">
<p>Hayao Miyazaki</p>
<h3>宫崎骏</h3>
<h4>他是第一位将动画上升到人文高度的思想者，同时也是日本三代动画家中，承前启后的精神支柱人物。宫崎骏在打破手冢治虫巨人阴影的同时，用自己坚毅的性格和永不妥协的奋斗又为后代动画家做出了榜样。</h4>
<a class="more more01">了解更多</a>
</div>
<div class="scrollmin">
<!--为了代码简洁后面重复的item都删除了，后期需要可直接复制修改内容-->
<!--item开始-->
<div class="item">
<div class="imgwrap">
<div class="imgbox">
<h3><img src="img/img07.jpg" /></h3>
<p>1958</p>
</div>
</div>
<div class="text">
<h3>千与千寻</h3>
<h4>这个世界真的很现实，每个人都在为着同一个目的，不惜一切代价努力着，心甘情愿的成为金钱的奴隶，死心蹋地的付出</h4>
</div>
</div>
<!--item结束-->
</div>
</div>
<!-- bgimg -->
<div class="all-shapes"></div>
</div>
<!-- to-top -->
<a href="javascript:;" id="totop" class="totop">
<div>
<img src="img/jt02.png" />
</div>
</a>
css：
/* scroll01wrap */
.scroll01wrap{width: 100%;padding: 100px 180px;position: relative;/* height: calc(100% - 100px); */box-sizing: border-box;}
.scroll01wrap.fixed .scrolltext{position: fixed;top: 100px;z-index: 1;left: 180px;}
.scroll01wrap.fixed02 .scrolltext{position: absolute;left: 0;top: initial;bottom: 0;}
.scroll01wrap .a-img{position: absolute;left: 0;bottom: 0;display: block;width: auto;transition: all .3s;max-width: 50%;display: none;}
.scroll01wrap .a-img.fixed{position: fixed;left: 0;bottom: 0;transition: all .3s;}
.scroll01{margin: auto;display: flex;display: -webkit-flex;-webkit-justify-content: flex-end;justify-content: flex-end;position: relative;z-index: 1;}
/* i05-l */
.scrolltext{width: 390px;position: absolute;left: 0;top: 0;}
.scrolltext font{display: block;font-size: 14px;color: #3ab1b4;margin-bottom: 15px;}
.scrolltext p{font-size: 28px;line-height: 30px;color: #2e5c72; font-weight: bold;}
.scrolltext h3{font-size: 70px;color: #2e5c72;margin-bottom: 30px;line-height: 86px;font-weight: bold;}
.scrolltext h4{font-size: 16px;line-height: 26px;color: #666666;margin-bottom: 50px;}
.scroll01wrap .scrolltext .more{width: 170px;height: 46px;line-height: 46px;background-color: #2e5c72;border-color: #2e5c72;}
.scroll01wrap .scrolltext .more:hover{color: #2e5c72;}
/* morecolor */
.morecolor{border-color: #3ab1b4;color: #3ab1b4;}
.morecolor:hover{color: #FFFFFF;}
.morecolor:before{background-color: #3ab1b4;}
.morebg{background-color: #3ab1b4;color: #ffffff;}
.morebg:hover{color: #3ab1b4;}
.morebg:before{background-color: #ffffff;}
/* scrollmin */
.scrollmin{width: calc(100% - 700px);box-sizing: border-box;position: relative;}
.scrollmin:before{content: '';display: block;width: 1px;height: 100%;background-color: #DDDDDD;position: absolute;top: 0;left: 50%;background-color: #DDDDDD;}
.scrollmin .item{width: 100%;box-sizing: border-box;display: flex;display: -webkit-flex;-webkit-align-items: center;align-items: center;-webkit-justify-content: space-between;justify-content: space-between;margin-bottom: 70px;}
.scrollmin .item:last-child{margin-bottom: 0;}
.scrollmin .item:nth-of-type(odd){-webkit-flex-flow: row-reverse;flex-flow: row-reverse;}
.scrollmin .item .imgwrap{width: 50%;box-sizing: border-box;padding-left: 50px;}
.scrollmin .item .imgbox{width: 200px;height: 200px;border: 1px solid #2e5c72;padding: 0;overflow: hidden;border-top-left-radius: 20px;border-bottom-right-radius: 20px;box-sizing: border-box;transition: all .3s;position: relative;}
.scrollmin .item .imgbox h3{width: 100%;height: 100%;overflow: hidden;position: relative;transition: all .3s;}
.scrollmin .item .imgbox img{display: block;width: 100%;height: 100%;object-fit: cover;border-radius: 0;transition: all .6s;}
.scrollmin .item .imgbox p{width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: rgba(0,0,0,0.3);font-size: 20px;color: #FFFFFF;display: flex;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;opacity: 0;transition: all .3s;}
.scrollmin .item:hover .imgbox p{opacity: 1;}
.scrollmin .item .text{width:50%;box-sizing: border-box;padding-right: 50px;position: relative;}
.scrollmin .item .text h3{font-size: 30px;color: #2e5c72;margin-bottom: 15px;}
.scrollmin .item .text h4{font-size: 16px;line-height: 24px;color: #666666;text-align: justify;}
.scrollmin .item .text:before{content: '';display: block;width: 20px;height: 20px;position: absolute;right: -10px;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);background-color: #2e3e4b;border-radius: 5px;}
.scrollmin .item:hover .imgbox{background-color: #2e5c72;}
.scrollmin .item:hover .imgbox img{transform: scale(1.1);}
.scrollmin .item:hover .text h3,.scrollmin .item:hover .text h4{color: #2e5c72;}
.scrollmin .item:hover .imgbox h3{border-radius: 50%;}
.scrollmin .item:nth-of-type(even) .text{padding-top: 0;padding-left: 50px;}
.scrollmin .item:nth-of-type(even) .imgwrap{padding-left: 0;}
.scrollmin .item:nth-of-type(even) .text:before{right: initial;left: -10px;background-color: #2e5c72;}
.all-shapes::after,.all-shapes::before{content: '';top: 50%;left: 50%;transform: translate(-50%, -50%);position: absolute;}
.all-shapes::after,.all-shapes::before{-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%}
.all-shapes::before{width:calc(100% - 15%);height:calc(100% - 15%);border:1px dashed #8b74ff;border-width:1.8px!important;animation:rotate-rev 110s infinite linear}
.all-shapes::after{width:calc(100% - 30%);height:calc(100% - 30%);border:1px dashed #fdca92;border-width:1.5px!important}
.all-shapes{display:block;width:700px;height:700px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:1px dashed #ff70d2;border-width:1.75px;top:25%;right:0;animation:rotate 110s infinite linear;position: absolute;right: 20px;top: 80px;z-index: 0;opacity: 0.5;}
@keyframes rotate {
100% {
transform: rotateZ(360deg)
}
}
.scroll01wrap.fixed .all-shapes{position: fixed;}
/* scroll02 */
.scroll02{padding: 100px 0;width: 100%;position: relative;}
.scroll02 h3{font-size: 50px;color: #2e5c72;margin-bottom: 30px;line-height: 86px;font-weight: bold;text-align: center;}
.scroll02 .followList{margin: auto;}
/* footerwrap */
.footerwrap{width: 100%;background-color: #2e5c72;display: flex;display: -webkit-flex;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;height: 80px;}
.footerwrap p{font-size: 18px;color: #FFFFFF;opacity: 0.66;}
/* totop */
.totop{width: 56px;height: 56px;border-radius: 50%;background-color: #2e5c72;display: flex;display: -webkit-flex;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;position: fixed;right: 0;bottom: 0;z-index: 999;opacity: 0;visibility: hidden;transition: all .5s;filter: drop-shadow(2px 4px 6px #081f4d);z-index: 0;}
.totop.now{opacity: 1;visibility: visible;transform: translateY(-200px);-webkit-transform: translateY(-200px);}
jQuery：
function load(){
// scroll01wrap
var scrolltexth=$(".scrolltext").height();
var bannerwrap = $(".bannerwrap").height();
var scroll01wraph = $(".scroll01wrap").offset().top;
var scroll01minh = $(".scroll01wrap").height();
var scroll02h=$(".scroll02").height();
var footerh= $(".footerwrap").height();
var toboth=scroll01minh + scroll02h + footerh + scrolltexth - 100;
var scroll01h=$(".scrolltext");
var shapes=$(".all-shapes");
$(window).on("scroll",
function() {
var b = $(window).scrollTop();
var fixed=b > scroll01wraph && b < toboth;
if (window.contentFixed) return;
if (this.fixed != fixed) {
if (fixed) {
$(".scroll01wrap").addClass("fixed");
scroll01h.css({ transform: '' });
shapes.css({ transform: '' });
}else{
$(".scroll01wrap").removeClass("fixed");
if (b <= scroll01wraph) {
scroll01h.css({ transform: '' });
shapes.css({ transform: '' });
} else {
scroll01h.css({ transform: 'translateY(' + (toboth - scroll01wraph) + 'px)' });
shapes.css({ transform: 'translateY(' + (toboth - scroll01wraph) + 'px)' });
}
}
this.fixed = fixed;
};
// totop
if(b > 500){
$("#totop").addClass("now");
}else{
$("#totop").removeClass("now");
}
})
// totop
if(b > 500){
$("#totop").addClass("now");
}else{
$("#totop").removeClass("now");
}
console.log(bannerwrap,scroll01wraph,footerh,toboth);
}
3.作品展示：jQuery蒙层框鼠标横向跟随
4.图片切换：图文切换
扫一扫
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
