zoukankan      html  css  js  c++  java
  • HTML 中让DIV不随滚动条滚动,使终显示在浏览器的固定位置

    做过手机版的效果,PC也同时有效,代码是收集来的,不够精简,但可用。效果如下:

     ("#first")为需要浮动的DIV

    <script type="text/javascript" src="js/jquery.min.js"></script> 
    <script> 
    $.fn.smartFloat = function() {
    	var position = function(element) {
    		var top = element.position().top, pos = element.css("position");
    		var browser=navigator.appName;
    		var browser2=navigator.userAgent;
        		$(window).scroll(function() {
    			var scrolls = $(this).scrollTop();
    			if (scrolls > 120) {
    				if (window.XMLHttpRequest) {
    					if(browser2.indexOf("Chrome") > -1 || browser2.indexOf("MSIE")> -1 || browser2.indexOf("iPhone")> -1){
    						element.css({position: "fixed",top: 0});//更改这里的0可以设定在哪个Y位置固定
    					}else{
    						element.css({position: "fixed",top: scrolls});	
    					}
    				} else {
    					element.css({top: scrolls});	
    				}
    			}else {
    				element.css({position: pos,top: top});	
    			}
    		});
    	};
    	return $(this).each(function() {
    		position($(this));						 
    	});
    };
     
    $("#first").smartFloat();
    </script>
    
  • 相关阅读:
    记事本开发者日记~二
    《梦断代码》读后感①
    记事本开发日记~一
    仓库管理msi系统
    java web + mysql 的增删改查
    第九周动手动脑
    四则运算答题版
    JAVA常用的异常处理情况
    继承和多态中动手动脑
    laravel1
  • 原文地址:https://www.cnblogs.com/wqing/p/2351204.html
Copyright © 2011-2022 走看看