HTML中让DIV不随滚动条滚动，使终显示在浏览器的固定位置

HTML文章/教程1年前 (2023)发布勤奋小助

0 0

做过手机版的效果，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>

原文链接：https://www.cnblogs.com/wqing/archive/2012/02/14/2351204.html
本文来源爱码网，其版权均为原网址所有与本站无关，文章内容系作者个人观点，不代表本站对观点赞同或支持。如需转载，请注明文章来源。