如何让DIV固定在页面而不随着滚动条随意滚动

最新推荐文章于 2024-05-16 17:14:39 发布
最新推荐文章于 2024-05-16 17:14:39 发布
阅读量2.9w 收藏 10
点赞数 6
分类专栏： Jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwl20140904/article/details/77161892
版权 
位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。
 	    position:fixed;
            left:200px;
            bottom:20px;
            width:400px;

                

        

        

    




    

      

        

            

              
                
                  java外脑
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    6
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    10
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
html位置不随滚轮移动,DIV固定在页面某个位置，不随鼠标滚动而滚动

				
			

			

				

					weixin_29871753的博客
				

				

					06-09
					
					2275
					
				

			

		

		

			
				
HTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">FixedheaderandfooterforIEBODY{MARGIN:0px}HTML{PADDING-BOTTOM:0px;PADDING-L...

			
		

	



                

              
                



	

		

			

				
					
css x轴不滚动_css如何让元素不随滚动条滚动？

				
			

			

				

					weixin_39717026的博客
				

				

					12-20
					
					829
					
				

			

		

		

			
				
我们经常碰到的需求是希望页面某个元素固定在浏览器的一个位置，无论如何滚动滚动条，位置不变。那么如何让元素不随滚动条滚动？下面给大家介绍一下方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。在CSS中，可以使用固定定位(position:fixed;)来固定元素的位置，让元素不随滚动条滚动。fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的...

			
		

	



                


  
              

                


	

		

			

				
					
bootstrap-table用法-头部不滚动的实现

				
			

			

				

					heoor的博客
				

				

					06-26
					
					4611
					
				

			

		

		

			
				
先上html代码<div id="test" class="table-responsive" style="padding: 0;overflow:auto;">
	<table id="resourceTable" style="min-width:1500px;" class="table table-nowrap">&

			
		

	





	

		

			

				
					
html为什么div移动不了,css怎么设置div不随滚动条移动？

				
			

			

				

					weixin_33745224的博客
				

				

					06-16
					
					803
					
				

			

		

		

			
				
css怎么设置div不随滚动条移动？把一个内容固定到某一个位置 ，相对与浏览器窗口进行定位就可以了。这里使用的是fixed定位。定位 position 通常有 absolute 绝对定位，relative 相对定位，这个都是相对于body里面的块元素来说的，但是如果说想要吧某一个内容就国定在某一个位置，无论滚动条滑到哪里，他依然在浏览器窗口这个位置，就需要用到fixed了 。fixed 元素框的表...

			
		

	



		

			
		



	

		

			

				
					
div在有滚动条时固定在某个位置

					
最新发布

				
			

			

				

					果酱味奶糖的博客
				

				

					05-16
					
					333
					
				

			

		

		

			
				
这个属性会根据用户的滚动动作，将元素固定在某个位置。可能不被支持，因此可以添加浏览器前缀。要实现在有滚动条时固定。

			
		

	





	

		

			

				
					
Bootstrap中固定某一个元素不随滚动条滚动

				
			

			

				

					昊虹AI笔记
				

				

					10-09
					
					380
					
				

			

		

		

			
				
固定某一个元素不随滚动条滚动

			
		

	





	

		

			

				
					
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动

				
			

			

				

					08-14
				

			

		

		

			
				
如何让DIV固定在页面的某个位置而不随着滚动条随意滚动

			
		

	





	

		

			

				
					
html中鼠标停留在div中鼠标的变化设置

				
			

			

				

					番茄Salad
				

				

					07-19
					
					906
					
				

			

		

		

			
				
默认箭头样式 cursor:default 系统默认 箭头样式
手型 cursor: pointer 系统自带 手型
手型 cursor:hand 系统自带 手型 提示 只有ie5支持这种手型也只支持这种
移动十字箭头 cursor: move 系统自带 移动十字箭头
帮助问号 cursor: help 系统自带 帮助问号
十字准心 cursor:crosshair 系统自带 十字准心
文字/编辑 cursor: text 系统自带 编辑或者框选文字时 竖线型
无法释放(禁用) cursor:no-drop

			
		

	





	

		

			

				
					
固定div位置，不随滚动条上下动

				
			

			

				

					AinUser的博客
				

				

					12-30
					
					7702
					
				

			

		

		

			
				
1、position

div中的style属性中的一个关键字，表明了该div所在的位置以及位置本身的属性。

position有四个值可选：static，absolute，fixed，relative。

若要使得div相对于浏览器窗口固定，即不随滚动条的变化而上下移动，可以用fixed属性。最近比较忙，抽不出时间来具体的写详细用法，具体的用法见：http://blog.csdn.n

			
		

	





	

		

			

				
					
html怎么让div随屏幕移动,css怎么让div固定 不随滚动而动

				
			

			

				

					weixin_32046225的博客
				

				

					06-20
					
					4852
					
				

			

		

		

			
				
HTML前端css控制块元素相对浏览器顶部位置固定不动，对于平级并列及其他任意div是浮动的效果实现方法。橙色区域是平移的距离#roll {　　display: block;　　position: fixed;　　top: 33%;　　margin-left: 750px;　　width: 30px;　　z-index: 9;}css代码含义某元素给予class="rool"属性，这个属性中定义了...

			
		

	





	

		

			

				
					
css将div层固定显示在页面底部不随滚动条滚动

				
			

			

				

					12-13
				

			

		

		

			
				
复制代码代码如下:#totop{position:fixed;right:10px;bottom:10px;width:100px;height:100px;}

			
		

	





	

		

			

				
					
jquery简单实现滚动条下拉DIV固定在头部不动

				
			

			

				

					10-26
				

			

		

		

			
				
滚动条下拉DIV固定在头部不动效果，想必很多的朋友都有见到过吧，下面为大家详细介绍下使用jquery是如何实现的，感兴趣的朋友可以参考下

			
		

	





	

		

			

				
					
js控制div不随滚动条移动

				
			

			

				

					时光小屋
				

				

					07-04
					
					2369
					
				

			

		

		

			
				
position:fixed 将这句代码添加到div的Css中




   window.onscroll= function()
{
var div_scroll=document.getElementById('div_scroll');
var scrolltop=document.documentElement.scrollTop || document.body.scr

			
		

	





	

		

			

				
					
html div 鼠标悬停改变样式

				
			

			

				

					feitianshenshe的专栏
				

				

					05-13
					
					1万+
					
				

			

		

		

			
				
<div class="good" onmouseover="this.className='goodchange'" onmouseout="this.className='good'">.goodchange{    background-color:#e70012;}.good    background-color:#006eda;}

			
		

	





	

		

			

				
					
HTML 页面滚动时，部分内容位置固定不滚动

					
热门推荐

				
			

			

				

					肖朋伟
				

				

					04-05
					
					1万+
					
				

			

		

		

			
				
HTML 页面滚动时，部分内容位置固定不滚动
效果截图：

页面源代码：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>无标题页</title>
</head>
<body style="width: 900px; ma...

			
		

	





	

		

			

				
					
div层随滚动条移动

				
			

			

				

					daha33的博客
				

				

					09-21
					
					224
					
				

			

		

		

			
				
[code]







随滚动条移动的层 - 51windows.Net








正中...

function sc1(){
 document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+(document.documentEl...

			
		

	





	

		

			

				
					
css控制某个div固定不动

				
			

			

				

					qq_38422016的博客
				

				

					05-10
					
					1万+
					
				

			

		

		

			
				
固定最常用的方法就是对其进行定位。
但在定位的时候需要注意：
①如果想固定在屏幕的某处，那么确定被固定的元素的父元素是body；
②为固定元素设置宽高。

比如给你的footer的class添加如下代码：


<style type="text/css">
    .shopping_cart {
        position: fixed;
        left: 0;
  ...

			
		

	





	

		

			

				
					
当 页面滚动条 触发时候 不让 body 滚动 让 子div滚动

				
			

			

				

					05-25
				

			

		

		

			
				
你可以使用CSS和JavaScript来实现这个功能。

首先你需要在CSS中将body的overflow属性设置为hidden，这样就可以禁止整个页面的滚动了：

```css
body {
  overflow: hidden;
}
```

然后你需要为子div添加一个自定义的样式，比如scrollable，用来控制子div的滚动：

```css
.scrollable {
  overflow-y: scroll;
}
```

最后，你需要使用JavaScript来切换body和子div的样式。当滚动条触发时，将body的样式设置为hidden，同时将子div的样式设置为scrollable。当滚动条消失时，将body的样式设置为auto，同时将子div的样式移除：

```javascript
// 获取子div
var div = document.getElementById("yourDivId");

// 监听滚动条事件
window.addEventListener("scroll", function () {
  // 判断滚动条状态
  if (window.scrollY > 0) {
    // 禁止body滚动
    document.body.style.overflow = "hidden";
    // 启用子div滚动
    div.classList.add("scrollable");
  } else {
    // 启用body滚动
    document.body.style.overflow = "auto";
    // 禁止子div滚动
    div.classList.remove("scrollable");
  }
});
```

注意，这段代码中的“yourDivId”是你需要替换为你的子div的id。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值