position:fixed;实现底层页面不跟随浮层模块滚动

        由于工作需要，在首页做一个搜索浮层，要求浮层全屏显示（即：width:100%;height:100%;）。当页面内容超出屏幕高度时，页面添加滚动条（overflow:scroll;）。

        

        搜索页面（浮层）代码：

        可是问题是，当我们滑动到浮层底部或顶部时，底层页面（首页）也会跟着滑动，那么就会出现底层页面的滚动条。

        同样，当浮层滑动到顶部，如果继续滑动页面的话，底层（首页）也会跟随滚动……如果在手机端测试，你会发现有两个滚动条的出现！

          代码如下：

	
		
		
	    
	    
	    
		
		
	
	
		
首页--底层页面
		

			

				点击打开搜索页面
				

					
搜索页面--浮层
					
内容模块div
					
在面向对象的编程语言中，类是对对象的抽象，在类中可以定义对象的属性和方法的描述；对象是类的实例，类只有被实例化后才能被使用。定义类　　在PHP中，使用关键字class加类名的方式定义类，然后用大括号包过类体，在类体中定义类的属性和方法。在面向对象的编程语言中，类是对对象的抽象，在类中可以定义对象的属性和方法的描述；对象是类的实例，类只有被实例化后才能被使用。定义类　　在PHP中，使用关键字class加类名的方式定义类，然后用大括号包过类体，在类体中定义类的属性和方法。
					
内容模块div
					关闭搜索页面
				
			
			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

			

		
		
		
	

        我试过设置的height为100%，overflow:hidden;很遗憾的是不支持……

        最后，我无意中发现通过设置的固定定位（position:fixed）居然可以实现！

        看你怎么滑动，都不会跟随滚动……

        有兴趣的童鞋可以试试，JS代码如下：

        $(function(){

                $(".open-box span").click(function(){

                        $(this).next(".box").show(300);

                        $("body").css("position","fixed");

                });

                $(".closed").click(function(){

                        $(this).parent().hide(300);

                        $("body").css("position","relative");

                });

        });

       希望有所帮助……谢谢！