实现在某一指定位置的div在窗口滚动到指定位置的时候fixed定位

时间:2022-05-05 09:29:16

HTML:

 <div class="top">
    ·····内容
</div>
<div class="scroll"></div>
<div class="bottom">
    ·······内容
</div>

CSS:

 .sfixed{
  position:fixed;
  top:0px;
  left:0px;
  z-index:;
}
.scroll{
  ······样式
}

Jq:

 <script>

     var top1=$(".scroll").offset().top;

     $(window).scroll(function(){

       var  win_top=$(this).scrollTop();

       var  top=$(".scroll").offset().top;

       if(win_top>=top){

         $(".scroll").addClass("sfixed");

       }//如果此处用else判断来remove sfixed这个类的话是不行的,因为当加上这个类的时候,".scroll"这个元素fixed的top值是0,获取到的offset.top就相当于是当前滚动条的滚动的距离,win_top与top值就一直相等了,这样会导致抖动;只有与以前的距离做比较才能实现滑上去的时候能回到原来的位置。

       if(win_top<top1){

         $(".scroll").removeClass("sfixed");

       }

     })

   </script>

效果:与最初的top值比较:

实现在某一指定位置的div在窗口滚动到指定位置的时候fixed定位

  不与最初的top值比较,直接else:

实现在某一指定位置的div在窗口滚动到指定位置的时候fixed定位

思路:滑下来的时候,如果此时滚动条到顶部的距离大于最初那个div到顶部的距离的时候就让这个div固定定位;

   滑上去的时候,如果此时滚动条到顶部的距离比原来div到顶部的距离的时候就去掉固定定位的属性。

实现在某一指定位置的div在窗口滚动到指定位置的时候fixed定位的更多相关文章

  1. 如何通过JQuery将DIV的滚动条滚动到指定的位置

    这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...

  2. tableView刷新指定的cell 或section和滚动到指定的位置

    转自:http://blog.csdn.net/tianyou_code/article/details/54426494 //一个section刷新 NSIndexSet *indexSet=[[N ...

  3. DIV内滚动条滚动到指定位置

    相对浏览器,将指定div滚到到指定位置,其用法如下: $("html,body").animate({scrollTop: $(obj).offset().top},speed); ...

  4. jQuery实现将div中滚动条滚动到指定位置的方法

    1.JS代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainCo ...

  5. 【HTML】网页中如何让DIV在网页滚动到特定位置时出现

    用js或者jquery比较好实现.但你要知道,滚动到哪个特定位置,例如滚动到一个标题h3那显示这个div,那么可以用jquery算这个h3距离网页顶部的距离:$("h3").off ...

  6. jquery滚动到指定位置

    利用jquery实现页面可视区滚动到指定位置.直接上代码 //滚动到指定位置 function scrollTo(element,speed) { if(!speed){ speed = 300; } ...

  7. html js点击按钮滚动跳转定位到页面指定位置(DIV)的方法代码

    一:通过html锚点实现滚动定位到页面指定位置(DIV):    如果我们要点击实现跳转的地方是一个html锚点,也就是点击一个A标签超链接实现跳转,可以把A标签的href属性直接指向跳转指定位置的d ...

  8. js滚动到指定位置

    序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看 ...

  9. selenium webdriver——JS滚动到指定位置

    1.DOM滚动方法 1.scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它, ...

随机推荐

  1. &lbrack;Swift&rsqb; 疑难杂症

    [Swift] 疑难杂症 1.class  .... has no initializers -->  class 的每一个元素都需要初始化,否则会报错,除了可空元素

  2. const关键字在C和C&plus;&plus;区别

    1)C++默认为内部链接:C默认为外部链接2)在C++中,一般一个const不会创建内存空间,而是将其保存在符号表(待看).比如: ; char buf[bufsize]; 这里无需为const创建内 ...

  3. API基础开发学习网址

    http://www.cnblogs.com/shanyou/category/307401.html http://www.cnblogs.com/beginor/archive/2012/03/1 ...

  4. discuz管理中心无法登陆

    检查下配置文件,当前管理是不是创始人. 如是,那试下修改数据库,在数据表出错时也会这样,还有一个也同时试下 \config\config_global.php 文件 $_config['admincp ...

  5. web前端框架选型

    1.1.界面使用脚本语言有html5,php5,css3,js动态库jquery等 1.2.html采用技术为最新html5技术,html5生成的页面在phone.pad.Phablets.pc也可方 ...

  6. Node&period;js如何执行cmd

    最近正好因业务的一个需求需要研究如何根据vscode的插件名来下载对应的插件以解决之前将插件打包上传到服务器上面导致的延迟问题(插件体积小还好说,如果体积过大,即便是压缩打成zip包,如果同一时刻很多 ...

  7. oracle 查看字段说明

    SELECT    *FROM    all_col_commentsWHERE    table_name = UPPER ('t_bn_background')AND OWNER = 'VTER' ...

  8. linux下rsync和tar增量备份梳理

    前面总结过一篇全量备份/增量备份/差异备份说明,下面介绍下linux下rsync和tar两种增量备份的操作记录: 1)rsync备份 rsync由于本身的特性,在第一次rsync备份后,以后每次都只是 ...

  9. Lucene&period;net&lpar;4&period;8&period;0&rpar; 学习问题记录一&colon;分词器Analyzer的构造和内部成员ReuseStategy

    前言:目前自己在做使用Lucene.net和PanGu分词实现全文检索的工作,不过自己是把别人做好的项目进行迁移.因为项目整体要迁移到ASP.NET Core 2.0版本,而Lucene使用的版本是3 ...

  10. tp 例子&equals;登录逻辑

    <?php namespace Home\Controller; use Think\Controller; class LoginController extends Controller{ ...