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

梦里梦外; 2022-07-16 02:12 141阅读 0赞

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

**方法一：**

$(function() \{

var elm = $('.nav');

var startPos = $(elm).offset().top;

$.event.add(window, "scroll", function() \{

var p = $(window).scrollTop();

$(elm).css('position',((p) > startPos) ? 'fixed' : 'static');

$(elm).css('top',((p) > startPos) ? '0px' : '');

\});

\});

**方法二：**

$(function()\{

//获取要定位元素距离浏览器顶部的距离

var navH = $(".nav").offset().top;

//滚动条事件

$(window).scroll(function()\{

//获取滚动条的滑动距离

var scroH = $(this).scrollTop();

//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定

if(scroH>=navH)\{

$(".nav").css(\{"position":"fixed","top":0\});

\}else if(scroH＜navH)\{

$(".nav").css(\{"position":"static"\});

\}

\})

\})

例：

＜html>

＜head>

＜title>位置固定(＜/title>

＜script src="\_\_COMS\_\_/Jq/jquery-1.7.2.min.js">＜/script>

＜style type="text/css">

.fixed\_div\{

position:fixed;

left:200px;

bottom:20px;

width:400px;

\}

＜/style>

＜script type="text/javascript">

$(function()\{

//获取要定位元素距离浏览器顶部的距离

var navH = $(".nav").offset().top;

//滚动条事件

$(window).scroll(function()\{

//获取滚动条的滑动距离

var scroH = $(this).scrollTop();

//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定

if(scroH>=navH)\{

$(".nav").css(\{"position":"fixed","top":0\});

\}else if(scroH＜navH)\{

$(".nav").css(\{"position":"static"\});

\}

\})

\})

＜/script>

＜/head>

＜body>

＜div class="top">top＜/div>

＜p>  ＜/p>

＜hr>

＜div class="nav">topnav＜/div>

＜div class="fixed\_div" style="border:1px solid \#200888;">content, I'm content＜/div>

＜div style="height:888px;">＜/div>

＜/body>

＜/html>

源引：http://blog.sina.com.cn/s/blog\_3eba8f1c0101k94s.html

发表评论取消回复

表情：

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

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

相关阅读

相关 jquery + css 实现div固定

页面滚动条滚动到指定或大于 div 初始位置时，div 始终保持在页面顶部不动，滚动条小于初始位置时 div 还原 <script type="text/ja...

Dear 丶/ 2024年04月18日 15:32/ 0 赞/ 16 阅读

相关 jquery滚动监听，并且固定表头

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title

缺乏、安全感/ 2023年08月17日 15:44/ 0 赞/ 60 阅读

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

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

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

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

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

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

相关 jQuery实现将div中滚动条滚动到指定位置的方法

参考文章： [http://www.jb51.net/article/90185.htm][http_www.jb51.net_article_90185.htm]

小咪咪/ 2022年05月14日 02:50/ 0 赞/ 255 阅读

相关 Vue 简单的记录div滚动条的位置，并返回顶部

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

叁歲伎倆/ 2022年03月29日 11:58/ 0 赞/ 591 阅读

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

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

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

相关页面滚动至指定位置

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

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

相关 javascript 元素滚动到顶部固定效果(搜索框在顶部悬停)

除了搜索框，或者导航栏等类型特效都可以采用相同的方式解决。无疑像效果图所演示的效果相对于固定导航栏来说要更难一些。有其它效果需要更改，请自行修改下方源码。在线演示地址：[

雨点打透心脏的1/2处/ 2021年12月24日 10:27/ 0 赞/ 410 阅读

相关 JQuery 页面如何快速滚动到顶部？

JQuery 网页如何快速的滚动到顶部？现如今，页面元素不断丰富，就导致页面的纵深比较广，那么用户一旦阅读网页到了底部，就会产生一个快速滚动到顶部的需求，当然了，很多网页都这样

待我称王封你为后i/ 2021年09月10日 14:50/ 0 赞/ 394 阅读