随滚动条滚动，动态修改元素class

转载于 2016-03-28 09:43:00 发布 · 377 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wteng/p/5327875.html

文章标签：

#javascript #ViewUI

本文介绍如何利用jQuery和CSS实现网页元素随滚动条固定显示的功能。通过改变元素的类名，将元素的位置属性设置为fixed，使得指定的块可以在页面滚动时保持在浏览器窗口的固定位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面某块内容当页面滚动时，固定在浏览器的一个位置

其实就是改变了便签的class，修改了css属性设置position: fixed；fixed属性可以让便签固定在浏览器某一位置（记得引用jquery框架）

css:

 1 .css1{
 2     height:200px;
 3     width:200px;
 4     background-color: #000000;
 5 }
 6 .css2{
 7     position: fixed;
 8     top: 30px;
 9     left: 150px;
10     height:200px;
11     width:200px;
12     background-color: #000000;
13 }

jq:

1  $(window).scroll(function(){
2         var $block = $(".block");
3         var scrollTop = $(document).scrollTop();
4         if(scrollTop>=1150){
5             $block.addClass("css1");
6         } else {
7             $block.removeClass("css2");
8         }
9     });