菜单滚动至顶部后固定

最新推荐文章于 2023-05-19 10:26:16 发布
最新推荐文章于 2023-05-19 10:26:16 发布
阅读量689 收藏 1
点赞数
分类专栏： 移动h5开发 javascript 文章标签： 移动h5 javascript html 
<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="UTF-8">
		<title>菜单滚动至顶部后固定-柯乐义</title>
		<style type="text/css">
			.wrapper {
				width: 1000px;
				height: 2000px;
				margin-left: auto;
				margin-right: auto;
			}
			
			.header {
				height: 150px;
			}
			
			#nav_keleyi_com {
				padding: 10px;
				position: relative;
				top: 0;
				background: #125430;
				width: 1000px;
			}
			
			a {
				display: inline-block;
				margin: 0 10px;
				*display: inline;
				zoom: 1;
				color: white;
			}
		</style>
	</head>

	<body>
		<div class="wrapper">
			<div class="header">haha</div>
			<div id="nav_keleyi_com">
				<a href="http://keleyi.com/menu/net/" target="_blank">.NET</a>
				<a href="http://keleyi.com/menu/javascript/" target="_blank">Javascript</a>
				<a href="http://keleyi.com/menu/jquery/" target="_blank">jQuery</a>
				<a href="http://keleyi.com/menu/csharp/" target="_blank">C#</a>
				<a href="http://keleyi.com/menu/other/" target="_blank">其他</a>
				<a href="http://keleyi.com/" target="_blank">首页</a>
				<a href="/menu/aspnet/" target="_blank">ASP.NET</a>
				<a href="/menu/mvc/" target="_blank">MVC</a>
			</div>
			<div>hhehehehh</div>
		</div>
		<script type="text/javascript">
			function menuFixed(id) {
				var obj = document.getElementById(id);
				var _getHeight = obj.offsetTop;

				window.onscroll = function() {
					changePos(id, _getHeight);
				}
			}

			function changePos(id, height) {
				var obj = document.getElementById(id);
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				if(scrollTop < height) {
					obj.style.position = 'relative';
				} else {
					obj.style.position = 'fixed';
				}
			}
		</script>
		<script type="text/javascript">
			window.onload = function() {
				menuFixed('nav_keleyi_com');
			}
		</script>
	</body>

</html>


                

        

        

    




    

      

        

            

              
                
                  剑锋之行
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
javascript改变position值实现菜单滚动至顶部后固定

				
			

			

				

					10-27
				

			

		

		

			
				
现在很多网站都有这样的一个效果，当页面滚动到一定高度时，菜单栏会固定在页面顶部;该效果在 ie6 下不支持，因为ie6不支持 position:fixed,效果很不错，感兴趣的朋友可以了解下啊

			
		

	



                

              
                



	

		

			

				
					
【css】如何实现自定义滚动悬浮置顶、固定表头

					
最新发布

				
			

			

				

					hzxOnlineOk的博客
				

				

					09-21
					
					3900
					
				

			

		

		

			
				
到一个元素时，如果内容超出容器的尺寸，则会显示一个滚动条。与 scroll 不同的是，滚动条是以浮动的方式显示在内容上方，不会占用容器的空间。当应用于元素时，该元素在滚动时会固定在父容器的指定位置，直到滚动到达特定的位置或条件满足后，才会取消固定定位。这意味着，即使内容超出容器的高度，也不会显示滚动条或剪裁溢出的部分。：内容超出容器高度时，会根据需要设置是否显示滚动条，如果内容没有超出容器高度则不显示滚动条。：如果内容超出容器的高度，将显示滚动条，用户可以滚动查看超出的内容。：溢出的内容将被隐藏，不显示。

			
		

	



                


  
              

                


	

		

			

				
					
CSS定位（position））之sticky 定位

				
			

			

				

					Serena_tz的博客
				

				

					02-25
					
					2342
					
				

			

		

		

			
				
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bo

			
		

	





	

		

			

				
					
HTML中 css实现滚动页面时固定页面其中一栏的效果

				
			

			

				

					Siona_xin 的博客
				

				

					11-28
					
					7153
					
				

			

		

		

			
				
可以为需要固定的元素加上 { position: fixed } 这个 CSS 属性，再通过 top left right bottom 属性调整位置。（1）html中的代码：<!--右侧导航栏-->    <div class="navRight">    </div>（2）css样式中的代码：/*右侧导航栏的样式*/
.navRight{
    width: 40px;
    height:

			
		

	



		

			
		



	

		

			

				
					
css 滚动 固定到顶部_位置固定：滚动到顶部然后在纯CSS中固定

				
			

			

				

					cungui5726的博客
				

				

					08-23
					
					6120
					
				

			

		

		

			
				
css 滚动 固定到顶部For a time “dynamic fixed” elements were the hot web design feature: scroll a site and everything moved as expected, but when a particular element (often a menu bar, sometimes an advertise...

			
		

	





	

		

			

				
					
css：左中右布局占满屏幕，左右两块固定宽度200px ，中间自适应，先加载中间块

				
			

			

				

					qq_52824207的博客
				

				

					04-09
					
					1691
					
				

			

		

		

			
				
分析：

1.中间自适应

弹性布局display:flex

flex-grow增长系数，左右默认为0，中间设置为1即可分配所有剩余空间（分配给左右固定宽度之后的空间）

2：先加载中间

css选择器优先级问题

（1）越精确优先级越高

id选择器>类选择器>元素选择器(伪类、伪元素等暂不讨论)

（2）css文件里越后面优先级越高（相同类型）



代码：

html


<!DOCTYPE html>
<html>
    <head>
      

			
		

	





	

		

			

				
					
div当滚动到页面顶部的时候固定在顶部实例代码

				
			

			

				

					09-05
				

			

		

		

			
				
标题中的“div当滚动到页面顶部的时候固定在顶部实例代码”描述了一个常见的网页设计技术，通常被称为“固定顶栏”或“固定导航”。这个技术使得网页的某个部分（在这个例子中是一个包含链接的div）在用户滚动页面时...

			
		

	





	

		

			

				
					
导航栏滚动到顶部后固定

				
			

			

				

					07-16
				

			

		

		

			
				
在网页设计中，"导航栏滚动到顶部后固定"是一种常见的用户体验优化技术，它被称为Fixed Navigation或Sticky Navbar。这种设计使得用户在浏览长页面时，无论页面如何滚动，导航栏始终保持在屏幕顶部，便于用户随时...

			
		

	





	

		

			

				
					
jQuery滚动顶部固定导航菜单特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
**jQuery滚动顶部固定导航菜单特效代码详解**  在网页设计中，导航菜单是用户浏览网站时的重要引导工具。当用户在页面上下滚动时，保持导航菜单始终可见可以提供更好的用户体验。"jQuery滚动顶部固定导航菜单特效...

			
		

	





	

		

			

				
					
一个table表头固定，内容可滚动的实用例子

				
			

			

				

					10-20
				

			

		

		

			
				
一个table表头固定，内容可滚动的实用例子,同时可以实现增加，删除功能

			
		

	





	

		

			

				
					
顶部固定导航菜单代码

				
			

			

				

					01-03
				

			

		

		

			
				
顶部固定导航菜单代码基于jQuery实现，导航菜单始终在页面顶部定位效果，很常见的效果，非常实用；鼠标滑动滚动条时，导航固定顶部，并且滚动到对应的栏目菜单时，当前导航高亮显示；点击导航文字时平滑跳转到对应的栏目板块。有二手车旗舰店、车源保证、价格透明、过户便捷、分期付款、售后质保等栏目菜单。

			
		

	





	

		

			

				
					
固定div，滚动到顶部固定

				
			

			

				

					11-22
				

			

		

		

			
				
这个例子是把div固定在设定的地方，不跟着滚动条滚动！

			
		

	





	

		

			

				
					
特效 scroll页面滚动顶部固定

				
			

			

				

					qq_51130780的博客
				

				

					12-25
					
					1593
					
				

			

		

		

			
				
制作网站首页，以及部分侧边栏时，有些时候需要页面滚动，头部或侧边栏固定的需求

			
		

	





	

		

			

				
					
【CSS】使用 sticky 实现头部固定，主体内容滚动，但是头部不动的效果

				
			

			

				

					y_coder的博客
				

				

					05-19
					
					5663
					
				

			

		

		

			
				
时，元素会在正常文档流中占据其原本的位置，但当页面滚动时，元素会变为固定定位（fixed），直到它达到了指定的滚动位置，然后又会回到正常文档流中。可以使用CSS中的position属性和z-index属性来实现页面头部固定，下面随着内容的增多滚动，但是头部不动的效果。这使得position: sticky;非常适合于创建在页面滚动过程中保持在特定位置的导航栏、表头、侧边栏等元素。当元素的position设置为。这样头部就会固定在页面顶部了。

			
		

	





	

		

			

				
					
标题固定，内容滚动的css布局方式总结

				
			

			

				

					云雨之石的博客
				

				

					11-01
					
					2453
					
				

			

		

		

			
				
最近在项目中遇到了一个样式问题，需要样式内容中，标题部分粘性定位于一个地方，内容部分滑动，滑动过程中标题位置不动。
这是一种挺常见的场景，但对于我来说还真没有在实际开发中遇到很多。于是我最开始的想法就是使用position: sticky，将标题进行粘性定位，效果也很快出现。
但是令我没有想到的是，这个position: sticky的兼容性太差了，特别对于IE还有safari，后来测试就来找我，说在老版本的iPad上边用浏览器打开样式是有问题的，我排查后发现，在老iPad上边sticky属性直接就无用了。

			
		

	





	

		

			

				
					
滚动条滚动时头部导航栏固定在页面顶部的几种简单方法

					
热门推荐

				
			

			

				

					juxiaozheng的博客
				

				

					05-11
					
					2万+
					
				

			

		

		

			
				
一、使用css直接用固定定位position: fixed。

适合使用在导航栏有固定高度，避免导航栏下面的内容被遮盖。下面的盒子就需要调整top的距离。

示例代码：


<style>
*{
 margin: 0;
 padding: 0;
}
p{
 height: 500px;
}
section{
 padding-top: 40px;
}
div{
 height: 40px;
 width: 100%;
 color: white;
 background-color: crims

			
		

	





	

		

			

				
					
【CSS】固定顶部和底部，中间部分滚动展示

				
			

			

				

					coralime的博客
				

				

					03-09
					
					4716
					
				

			

		

		

			
				
写页面的时候经常遇到需要固定顶端和底部，中间内容自动撑开，超过屏幕大小可以自动滚动显示。

实现很简单，通过flex布局固定顶端和底部的高度，中间内容自动撑开，可以解决。

【CSS】


  <style>
        html, body {
            height: 100%;
            margin: 0;
        }

        ...

			
		

	





	

		

			

				
					
splice删除选中列表_无限滚动列表的实现（个人总结）

				
			

			

				

					weixin_39603573的博客
				

				

					11-25
					
					147
					
				

			

		

		

			
				
首先无限滚动是个什么东西？一般的滚动列表，一直往下滚动，一直加载dom；无限滚动，一直滚动，会动态删除看不到的dom,并渲染可见的dom，dom数量一直是有个固定的值。思路：容器要有一个固定的高度，超出出现滚动条，后续我们会根据滚动到底部，或者头部，加载相应的数据列表要有固定的宽度，这样才能精确的计算。当容器滚动条到底部，加载数据，并把头部看不见的多余dom删除，数据加入缓存。当容器滚动到头部，把...

			
		

	





	

		

			

				
					
axure中怎么做出固定首行_Axure怎么制作页面滚动时菜单固定在顶部的页面？

				
			

			

				

					05-17
				

			

		

		

			
				
要在 Axure 中制作一个固定在顶部的菜单，可以采用以下步骤：  1. 首先，在 Axure 中...滚动页面，查看菜单组件是否固定在页面的顶部，并且不会受到页面滚动的影响。  希望这些步骤能帮助您制作一个固定在顶部的菜单。

			
		

	



              



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

  

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

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值