JQuery---页面滚动一定位置，导航位置固定

àì夳堔傛蜴生んèń 2023-10-09 11:58 11阅读 0赞

<html>
    
    <head>
    	<meta charset="UTF-8">
    	<title>滚动定位</title>
    	
    	<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    	
    	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    
    	
    	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    
    	<style>
    		.link-nav {
    			position: fixed;
    			top: 345px;
    			left: 80%;
    			height: 280px;
    			width: 200px;
    			box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    		}
    	</style>
    </head>
    
    <body>
    	<div class="link-nav">
    
    	</div>
    
    	<div class="tes" style="height: 2000px;">
    
    	</div>
    </body>
    
    </html>
    
    <script>
    	function scrollFixed() {
    		var nav = $('.link-nav');		//导航对象
    		var win = $(window);
    		var doc = $(document);
    
    		//初始化
    		var _top = doc.scrollTop();
    		if (_top > 345) {
    			nav.css('top', '20px');
    		} else {
    			nav.css('top', (345 - _top) + 'px');
    		}
    
    		win.scroll(function () {			//滚动事件
    			var top_ = doc.scrollTop();
    			if (top_ > 345) {
    				nav.css('top', '20px');
    			} else {
    				nav.css('top', (345 - top_) + 'px');
    			}
    		});
    
    	}
    	scrollFixed();
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android滚动页面位置指示器：CircleIndicator

Android滚动页面位置指示器：CircleIndicator CircleIndicator是github上的一个开源的用于页面滚动时候的位置指示器，指示当

秒速五厘米/ 2023年10月17日 08:16/ 0 赞/ 72 阅读

相关 JQuery---页面滚动一定位置，导航位置固定

<html> <head> <meta charset="UTF-8"> <title>滚动定位</title> <!-

àì夳堔傛蜴生んèń/ 2023年10月09日 11:58/ 0 赞/ 12 阅读

相关 vue 吸顶效果，开始随页面滚动，滚动到指定位置固定在顶部或者固定在指定位置

首先找到需要加吸顶的元素加上id和样式我这里是给页面左侧导航加吸顶，在外层div加id,里层div加样式 <div class="asset-main-

ゞ浴缸里的玫瑰/ 2022年08月31日 14:27/ 0 赞/ 193 阅读

相关 Jquery DIV滚动至浏览器顶部位置固定

获取元素（这里定位元素A）距离顶部的高度，接着设定scroll滚动的事件，比如超过那个高度，把A的位置设定为fixed，小于该高度，修改回relative。方法一

梦里梦外;/ 2022年07月16日 02:12/ 0 赞/ 160 阅读

相关 js鼠标滚动到某个位置导航菜单显示

js鼠标滚动到某个位置导航菜单显示： <script> $(function(){ var pcontent_right_height = $(".p

落日映苍穹つ/ 2022年07月14日 09:17/ 0 赞/ 160 阅读

相关页面滚动到特定位置

有两种方法用于页面滚动，或者使用滚动的相对坐标（window.scrollBy）来定位，或者是通过滚动到某一点的绝对坐标（window.scrollTo）来实现.。

深藏阁楼爱情的钟/ 2022年06月15日 01:45/ 0 赞/ 226 阅读

相关 HTML 页面滚动时，部分内容位置固定不滚动

HTML 页面滚动时，部分内容位置固定不滚动效果截图： ![在这里插入图片描述][20190405174458892.gif] 页面源代码： <!DOC

妖狐艹你老母/ 2022年02月23日 01:00/ 0 赞/ 358 阅读

相关页面滚动至指定位置

方法一：锚点定位 <a href="B">B</a> //点击此处将跳转至设置的ID为B的锚点 <div id="B">B</div>

你的名字/ 2022年02月17日 19:23/ 0 赞/ 401 阅读

相关 a标签滚动页面到指定位置

[qnx使用实战培训，日入过万，马上来试试。>>> ][qnx_] ![hot3.png][] a标签滚动页面到指定位置的方法 <a href='javascr

╰半橙微兮°/ 2021年12月11日 00:34/ 0 赞/ 597 阅读

相关 jquery动态设置滚动条位置

假设有一个div，里面会不断append新的内容，当超过一定高度后会出现滚动条。但是新内容append后，滚动条的位置始终不变，会在顶部。这种体验很不好，我们希望能够动态调

痛定思痛。/ 2021年06月22日 15:36/ 0 赞/ 612 阅读