使用jQuery实现指定内容滚动同时左侧或其他地方不滚动的方法

技术驱动者

于 2023-09-26 12:15:38 发布

阅读量164

点赞数

CC 4.0 BY-SA版权

文章标签： jquery 前端 javascript js

本文链接：https://blog.youkuaiyun.com/CodeWhizZ/article/details/133303820

js 专栏收录该内容

505 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了一种使用jQuery实现内容滚动时，指定的左侧或其它区域保持固定不动的方法。通过HTML结构、CSS样式和JavaScript代码的配合，创建了滚动容器和固定容器布局，当滚动容器滚动时，固定容器位置会相应调整，始终保持在页面上方。

HTML结构：

<div class="container">
  <div class="scrollable"></

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

技术驱动者

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

移动端侧边菜单栏-Jquery

熬猪的夜的博客

08-26

871

移动端侧边栏基于jquery - 目录 ![结构目录 icon图自行下载](https://img-blog.csdnimg.cn/17c201ef009d49eeba7ddc15490ac065.png#pic_center) - 效果 - 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati

使用Jquery在项目开发过程中遇到的问题汇总--Tabs左右切换（二）

mayism0209的博客

06-08

1026

首先先抛出需求: Tabs区域的Tabs的个数是根据后台传过来的，当Tabs数目较多的时候，需要设计左右滑动的按钮通过点击显示隐藏的Tabs。Tabs区域的HTML代码结构为：contentBottomHTML += '<span id="leftArrow" class="span_icon" style="margin:0 5px;display:inline-block; vertic...

参与评论您还未登录，请先登录后发表或查看评论

jQuery侧边栏滚动固定跟随

qq_42400124的博客

09-22

927

jQuery侧边栏滚动固定跟随效果演示：注意：需要引用jQuery和对应的js,有的代码之前发过就没在重复写，后面有附链接地址。 1.banner轮播代码：swiper轮播地址 2.onload页面加载完成后执行，如果不加高度获取可能会不准确 HTML代码：  <div class="scroll01wrap"> <div class="scroll01"> <div class="scrolltext"&g

jquery 动态的把table左边列表固定不动，右边可上下滑动。

num001的博客

01-31

7968

function FixTable(TableID, FixColumnNumber, width, height) { if ($("#" + TableID + "_tableLayout").length != 0) { $("#" + TableID + "_tableLayout").before($("#" + TableID)); $("

jquery 使滚动条滚动到一定位置后不在滚动

wccmfc123的专栏

04-18

749

$(document).ready(function(){ //alert(0); var flag = true; var height = 0; $(window).scroll(function(){ if($(document).scr

jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法

10-23

本篇文章将详细介绍如何使用jQuery来实现指定内容滚动，同时其他部分不滚动的技巧。首先，要实现这个效果，我们需要理解CSS中的`position`属性。`position`属性可以设置为`static`（默认值）、`relative`、`...

jQuery实现点击滚动到指定元素上的方法分析

10-15

总的来说，通过jQuery的`offset()`和`animate()`方法，我们可以轻松实现点击导航链接时，页面自动滚动到相应内容区域的功能。这不仅提高了用户体验，也使得网站的导航更加直观和高效。在实际开发中，还可以结合其他...

jQuery实现列表自动滚动循环滚动展示新闻

10-25

4. 定时器和滚动函数：使用JavaScript的setInterval()方法设置一个定时器，定时触发滚动函数scrollNews，以固定的时间间隔不断调用这个函数来实现自动滚动。在 scrollNews 函数内部，需要通过操作DOM来将ul元素向左...

无间断向左滚动jquery代码（走马灯）

熊猫小大王

04-13

125

/* jquery向左滚动代码 by ~Wang html: <div id="scroll"> <ul> <li>[content]</li> //内容区必须为定宽,并且内容区域总宽大于等于#scroll </ul> </di...

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

ddjq1044的博客

05-17

239

　　这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置，方便自动定位。 var container = $('div'), scrollTo = $('#row_8'); container.scrollTop( scrollTo.offset().top - container.offset().top + container.scrollTop...

[JQuery插件] 固定表头, 左侧某些列的表格

weixin_34125592的博客

05-13

346

固定表头、左侧列的表格在很多报表中都很常见，滚动表格的时候，只有数据部分会滚动，而数据的说明部分是固定的。这主要是为了用户在浏览数据的时候，更加的清晰，直观。在很多报表中，我们都会实现这种类型的表格，但是在网页上，如果要展示这样的表格，我们没有找到现成的，因此就自己写了一个JQuery的插件。而我们把这个JQuery插件命名为BI Grid，也是为了表示这种类型的表格在报表中最常见。 ...

【Jquery】------- Jquery实现左侧页面切换滑入，滑出实例代码展示

皮皮冰要做大神

08-04

1760

1. Jquery实现左侧页面切换滑入，滑出实例代码展示: 1.1 CSS3样式: <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } /***右侧窗口****/ .righ..

jQuery实现点击左侧固定导航栏，页面滑动展示相应页面内容相对应

ITisgrowing的博客

12-02

7490

点击左侧导航栏，定位对应的页面，显示相应的内容；滑动到对应的内容，自动匹配相应的导航栏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内容滑动与导航时时对应</title> <

JQuery 公告滚动(跑马灯特效)

汉堡请不要欺负面条

07-13

2476

一.公告向左滚动 html,body,div,ul,li{ margin: 0; padding: 0; } a{text-decoration: none;} .noticelist{ width: 730px; white-space: nowrap; overflow: hidden; background: #ccc;

Jquery锚点导航定位、css设置头部左侧固定，右侧内容滚动

weixin_42064877的博客

10-08

1202

锚点导航，点击左侧导航定位到标题

jQuery高仿真移动手机滑动侧边栏布局插件

yuxiaoxia28的博客

06-23

1980

简要教程 jQuery.mmenu是一款高仿真移动手机滑动侧边栏效果的jQuery插件。该jQuery插件能够制作出和手机应用程序效果完全相同的隐藏滑动侧边栏和多级菜单效果。它的特点有：滑动侧边栏可以放置在页面的上下左右四个位置。可以作为水平滑动菜单或垂直下拉菜单使用。整个布局包括完整的搜索框，页面头部，脚部和内容区域。适合移动触摸设备使用。可以很容易的通过CSS文件来自定义样式。可

php侧边栏导航效果,jQuery 实现侧边浮动导航菜单效果_jquery

weixin_39910523的博客

03-24

315

单页面网页内容较多，页面长度较大，需要方便快速的在页面的不同位置进行定位，所以浮动菜单逐渐流行了起来，如下图男装、女装、美妆等。这种菜单功能分为两部分：1、点击菜单项，网页滚动到对应位置，可简单通过锚点实现；2、滚动页面的时候，菜单项的选中状态要跟着改变，这就需要监听网页的滚动事件并通过一点计算来实现了；计算 scrollTop 和各个 div 的 offsetTop 的大小关系，判断现在网页...

html5 左侧滑动删除,可滑动触摸的jQuery隐藏侧边栏菜单插件

weixin_30567751的博客

05-31

455

slide-and-swipe-menu是一款支持移动手机滑动触摸的隐藏侧边栏菜单jQuery插件。该侧边栏菜单基于touchSwipe插件，可以通过按钮来触发打开侧边栏菜单，并通过滑动触摸来关闭菜单。安装可以通过bower或nmp来安装该侧边栏菜单插件。bower install slide-and-swipe-menu --savenpm install slide-and-swipe-men...

jquery实现多功能侧边栏

qq_21726707的博客

01-16

1608

温馨提示：这边只是列举案例实现，具体逻辑代码实现需要在jquery.navbar.js查看今天我们将对jquery.navbar的使用进行详细的解释并列举相关的案例，jquery.navbar.js是一个含有多选框和小菜单操作的功能函数，一句话描述为：创建无图片格式左侧菜单栏，展开/收缩的图标放在左边，小菜单图标放在右侧 jquery.navbar.js要求传递的数据格式为json数据，且对...