jquery侧边栏固定悬浮

最新推荐文章于 2024-07-06 18:15:00 发布

qq874655551

最新推荐文章于 2024-07-06 18:15:00 发布

阅读量2.3k

点赞数

分类专栏： jQuery Web前端知识储备文章标签： jQuery 侧边栏悬浮固定

本文链接：https://blog.csdn.net/wanglui1990/article/details/85316201

版权

jQuery 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

Web前端知识储备

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Welcome to nginx!</title>
<style>
.xuanfu{
	right: 0;
	position: fixed;
	bottom: 0;//底部边距
	width: 100%;//根据情况，可省
	z-index: 100;
	border-color:red;
}
</style></head>
<script
  src="http://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous">
</script>  
<body class="vsc-initialized">
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>

<p>For online documentation and support please refer to

<p><em>Thank you for using nginx.</em></p>

<!--
<div class="xuanfu">
	<button type='button' class='fc-outline-dark winter-extend-br-siderright '>+</button>
	<button type='button' class='fc-outline-dark winter-curtail-br-siderright '>-</button>
</div>!
-->

<button class="reload-view" data-refresh-obj=".sideright" >
	加载侧边栏
</button>
<div class="sideright" style="right:0;position:fixed;width:280px;border:1px solid red;" hidden >

</div>
<script>
    $('body').on('click', '.reload-view', function (e) {
		var tag = $(this).data('refresh-obj');
		var obj = $(tag);
		if (tag == ".sideright") {
                        //obj.append("<div class='b--0 pos-fixed-force r--0 z-index-100'><button type = 'button' class= 'fc-outline-dark extend-br-siderright ' >+</button><button type='button' class='fc-outline-dark curtail-br-siderright '>-</button></div > ");
						//js添加扩宽与缩宽代码
						obj.append("<div class='xuanfu' style='border:1px solid red' ><button type = 'button' class= 'fc-outline-dark extend-br-siderright ' >+</button><button type='button' class='fc-outline-dark curtail-br-siderright '>-</button></div > ");
						
						
                    }
		obj.show();
	});
	// 侧边栏底部添加扩宽与缩宽
	$('body').on('click', '.extend-br-siderright', function (e) {
		e.preventDefault();
		$(".sideright").width("80%");
		$(".sideright").css({'border':'1px solid red'});
	});
	$('body').on('click', '.curtail-br-siderright', function (e) {
		e.preventDefault();
		$(".sideright").width("280px");
		$(".sideright").css({'border':'1px solid red'});
	});
</script>
</body>
</html>