jQuery实现真正的侧边栏随窗口滚动，题目之所以加上真正的几个字，是因为找这段自己想要的代码实在是不容易。看到很多资料，很多朋友分享的并不是自己想要的。在这里想要实现的是侧边栏某个模块随窗口一起滚动。
题目之所以加上真正的几个字，是因为找这段自己想要的代码实在是不容易。看到很多资料，很多朋友分享的并不是自己想要的。在这里想要实现的是侧边栏某个模块随窗口一起滚动。
方法一：
最初想到的当然是前端大咖bootstrap。bootstrap提供了一个affix的插件功能。这个affix可以允许该模块在拖动滚动条的时候把新的样式赋予模块，核心就是把该元素position给fixed。然而这样会产生出一个问题。当sidebar宽度超出后，会重叠到右侧主题内容。还有一个问题，当你用到其他设备查看的时候，sidebar将会漂浮在页面上，非常难看。所以这种方法不是我想要的。
方法二：
多方查找，终于有了收获。核心思想就是监听滚动来判断事件，监听滚动位置来分支操作。通过停止和动画来处理最后想要的位置。于是利用JQuery就有了下述代码:
step1: 引入jquery
setp2：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script type="text/javascript"> $(function() { var $sidebar = $("#sidebar"), $window = $(window), offset = $sidebar.offset(), topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } }); }); </script> |
上述方法能够完美解决这个问题。但是又有了新的问题。如果换用其他设备，当sidebar占据整个宽度的时候，那么会导致sidebar一直占据顶端，下拉后看不到正文。所以笔者又改变了其中一部分代码，根据当前文档宽度再判断一次，是否增加此操作。
最终代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script type="text/javascript"> $(function() { var $sidebar = $("#roll"), $window = $(window), offset = $sidebar.offset(), topPadding = 100; $window.scroll(function() { if ($(document.body).width() > 768){ if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ marginTop: 0 }); } } }); }); </script> |
原创文章，作者：ifyoung，如若转载，请注明出处：https://www.drugfoodai.com/jquery-scroll.html
微信扫一扫 
支付宝扫一扫 相关推荐
-
django留言板制作，AJAX无刷新加载评论以及简单验证码设置。
django作为python非常流行的网站框架得到越来越多的应用。
在笔者构建CINPredictor期间，想构建一个留言板方便用户交流。于是寻找较好的途径。Django版本更新很快，但是由于笔者有多个django项目运行在一个环境中，前期有几个计算框架以来一些较为久远的计算包，所以短期内不打算更新django版本。高版本的django在pypi上面有插件，大家可以去搜索安装。我们这里需要自定义一些功能所以选择自己写。 -
真正完美解决锚点偏移量问题，Bootstrap的Affix顶部被遮挡问题。
本人在做HAMdb数据库的时候也发现顶部affix导航之后，点击锚点会使得其导航被fixed，导致被target的正文会以窗口顶部对其，导致如图所示的遮挡。本人尝试多种方式，最后综合完美解决这一问题。
-
PHPWEB突然后台没有管理权限，误操作权限设置，恢复权限解决方法
PHPWEB是一个比较老的框架，但是一直是饱受争议的框架。总是容易被挂马和攻击。经常在子目录出现一些博彩和不正规网站静态网页。在众多攻击中，有时候会使得后台瘫痪，出现登陆后没有权限的提示。在手动删除有问题的挂马目录之后，我们需要恢复后台的管理。之前我们解决了后台文章和图片无法修改问题。现在来解决这个没有权限的问题。
-
Django如何打造自定义后台和美化后台管理
在django不涉及到数据管理的站点，比如实时展示和实时计算的网站，我们不需要设计自定义后台。然而在创建综合性应用，需要管理数据和数据模型的时候就需要有一个好的后台管理系统。
-
解决django消息模块messages无法显示
其消息框架允许你临时将消息存储在请求中，并在接下来的请求（通常就是下一个请求）中提取它们并显示。每个消息都带有一个特定level 标签，表示其优先级（例如info、warning 或error）
-
JavaScript 实现百度等搜索引擎搜索关键字标红的效果
在做数据库HAMdb的时候发现需要在搜索结果标红搜索的关键字，这样看起来更加清晰。因此搜索Js和jQuery方法。最终找到一个最靠谱的，根据自己的情况改装之后如下：
-
Django科学计算平台搭建中,实时监控运行状态的解决方案
Django科学计算平台搭建中,实时监控运行状态的解决方案, 使用 Node.js 和 Socket.IO 实现 Django 的实时处理
-
jQuery会退出前端历史舞台吗
出于以前对Jquery的狂热，我还是得说说它现在比较好用的地方。那就是Vue 和React对动态渲染元素的能力不足，里面都是写好的模版再渲染。而有些情况就需要特别灵活，此时Jquery还是可以发挥一些动态优势的，而用Vue 和React 反而会非常不好实现，问题会比较多。 不过jquery真的是老了，js的能力越来越强，现在用js也可以很容易动态渲染复杂的问题。
