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

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

position:fixed;实现底层页面不跟随浮层模块滚动_第1张图片        position:fixed;实现底层页面不跟随浮层模块滚动_第2张图片

        搜索页面(浮层)代码:


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

position:fixed;实现底层页面不跟随浮层模块滚动_第3张图片


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

          代码如下:


	
		
		
	    
	    
	    
		
		
	
	
		

首页--底层页面

点击打开搜索页面

搜索页面--浮层

内容模块div

在面向对象的编程语言中,类是对对象的抽象,在类中可以定义对象的属性和方法的描述;对象是类的实例,类只有被实例化后才能被使用。定义类  在PHP中,使用关键字class加类名的方式定义类,然后用大括号包过类体,在类体中定义类的属性和方法。在面向对象的编程语言中,类是对对象的抽象,在类中可以定义对象的属性和方法的描述;对象是类的实例,类只有被实例化后才能被使用。定义类  在PHP中,使用关键字class加类名的方式定义类,然后用大括号包过类体,在类体中定义类的属性和方法。

内容模块div
关闭搜索页面








































        我试过设置的height为100%,overflow:hidden;很遗憾的是不支持……
        最后,我无意中发现通过设置的固定定位(position:fixed)居然可以实现!

position:fixed;实现底层页面不跟随浮层模块滚动_第4张图片

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

        有兴趣的童鞋可以试试,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");

                });

        });

 
         希望有所帮助……谢谢!

你可能感兴趣的:(实例练习)