请输入关键字词

最新搜索
1hbuilder 2 3漫威 4 5人工智能 6 7输入 8
热门搜索
1seo 2hbuilder 3头条号 4网站 5帝国 6cms 7搜索 8公共

滚轮滚动到某位置时指定div改变定位属性

个人博客 2020-12-07 14:40 CSDN 83
知识点:1、offset()方法返回或设置匹配元素相对于文档的偏移;offset().top:获得距离视口高度;2、(window).scroll当用户滚动滑轮时,会发生scroll事件。3、(window).scrollTop(...

知识点:

1、offset()方法返回或设置匹配元素相对于文档的偏移;offset().top:获得距离视口高度;

2、(window).scroll当用户滚动滑轮时,会发生scroll事 件 。

3、(window).scrollTop()$(document).scrollTop()效果相同,返回滚动条的滚动位置;但前者为窗口对象,后者为文档对象。

代码部分:

假设有一个导航栏在视口非顶部,要求滚动到该导航栏位置时,导航栏固定在某一位置,在窗口中始终可见。

//获取导航栏(class='positionMiddleNav')离视口的高度 
var topBegin=$(".positionMiddleNav").offset().top;
$(window).scroll(function(){ //scroll事件
var win_top=$(this).scrollTop(); //获取滚动条位置
var _top=$(".positionMiddleNav").offset().top; //获取当前导航栏距视口高度
console.log(win_top,'aa');
console.log(_top,'cc');
if(win_top>=_top){
    $(".positionMiddleNav").addClass("sfixed"); //添加sfixed类, 改变定位属性
}
//因为导航栏距视口高度在定位发生后是变化的,
//所以当导航栏回到原位置时保持先前状态需要将滚动条位置与最先前的导航栏位置进行对比
if(win_top<topBegin){
    $(".positionMiddleNavl").removeClass("sfixed");
}
})
/* 属性可自定义,此处为参考*/
.sfixed{
    position:fixed;
    width:1140px !important;
    left:359px;
    padding:10px 10px 10px 40px!important;
    top:0;
    background:#fff;
    box-shadow:0 10px 10px #eee;
    z-index:999;
}

本文转载:CSDN https://www.csdn.net/

特别声明:本文仅供交流学习 , 版权归属原作者,部分文章推送时未能及时与原作者取得联系,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。若本文来源标注错误或无意侵犯到您的知识产权作品或损害了您的利益,烦请发送邮件与我们取得联系4956106#qq.com,我们会及时修改或删除。

手机扫描左侧二维码查看本文信息!

本文标题:滚轮滚动到某位置时指定div改变定位属性

本文地址:https://www.cbing.net/daima/14.html

滚轮   滚动   位置     指定   div   改变   属性
分享到:
wz1

文章评论

来说两句吧...共有0条评论

celan1