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

梦里梦外; 2022-07-16 02:12 206阅读 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 条评论，206人围观）

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

相关阅读

相关 jquery + css 实现div固定

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

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

相关使用jQuery实现浏览器滚动条返回顶部功能

<!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8"/

迈不过友情╰/ 2024年02月19日 12:46/ 0 赞/ 76 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

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

相关页面滚动至指定位置

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

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

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

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

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